Good evening,
Was wondering if someone could take a look at the following page for a troublesome compatibility error between IE and Firefox. Page exists in a Wordpress environment, but I'm pretty sure this is a straight CSS question.
The page in question is http://afscme2960.org/officers
My CSS concerns are surrounding a series of rules that create the image thumbnail pictures (for the president, treasurer, secretary etc.)
The image looks fine in Firefox - my default browser. Also looks fine if I throw IE into compatibility mode. (Not exactly sure what this is.) In IE8, however, the background image gal-bottom.gif repeats across the top and bottom of the DIV. I can change the location of where it overlaps by altering the padding setting of the rule that calls the image.
Was wondering how to eliminate the overlap to begin with... or if there is a better way to create the same effect?
Thanks,
Steve Ryan
CSS Code in question:
div.officer { width:130px; min-width: 130px; float:left; margin: 0px 10px 10px 0px; background: url(images/gal-top.gif) no-repeat 0 0; } div.officer img { margin: 12px 0 10px 12px; border: 1px solid #000; background: none; } div.officer p { font-size: 8pt; font-family: arial; margin: 0px; padding: 0px 5px 20px 12px; background: url(images/gal-bottom.gif); background-position: 0 100%; background-repeat: no-repeat; } div.officer_clear { clear:left; padding: 10px 0 0; }
http://validator.w3.org/check
Copy - I used the CSS
Copy - I used the CSS validator and didn't find an error before I posted the question. (At least in the CSS code I was concerned about.)
But the tag not closed thing could account for a bunch. I'll check it out when I get home.
Thanks,
Steve Ryan
TFSerwin wrote: I used the
I used the CSS validator and didn't find an error before I posted the question.
He wasn't talking about your CSS being invalid, he was talking about your HTML! Invalid CSS is far less of a problem than invalid HTML.
In fact the CSS rules just DO NOT APPLY to invalid html. For invalid html there is no CSS standard. That is why our posting guidelines ask specifically for you to validate your html before you post a question. Have you read them? If not, why not. If not, stop everything and read them before you reply. If you did read them, read them again and try following them.