spacing in firefox but not in ie

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Tarscher - 30 Jun 2008 17:50 GMT

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

Reply to this Message

Chris F.A. Johnson - 30 Jun 2008 18:47 GMT

> 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>

Signature

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

Reply to this Message

BootNic - 30 Jun 2008 20:53 GMT

<c362b602-2518-45c4-95e3-d3f815932b63@c58g2000hsc.googlegroups.com>

> Hi all,
>
[quoted text clipped - 3 lines]
>
> 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.

Signature

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*

Reply to this Message

Tarscher - 01 Jul 2008 16:24 GMT

> <c362b602-2518-45c4-95e3-d3f815932...@c58g2000hsc.googlegroups.com>
>
[quoted text clipped - 29 lines]
> signature.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

Reply to this Message

BootNic - 01 Jul 2008 20:00 GMT

<05b09ac1-bdf3-4972-9fc3-9ff67b8e9987@56g2000hsm.googlegroups.com>

>> <c362b602-2518-45c4-95e3-d3f815932...@c58g2000hsc.googlegroups.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
[quoted text clipped - 12 lines]
> 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.

Signature

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*

Reply to this Message

Tarscher - 04 Jul 2008 08:51 GMT

> <05b09ac1-bdf3-4972-9fc3-9ff67b8e9...@56g2000hsm.googlegroups.com>
>
[quoted text clipped - 89 lines]
> signature.asc
> 1KDownloaden

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

Thanks again

Reply to this Message

Gus Richter - 30 Jun 2008 22:30 GMT

> Hi all,
>
[quoted text clipped - 5 lines]
>
> 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.

Signature

Gus

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / HTML / July 2008

spacing in firefox but not in ie