CSS Browser problem, IE & Firefox

CSS Browser problem

[slimmy]

hello everyone,
i have a problem, my code looks like this:

 <div id="top">
<div id="topleft"></div>
<div id="topfont">
<p class="p1"><span>content</span></p>
</div>
<div id="topright">content</span></p>
</div>
</div>

the css looks like this:

#top {
padding-right:0px;
padding-top:0px;
padding-left:0px;
overflow:auto;
position: absolute;
height: 142px;
width:755px;
top:0px;
}
#topleft {
background-image: url(logo.gif);
position: absolute;
width: 313px;
height: 142px;
color: #FFFFFF;
left: 0px;
}
#topfont {
position: absolute;
width: 442px;
height: auto;
right: 0px;
}
#topright {
top: auto;
position: absolute;
width: 440px;
height: auto;
right: 0px;
top: 125px;
}

now in ie the site looks great but in firefox (and netscape 7.1) scroll bars appear..

anyone know what's wrong... i'm going crazy.

[edited by: Woz at 2:54 am (utc) on April 11, 2004]
[edit reason] No URLs please, TOS#13 [/edit]

[iamlost]

Welcome to webmasterWorld, slimmy!

Please remove your urls as they are against the Terms of Service. Your posted code snippets are sufficient and will remain as examples for future users.

I think your problem is that in Firefox and other more compliant (less forgiving) browsers the <p> tags are being displayed as block elements which pushes #topright further down below the 142px height of the enclosing div invoking the scroll from the overflow auto.

If you add something like p {margin:0;} to your css that will help.

Depending on the browser font size (default or user set) that may invoke the same result. You may therefore want to include a set font-size that displays well cross browser.

[brdwlsh]

it appears that you left out an opening <span> tag in this line:

<div id="topright">content</span></p>

could that be the problem? css seems to be ok.

good luck, hope the answer was that simple--for your sanity's sake.

[slimmy]

hey iamlost,

thank you! the margin thing worked :D
i love you ;)