RE: [WSG] IE 6 Nightmares
Ive been racking my brain trying to solve a CSS problem and I was hoping somebody here can point me in the right direction. Im developing a site that has to work in all modern browsers and IE 6. Here is the link to a sample page: http://www.jasonbyer.com/dev/new/ The problem that Im having is that currently the page looks fine in IE 6 but in Firefox the navigation doesnt extend the entire width of the screen. That's because #mainContent is a float and without a width it shrinkwraps There are many ways to style this, but fwiw I'd not use float on that container, I'd make it a block formatting context (e.g., overflow:hidden;zoom:1) and then go from there. As a side note, there is no need to use height:1% on the side bar (it is a float so it has a layout already) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE 6 Nightmares
To concur with Thierry, the float on #mainContent appears unnecessary on this page. Give it a margin, or padding, to push the content off the left bar and you should be good to go. Regards, Jon Warner http://thepixelforge.net/ On Tue, Apr 27, 2010 at 11:24 PM, Thierry Koblentz thierry.koble...@gmail.com wrote: I’ve been racking my brain trying to solve a CSS problem and I was hoping somebody here can point me in the right direction. I’m developing a site that has to work in all modern browsers and IE 6. Here is the link to a sample page: http://www.jasonbyer.com/dev/new/ The problem that I’m having is that currently the page looks fine in IE 6 but in Firefox the navigation doesn’t extend the entire width of the screen. That's because #mainContent is a float and without a width it shrinkwraps There are many ways to style this, but fwiw I'd not use float on that container, I'd make it a block formatting context (e.g., overflow:hidden;zoom:1) and then go from there. As a side note, there is no need to use height:1% on the side bar (it is a float so it has a layout already) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE 6 Nightmares
To concur with Thierry, the float on #mainContent appears unnecessary on this page. Give it a margin, or padding, to push the content off the left bar and you should be good to go. These two containers are siblings, so if the OP uses padding or margin to push the content off the left bar he will not be able to clear (left) floats in the main section without clearing the sidebar at the same time. This is why I suggested to use overflow/zoom to create a new block formatting context. This article may help understand the issue: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE 6 Nightmares
I faced several similar problems before, but, to be honest, don't remember exactly what I did. But I can offer some suggestions: make sure that parents have RELATIVE positioning, make sure that all parents are Relative, plus Parents have a fixed height (not percentages) - I know fixed height is bad, but just see if that works, and then base your decisions based on that. Anya V. Gerasimchuk Web Designer, IT - Web Shared Services UNIFI Information Technology agerasimc...@unioncentral.com (513) 595 -2391 Thierry Koblentz thierry.koble...@gmail.com Sent by: li...@webstandardsgroup.org 04/27/2010 08:36 PM Please respond to wsg@webstandardsgroup.org To wsg@webstandardsgroup.org cc Subject RE: [WSG] IE 6 Nightmares To concur with Thierry, the float on #mainContent appears unnecessary on this page. Give it a margin, or padding, to push the content off the left bar and you should be good to go. These two containers are siblings, so if the OP uses padding or margin to push the content off the left bar he will not be able to clear (left) floats in the main section without clearing the sidebar at the same time. This is why I suggested to use overflow/zoom to create a new block formatting context. This article may help understand the issue: http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** This message may contain confidential information intended only for the use of the addressee(s) named above and may contain information that is legally privileged. If you are not the addressee, or the person responsible for delivering it to the addressee, you are hereby notified that reading, disseminating, distributing or copying this message is strictly prohibited. If you have received this message by mistake, please immediately notify us by replying to the message and delete the original message immediately thereafter. Thank you. *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
