spacing in firefox but not in ie

html, spacing in firefox but not in ie Hi all,

In http://topvolleyantwerpen.be/p I have spacing under the Nieuws
Items. It appears that a spacing is creating under div.content . I
tried to remove padding and marging but that didn't solve it.

The page renders as foreseen in IE

Maybee someone knows a solution?

Thanks
Stijn

html >> spacing in firefox but not in ie On 2008-06-30, Tarscher wrote:
> Hi all,
>
> In http://topvolleyantwerpen.be/p I have spacing under the Nieuws
> Items. It appears that a spacing is creating under div.content . I
> tried to remove padding and marging but that didn't solve it.

Why are you using a transitional doctype? And why XHTML?

First, fix the (minor) mark-up errors.

> The page renders as foreseen in IE

The biggest problem you have is that you are trying to design a
web page as if it were a piece of paper. It's not.

This is how your page looks in my browser:
<http://cfaj.freeshell.org/testing/tarscher.jpg>

--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

html >> spacing in firefox but not in ie
On Mon, 30 Jun 2008 09:50:52 -0700 (PDT)
Tarscher <email***@***.com> wrote in:
<email***@***.com>

> Hi all,
>
> In http://topvolleyantwerpen.be/p I have spacing under the Nieuws
> Items. It appears that a spacing is creating under div.content . I
> tried to remove padding and marging but that didn't solve it.
>
> The page renders as foreseen in IE

It's not a padding or margin issue. It's the floats.

Search for IE haslayout to discover why IE may be rendering it the way
you desire it.

Your example could easily be converted to strict and error free in
either html or xhtml.

For most browsers adding div.content { overflow:hidden; } may resolve
the issue.

IE 6 or less would require additional rules, not only for the content
but also for the transparent images.

--

BootNic Mon Jun 30, 2008 03:53 pm
Thirty-five is when you finally get your head together and your body
starts falling apart.
*Caryn Leschen*

html >> spacing in firefox but not in ie Tarscher wrote:
> Hi all,
>
> In http://topvolleyantwerpen.be/p I have spacing under the Nieuws
> Items. It appears that a spacing is creating under div.content . I
> tried to remove padding and marging but that didn't solve it.
>
> The page renders as foreseen in IE
>
> Maybee someone knows a solution?

The actual reason for your problem is that div.content has a setting
of min-height: 400px; which is insufficient for the content which
amounts to 430px.

--
Gus

html >> spacing in firefox but not in ie On 30 jun, 21:53, BootNic <email***@***.com> wrote:
> On Mon, 30 Jun 2008 09:50:52 -0700 (PDT)
> Tarscher <email***@***.com> wrote in:
> <email***@***.com>
>
> > Hi all,
>
> > Inhttp://topvolleyantwerpen.be/pI have spacing under the Nieuws
> > Items. It appears that a spacing is creating under div.content . I
> > tried to remove padding and marging but that didn't solve it.
>
> > The page renders as foreseen in IE
>
> It's not a padding or margin issue. It's the floats.
>
> Search for IE haslayout to discover why IE may be rendering it the way
> you desire it.
>
> Your example could easily be converted to strict and error free in
> either html or xhtml.
>
> For most browsers adding div.content { overflow:hidden; } may resolve
> the issue.
>
> IE 6 or less would require additional rules, not only for the content
> but also for the transparent images.
>
> --
>
> BootNic ???????????????????Mon Jun 30, 2008 03:53 pm
> ?Thirty-five is when you finally get your head together and your body
> ?starts falling apart.
> ?*Caryn Leschen*
>
> 爏ignature.asc
> 1KDownloaden

many thanks for the reply.

The overflow: hidden indeed solved ( http://topvolleyantwerpen.be/p )
the problem for FF. in IE 6 I still no background repeating patern
though (as you predicted). Someonehas an idea why the patern isn't
visible?

in IE6 also the red botom part of the logo is put on the right side
instead of the left side.
div.content div.logo_left_top
{
position: absolute;
left: 0px;
top: 0px;
}

I can solve this by entering ie 6 specific code ( left: -950px; ) but
maybe there is another solution?

Thanks,
Stijn

html >> spacing in firefox but not in ie
On Tue, 1 Jul 2008 08:24:25 -0700 (PDT)
Tarscher <email***@***.com> wrote in:
<email***@***.com>

> On 30 jun, 21:53, BootNic <email***@***.com> wrote:
>> On Mon, 30 Jun 2008 09:50:52 -0700 (PDT)
>> Tarscher <email***@***.com> wrote in:
>> <email***@***.com>
>>
>>> Inhttp://topvolleyantwerpen.be/pI have spacing under the Nieuws
>>> Items. It appears that a spacing is creating under div.content . I
>>> tried to remove padding and marging but that didn't solve it.
[snip]
>> IE 6 or less would require additional rules, not only for the
>> content but also for the transparent images.
>>
[snip] Please remove signatures when replying.
> The overflow: hidden indeed solved ( http://topvolleyantwerpen.be/p )
> the problem for FF. in IE 6 I still no background repeating patern
> though (as you predicted). Someonehas an idea why the patern isn't
> visible?
>
> in IE6 also the red botom part of the logo is put on the right side
> instead of the left side.
> div.content div.logo_left_top
> {
> position: absolute;
> left: 0px;
> top: 0px;
> }
>
> I can solve this by entering ie 6 specific code ( left: -950px; )
> but maybe there is another solution?

I suggest you use a conditional comment to target IE 6. This can be
done with either a style element or a link element if you desire an
external style sheet.

The basic fix for IE 6 is to trigger something called haslayout, feel
free to google up on it. Do do this in this example just add zoom:1 to
the div.content in a conditional comment similar to the following
example.

I also suggest you add a vertical-align rule to the .menu_item rule. In
your source it may not be required, however that depends on the
white space in the source. If you were to run you page through tidy for
example, you may end up with a space under your logo that would be
difficult to trace unless you know what you are looking for.



You sill have not fixed the errors in the validation, all you have to
do is move the script elements that you have between the head and the
body, just move it to the head I think would be fine.

After that you can switch to a strict document type, just replace:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">

and you will have a strict document.

With that being said with just a little more effort you could have an
html 4.01 strict document.

You will still need to work on your style sheets as far as the
font-size is concerned. You really have no control of the font-size,
all you can do is suggest a font-size, but you can make it a bit more
usable.

Any element that you have text in, if you set a height to it, it should
be in em rather then px. em units will adjust with the text size, px
will not.

--

BootNic Tue Jul 1, 2008 03:00 pm
You can turn painful situations around through laughter. If you can
find humor in anything - even poverty - you can survive it.
*Bill Cosby*

html >> spacing in firefox but not in ie On 1 jul, 21:00, BootNic <email***@***.com> wrote:
> On Tue, 1 Jul 2008 08:24:25 -0700 (PDT)
> Tarscher <email***@***.com> wrote in:
> <email***@***.com>
>
> > On 30 jun, 21:53, BootNic <email***@***.com> wrote:
> >> On Mon, 30 Jun 2008 09:50:52 -0700 (PDT)
> >> Tarscher <email***@***.com> wrote in:
> >> <email***@***.com>
>
> >>> Inhttp://topvolleyantwerpen.be/pIhave spacing under the Nieuws
> >>> Items. It appears that a spacing is creating under div.content . I
> >>> tried to remove padding and marging but that didn't solve it.
> [snip]
> >> IE 6 or less would require additional rules, not only for the
> >> content but also for the transparent images.
>
> [snip] Please remove signatures when replying.
>
>
>
> > The overflow: hidden indeed solved (http://topvolleyantwerpen.be/p)
> > the problem for FF. in IE 6 I still no background repeating patern
> > though (as you predicted). Someonehas an idea why the patern isn't
> > visible?
>
> > in IE6 also the red botom part of the logo is put on the right side
> > instead of the left side.
> > div.content div.logo_left_top
> > {
> > ??position: absolute;
> > ??left: 0px;
> > ??top: 0px;
> > }
>
> > I can solve this by entering ie 6 specific code ( left: -950px; )
> > but maybe there is another solution?
>
> I suggest you use a conditional comment to target IE 6. This can be
> done with either a style element or a link element if you desire an
> external style sheet.
>
> The basic fix for IE 6 is to trigger something called haslayout, feel
> free to google up on it. Do do this in this example just add zoom:1 to
> the div.content in a conditional comment similar to the following
> example.
>
> I also suggest you add a vertical-align rule to the .menu_item rule. In
> your source it may not be required, however that depends on the
> white space in the source. If you were to run you page through tidy for
> example, you may end up with a space under your logo that would be
> difficult to trace unless you know what you are looking for.
>
> 
>
> You sill have not fixed the errors in the validation, all you have to
> do is move the script elements that you have between the head and the
> body, just move it to the head I think would be fine.
>
> After that you can switch to a strict document type, just replace:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> with
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
>
> and you will have a strict document.
>
> With that being said with just a little more effort you could have an
> html 4.01 strict document.
>
> You will still need to work on your style sheets as far as the
> font-size is concerned. You really have no control of the font-size,
> all you can do is suggest a font-size, but you can make it a bit more
> usable.
>
> Any element that you have text in, if you set a height to it, it should
> be in em rather then px. em units will adjust with the text size, px
> will not.
>
> --
>
> BootNic ???????????????????燭ue Jul 1, 2008 03:00 pm
> ?You can turn painful situations around through laughter. If you can
> ?find humor in anything - even poverty - you can survive it.
> ?*Bill Cosby*
>
> 爏ignature.asc
> 1KDownloaden

Thanks for the help. The site seems to render properly in IE 6 now.

Thanks again