My guess is that the width values in the layout part of your css file need to be adjusted.
So, my suggestion: tryout different percentages (smaller ones), and see if that makes them appearing better in IE.
Second: your side bar has this:
padding-left: 0;
padding-left: 3%;
If I’m not mistaken I believe IE takes the 0 and the other ones that last value given, 3%.
This is your CSS #content {
float: left;
text-align: left;
background-color: #ffffff;
background-image: url(images/bg.gif);
padding: 3% 3% 3% 3%;
border-top: 1px solid #C5C5C5;
border-left: 1px solid #C5C5C5;
border-right: 1px solid #C5C5C5;
}
This is incorrect. Firstly a floated element must have its width defined . Failure in that regard will tank your validation and more importantly cause structural instability. Having inserted the width the next problem is the padding. This is a good coding tip rather than a rule; but to head off the known idiosyncracies in IE once a width is defined it is best not to add padding. If you need padding put a margin on the next item in. Finally the border. It may be OK but on a pixel perfect layout you need to add 2 px to the width or it will bork in IE. If you choose to disregard all this then you are going to be in for fancy CSS hacks and hoodickies.
Thread Starter
mlyman
(@mlyman)
Thanks guys. Dissursion you were right on with pointing me to that side bar, and root, your suggestions really helped as well. I removed some of the padding, made sure floated elements had widths designated and that seemed to do the trick. Thanks again for the help, I really appreciate both of you taking the time to assist me!
Mlyman-
Could you post the code with the changes for us newbies? I am old-school and just learning CSS and PHP for that matter.
I am running the Dark Maple theme Moshu developed and it’s got the same probs. . .not complaining, just learning.
I’m at http://blogger.longtorsolabs.com
Thanks!
Er….that’s the Dark Maple theme Root developed and Moshu mod’ed. 😉
Sorry Root!
Dont worry. Moshu did a very fine job. I have read the CSS with a fine tooth comb but I can not see the font trouble. For the whole document it is set in the body (in the CSS). You could change font size to 76%, and everything else do in em eg 1.0em;. But I do wonder if there is an unclosed tag somewhere.
Excellent! Thanks Root – you’re right, as usual, it wasn’t the template at all.
I used the XHTML Validator and found some jacked up comment tags. Three to be precise – that threw the whole page out of whack.
Who knew? Obviously, not I. Now I only have 133 errors to clean up! I’ll be reading the Codec before I bug you kindly folks again.
