Site looks funny in Chrome

Hello there,

It’s a css issue. The content and the sidebar are floating elements. The primary developer forgot to clear the float before displaying the footer.

You can fix this with only one line of code (you lucky boy!):
<div class="clear"></div> which is, in your theme, the same as <div style="clear: both;"></div>

Find in your theme the <div id=”content2″>…</div> and eventually the <div id=”sidebar”>. Write the line of code I gave you beetween the closing tag of the div#sidebar and the closing tag of the div#content2

The following is a little out of scope of your question.
There’s also many <div style="clear: all;"></div>. First time I see this and don’t know if this markup is valid… I always use <div style=”clear: both;”></div>

Thanks! that must have been the one place I didn’t try clearing.

On another note, I also just noticed that the navbar appears to be left aligned in IE, but not in Chrome. Is there something I can change in the css to make it look left-align in all browsers?

Thanks so much!

Yep it’s a very known difference of interpretation in the “box” model between IE on one hand, and all other modern browsers on the other hand (recognized as more w3c compliant, unlike IE…). IE considers padding and border to be part of the width so you can’t really use padding and/or border along with width/height -> https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Quick Fix in your case :

#topnav ul {
    padding: 0;
}

Going further : https://meyerweb.com/eric/tools/css/reset/ or inspect the beginning of the main twenty-ten theme css file.
If one day you wonder how to do the opposite (indent on all browsers), try text-indent or margin instead of padding.

Thanks again! I’m not sure I quite get it – my doctype is xhtml 1.0 transitional and it seems like from reading that wikipedia entry that if I have a proper doctype then IE9 (which I’m using) should look the same as Chrome or Firefox and not go into quirks mode. So I’m not sure why they didn’t look the same (ie shouldn’t it have looked centered in IE like it did in Chrome?)

Oh well, problem solved! Will have to remember to use padding from now on.

Thanks for all the help!

That’s because every browser, by default, dedicate some space for the list’s bullets or numbers.
For IE -> it’s a margin-left : 40px;
For others -> it’s a padding-left : 40px;

But your theme has a css rule

#topnav ul{
	margin: 0px auto;
}

so you did reset the horizontal margin, but not the padding. And when you modify only one of these and not the other, you end up with this whole mess you met today, even without noticing it ^^

So IE said : there’s no margin-left on this ul, so let’s align it at 0 on the left (because the padding is part of the box so I ignore it in the box placement process)
The others said : there’s no margin, but there’s a padding-left, which I consider outside of the box, so let’s indent it from the left.

Dunno if it makes more sense…

Sorry I made a mistake (should not answer so late in the night :P).
What I explained before about the box model is still true, though.

In fact in margin: 0 auto; the first part is TOP & BOTTOM and the second part is for LEFT & RIGHT (auto will center the element with his parent if his display is of type block and his width is smaller than his parent element). So it doesn’t apply to your <ul> because is display is inline, ha-ha.

Therefore in your case auto is useless, a margin: 0; is enough.