How do I fix the widgets on the left sidebar of this custom WordPress blog? In IE 5 - 7, Popular Posts, Tags, Favorite Links, and Related Posts are way, way over to the left and cut off in at least one of the versions. It’s supposed to look like it does in FF or IE 8.
And, the whole design of the blog is messed up in IE 5. Is it still standard, accepted practice to design for IE5? I’ve heard differing opinions. Anyway, would love to know the fix if it’s not too complicated.
Thanks so much!
I always forget that!!
Thank you, thank you Ralph. That took care of it!
Right. I’ve got FB and use it. I don’t think I would have seen the problem though. I forget about setting the default margins and padding. Actually, I thought this was taken care of with this code:
body{
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
background:#70C6C5;
}
Ahhh…thank you!
Great! Make sure to use Firebug to test these elements. I’m no genius. I just hover over the element (in this case the UL) and see the big fat left padding on it. A great time-saver. 
In that case, remove the negative margin and also add
padding: 0;
There is a large left padding applying at the moment, which the browser is adding by default. Most time when styling elements you need to zero out margins and paddings to avoid being caught by the default margins and/or paddings applied by browsers.
No, that only removes margin and padding from the body element. To bulk remove margins and paddings, you need something like this:
html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea,
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
margin: 0;
padding: 0;
}
The only thing is if I don’t have a negative margin, the LIs indent way too much??
I still make sure that the page is USABLE in 5.x, but I don’t even try to make it look 100% perfect – though about 90% of my pages do anyways because of certain design decisions I make… Like:
and… uhm… Yeah. From there, if it works in 6, it should work in 5.5 and maybe 5.2. (though I don’t test for 5.2 anymore)
One simple rule that means you could even in most cases leave IE in quirks mode and the page would still work the same cross-browser… Which stands to reason since 5.x doesn’t have the doctype trigger or standards mode.
Now in your case, you are pretty well boned because wordpress’ markup is usually complete trash with too much stuff NOT generated by the theme… as evidenced by the unclosed tags and 29 validation errors.
Still, stylistically I don’t see anything on the page that would/should bar you from making it work back to IE 5.5, or that if written properly in the first place would cause such issues… but looking at the markup and CSS it would be faster to throw it all away and start over clean than to try and save anything that’s in there.
The number of people still using IE5 is tiny. Last month, my site saw 0.03% of visitors using IE5.5 or older - that’s about 1 in 3000.
If the design is usable in IE5, I would leave it at that. It really isn’t worth spending any time making it look good for the extremely rare person using such antiquated kit. If the design is so completely wrecked that it isn’t usable, and you want to make sure that people with IE5 can get to it, you’re probably best off just serving “lt IE6” with a ‘browser default’ stylesheet, or maybe a bit of styling if you want to make it look better.
Well, quite a few people still like to tinker with T-Model Fords, I hear. IE5 is long gone, and no web designer should have to worry about it. Even IE6 is in its final death throws.
I can’t vouch for all the problems here, but one thing that stands out is that you have a large negative left margin on those LIs that are hanging out to the left. That should never be necessary, so remove that for a start. Perhaps give the LIs a width to help the ancient browsers.