HighDots Forums  

CSS - Compatibility Issue Between IE and Firefox

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss CSS - Compatibility Issue Between IE and Firefox in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
petertyler
 
Posts: n/a

Default CSS - Compatibility Issue Between IE and Firefox - 01-02-2006 , 08:13 AM






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.


Reply With Quote
  #2  
Old   
jojo
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-02-2006 , 08:18 AM






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

Reply With Quote
  #3  
Old   
Osgood
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-02-2006 , 08:31 AM



petertyler wrote:

Quote:
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;
}



Reply With Quote
  #4  
Old   
petertyler
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-03-2006 , 06:49 AM



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.



Reply With Quote
  #5  
Old   
djinn
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-03-2006 , 07:06 AM



petertyler wrote:
Quote:
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


Reply With Quote
  #6  
Old   
petertyler
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-03-2006 , 07:58 AM



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

Reply With Quote
  #7  
Old   
jojo
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-03-2006 , 08:23 AM



petertyler wrote:
Quote:
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
----------------------------------------------------


Reply With Quote
  #8  
Old   
petertyler
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-03-2006 , 08:38 AM



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.


Reply With Quote
  #9  
Old   
Gary White
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-03-2006 , 09:11 AM



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

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


Reply With Quote
  #10  
Old   
Osgood
 
Posts: n/a

Default Re: CSS - Compatibility Issue Between IE and Firefox - 01-03-2006 , 10:05 AM



petertyler wrote:
Quote:
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



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.