CSS - Compatibility Issue Between IE and Firefox

Hi there! I am having some trouble aligning divs between IE and Firefox and I
was wondering if somebody could shed some light. Here is the URL:

http://www.optiontradingtips.com/test.html

What I am trying to do is have Left Box, Main Content and Right Box all on the
same level, which works as intended in IE. However, in Firefox, the Main
Content and Right Box always follows the level left by the bottom of Left Box.

I tried zeroing out all padding and margins for the BodyWrap div and also on
Left Box 2 and a few other bits and pieces but nothing seems to help. I think I
am missing something fundamental. Any ideas?

Thank you,

Peter.

Hi

Change the selectors to look like the ones below, move the right box div
to before the maincontent div in the source code. See how that looks.

#leftbox {
float: left;
width: 150px;
border: 1px solid #000000;
margin: 0px 0px 0px 10px;
padding: 0px;
}
#leftbox2 {
clear: left;
float: left;
width: 150px;
border: 1px solid #000000;
margin: 10px 0px 0px 10px;
}
#maincontent {

height: 50px;
width: 400px;
border: 1px solid #000000;
margin-left: 180px;
}


--
Cheers jojo
Team Macromedia Member Volunteer for Dreamweaver 8
http://www.webade.co.uk
http://www.cmsforbusiness.co.uk
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

petertyler wrote:

Hi there! I am having some trouble aligning divs between IE and Firefox and I
was wondering if somebody could shed some light. Here is the URL:

http://www.optiontradingtips.com/test.html

What I am trying to do is have Left Box, Main Content and Right Box all on the
same level, which works as intended in IE. However, in Firefox, the Main
Content and Right Box always follows the level left by the bottom of Left Box.

I tried zeroing out all padding and margins for the BodyWrap div and also on
Left Box 2 and a few other bits and pieces but nothing seems to help. I think I
am missing something fundamental. Any ideas?

I think you should be wrapping the two leftboxes in their own <div> as
below.


<div id="leftboxWrapper">
<div class="leftbox" id="leftbox">
Left Box
</div>
<div class="leftbox2" id="leftbox2">
Left Box 2
</div>
</div>



Then add the #leftboWrapper css

#leftboxWrapper {
float: left;
width: 150px;

}


and change your current #leftbox/#leftbox2 css as below.


#leftbox {
border: 1px solid #000000;

}

#leftbox2 {
border: 1px solid #000000;
margin: 10px 0px 0px 0px;
}

Hi again, firstly, I really appreciate both of your responses. Thanks a lot.
Osgood, your solution worked, however, it is a little difficult to implement as
I work with templates and the navigation sits inside a wrapper that is
non-editable.

And JoJo, your solution worked in my simple example, but the weird thing is
that when I apply it to my actual site it doesn?t render correctly in both IE
and Firefox. It is driving me nuts how setting the same property behaves
differently in different browsers. Here is the updated example;

http://www.optiontradingtips.com/boxes.html

First, in IE and Firefox I cannot get the right box (#bodyside2) to line up
horizontally with the other elements. And secondly, in Firefox the #bodywrapper
margin is ignored completely.

If I try and hack issue 2 by using padding instead, I need 75px for it to look
right in Firefox and 25px for IE. Why is margin sometimes ignored in Firefox?

I initialized padding and margin to 0 for body and html, but I think there is
some conflict going on that I do not understand. Please help ;-)

Thanks,

Peter.

petertyler wrote:

Hi there! I am having some trouble aligning divs between IE and Firefox and I
was wondering if somebody could shed some light. Here is the URL:

http://www.optiontradingtips.com/test.html

What I am trying to do is have Left Box, Main Content and Right Box all on the
same level, which works as intended in IE. However, in Firefox, the Main
Content and Right Box always follows the level left by the bottom of Left Box.

I tried zeroing out all padding and margins for the BodyWrap div and also on
Left Box 2 and a few other bits and pieces but nothing seems to help. I think I
am missing something fundamental. Any ideas?

#bodynav {
float: left;
width: 150px;
border: 1px solid #000099;
margin-top: 25px;
padding: 0px;
}

HTH
--
chin chin
Sinclair

Ah ha, thanks buddy, that helped a lot. But still, the margin of 25px for #bodycontent is ignored in Firefox. Any idea?

http://www.optiontradingtips.com/boxes.html

Peter

petertyler wrote:

Ah ha, thanks buddy, that helped a lot. But still, the margin of 25px for #bodycontent is ignored in Firefox. Any idea?

http://www.optiontradingtips.com/boxes.html

Hi

Add a padding of 1px to the top, your margin is escaping.

#bodycontent {
width: 444px;
text-align: justify;
margin: 40px 0px 0px 175px;
padding: 1px;
}


--
Cheers jojo
Team Macromedia Member Volunteer for Dreamweaver 8
http://www.webade.co.uk
http://www.cmsforbusiness.co.uk
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------

Hi Jo Jo, when I add the 40px to the margin, it shifts the #bodycontent 40px
below the nav bar in IE and a smaller amount in FireFox. When I do this, both
in IE and Firefox, the alignment is still out.

What do you mean by "ecaping"?

Peter.

On Tue, 3 Jan 2006 12:58:07 +0000 (UTC), "petertyler"
<webforumsuser (AT) macromedia (DOT) com> wrote:

Ah ha, thanks buddy, that helped a lot. But still, the margin of 25px for #bodycontent is ignored in Firefox. Any idea?

http://www.optiontradingtips.com/boxes.html

The content in your topnav is floated. You can clear the float by
placing a break between the closing </div> of the topnav:

</div>
<br style="clear:both">
<div class="bodywrapper" id="bodywrapper">

Or you could set a height for the topnav:

#topnav {
border-left: 1px solid #006699;
margin: 0px auto;
padding: 0px;
line-height: 35px;
width: 805px;
height: 35px;
}

There is another problem that you haven't seen yet. Consider this style:

#bodywrapper {
width: 805px;
height: 500px;
padding: 0px;
margin: 0px auto 0px;
}

Your bodywrapper will be 500px tall. That 500 pixels is what is used to
position the footer. Look at the page in Firefox and increase the text
size one notch. I'd suggest removing the height: 500 from the
bodywrapper.

And what's with all the id="whatever" class="whatever"? You have NO
classes defined. You can remove ALL of the class attributes.

Gary

petertyler wrote:

Hi again, firstly, I really appreciate both of your responses. Thanks a lot.
Osgood, your solution worked, however, it is a little difficult to implement as
I work with templates and the navigation sits inside a wrapper that is
non-editable.

Well had you set the template up correctly in the first insyance there
wouldnt be a problem would there. Stop using shit css solutions and
satrt using SIMPLE ones, they work ALL the time