3 replies [Last post]
TFSerwin
TFSerwin's picture
Offline
newbie
Phoenix, AZ
Last seen: 4 years 10 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2010-05-15
Posts: 2
Points: 3

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;
}

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 13 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

http://validator.w3.org/check

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

TFSerwin
TFSerwin's picture
Offline
newbie
Phoenix, AZ
Last seen: 4 years 10 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2010-05-15
Posts: 2
Points: 3

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 6 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

TFSerwin wrote: I used the

TFSerwin wrote:

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.