Hey everyone I am having an issue with the css of a site that recently launched, the css validates and looks perfect in IE7 and firefox as I designed based on Firefox. Now that it is live and some users....for unknown reasons are using IE6 the layout is off. I have a container div, menu, content, right column. The right column in IE6 is getting bumped below the content but still floating to the right. I've tried adjusting the width on all elements and the floats and position:relative; and have cleared some floats but can't for the life of me get it to work. If anyone could point me in the right direction or knows what I'm missing here that would be great.
Thanks in advance for any help you might be able to provide.
Hey everyone I am having an issue with the css of a site that recently launched, the css validates and looks perfect in IE7.
Valid CSS is useless unless you apply it to valid HTML! Your HTML has 96 errors.
There are no standards for invalid HTML. Each browser attempts to correct errors but since there is no standard way to do that they all do it differently.
Without valid HTML markup CSS can't work properly.
We ask for valid HTML up front, and we expect you to provide it.
Once you get your HTML valid, if the problems persist, come on back and ask again.
Ed, the errors are mostly
Ed, the errors are mostly trivial, not using "/>" to close self closing elements, duplicate IDs, not using &, they shouldn't affect the rendering in any browser.
Usually, when a column is dropped down like that, the browser doesn't think there is sufficient room for the column. I can't see where the width problem is. The container is 779 wide and the three columns + their padding are 758 (or 766 in IE6 terms*) wide, which would appear to leave plenty of extra space.
Try making the container progressively wider until you find the width at which IE6 can accomodate all three columns. Then go looking for what could possibly require that extra width. Placing background colours on bits of the page will show which elements overlap in FF and which elements are pushing your columns wider in IE6.
* IE6 will take a width as "advisory" when overflow is visible, expanding the element if any of its contents requires more width. Your image across the column is 5px wider than the column width.
Thanks I've resized the
Thanks I've resized the image, but that didn't seem to do anything. I also set the container id #frame to 900px but still doesn't let element display beside where it should in IE6. Would it have something to do with some clearing divs and spans that I'm using?
Ok so I've put a red border
Ok so I've put a red border around every element for testing purposes so I could see what was happening in IE6 but it looks like there is plenty of room for the element to fit in there. Can you take a look and see if i'm missing something?
I don't see any borders.
I don't see any borders. Borders aren't always the best idea. A border can affect margin collapsing. For that reason I prefer to use contrasting background colours.
But, you're right, its not widths. Get rid of the "<span class="clearfix" />" at the bottom of the centre column. Also look into using "faux columns" to ensure your column backgrounds match the length of the tallest column.
Took the borders off
Sorry took the borders off for now. The faux columns, I assume you mean something similar to what I'm using for the #frame element I used it for the homepage of the site but the rest of the site is only 2 column. Anything else you can see? Or should I just do a rewrite? I passed my original css file to some developers but they didn't exactly follow it and now I'm left trying to fix it. Grrrrrrrrr. Thanks for the help so far.
Ok figured it out!! I was using a <span class="clearfix" > and in my css I had defined it as
so ditched the display attribute and tada, issue solved.
Thanks for all the help.
Maybe I wasn't clear, but
Maybe I wasn't clear, but that's what I said
Get rid of the "<span class="clearfix" />"
I couldn't get rid of the
I couldn't get rid of the clear then my container element (#frame) wouldn't wrap around the floating elements.
put it after the third
put it after the third column. or better yet, put overflow:hidden on #frame.