IE and CSS

[idkew]

Hey all,

I have a little photo site that I have designed at benjaminnau.com and of coarse, IE is ignoring patts of my CSS. (Window's IE) Didn't find an explanation in other threads, nor in O'Reilly's books.

I tell the borwser to color links white always, unless it is a:hover (which i want grey). IE does follow this for text links, but for the 8pt border around all my photos (which are all links), it ignores this color and uses the default blue and purple colors. Needless to say, it is annoying. Works fine in Safari.

I am new to CSS, so please take a look at mine below and tell me what I (or IE) is doing wrong.

h1 { font-family: Helvetica,sans-serif; font-size: 28; color: #ffffff;text-align:center; }
h2 { font-family: Helvetica,sans-serif; font-size: 18; color: #ffffff;text-align:center; }
h3 { font-family: Helvetica,sans-serif; font-size: 8; color: #ffffff;text-align:center; }
td { font-family: Helvetica,sans-serif; font-size: 14; color: #ffffff; }
a:link { font-family: Helvetica,sans-serif; font-size: -4; color: #ffffff; text-decoration: none;}
a:active { font-family: Helvetica,sans-serif; font-size: -4; color: #977578; text-decoration: none;}
a:visited { font-family: Helvetica,sans-serif; font-size: -4; color: #ffffff; text-decoration: none;}
a:hover { font-family: Helvetica,sans-serif; font-size: -4; color: #6E6F71; text-decoration: none;}
body { background-color: #041938; font-family: Helvetica,sans-serif; font-size: 12; color: #ffffff; text-align:center;}

Thanks,
Ben

also- any suggestions on the site are welcomed.

 

[mnkeybsness]

That's really interesting. I just checked my site and Internet Explorer for XP treats it the same way, giving images the default color borders.

I hadn't seen this before you pointed it out.

Of note, Internet Explorer 6 (or below), Windows is the only browser that this seems to happen with. Oh how I loathe IE

 

[idkew]

yeah- it seems no one can explain it....

anyway- until this situation is fixed, i added this text to my disclaimer:

User agrees that Internet Explorer for Windows is a horrible browser, completely ignoring my Cascading Style Sheet and causing my site to look bad. If you are unfortnate enough to be on a Windows machine, and even more unfortunate to be using Internet Explorer to surf the web, please download a different, and better browser. Opera and Mozilla are great alternatives to big brother's horribly coded browser.

I think it explains my situation well. I can't stand imperfection such as this with my name on the site.

 

[mnkeybsness]

I'm putting my vote in for Mozilla Firebird. It's fast, it's lightweight, and it renders almost everything correctly.

 

[Rower_CPU]

Have you tried explicitly stating the border style? Try something like this and clear the border code out of the HTML.

a:link img {
   border: 8px white;
}

Also, you'll want to move your a:active style below the rest of the a: styles to be sure that it doesn't get overrided by the visited and hover styles. Link styles should always go - link, visited, hover, active (LVHA).

You need a unit of measure on all your font-size declarations, too.

Remember to validate your HTML and CSS.

 

[idkew]

thanks rower.

changed a bunch in my html. got rid of font tags in the individual documents... doing a bunch of trimming of unneeded code. we'll see what happens.

unfortunately, the suggestion above is illegal according to the css checker.

 

[idkew]

she's a cleaner and leaner site now.

i do have another question, and the answer to this could solve all my problems.

since the attribute border is depreciated, i do not want to use it. Mozilla does not ever render a border, even though I have all linked images with a border in my css and each picture has a border attribute also.

so- does anyone know a way to add a 6pixel or so border around every image on my site, without editing any images? they are of differeing sizes, so that must be kept in mind. could be a java script... but i need it to be white with no action, grey with the mouse over it, and a greyish red when clicked on.

thanks for your help.

 

[mnkeybsness]

Originally posted by idkew
unfortunately, the suggestion above is illegal according to the css checker.

didn't come out "illegal" for me, though i did specify it as

a:link img {
       border: 1px solid #99CCFF;
        }

 

[idkew]

Originally posted by mnkeybsness
didn't come out "illegal" for me, though i did specify it as

a:link img {
       border: 1px solid #99CCFF;
        }

errors for that in validation.

not sure what the problem is.... but now ie, opera and mozilla don't even render a border on the images, even though there is a border attribute in each img tag.

 

[mnkeybsness]

try changing this:

img {
border : 6px none inherit;
color : #ffffff;
}

to this:

img {
border : 6px solid inherit;
color : #ffffff;
}

the 'none' tells it to not put a border around the image at all. maybe try a little reading on CSS borders

also of note, feel free to look at my valid css with the same image border problem solved.

 

[Rower_CPU]

Just to clarify something...

I'm not sure where you're hearing that the border attribute is deprecated. As far as I've seen it's fine inline in the HTML and within style sheets, the latter being the preferred method.

Also, in the above CSS, I'm not sure why it's necessary to specify the border color via 'inherit' when it's immediately being overrided by the white hex value.

 

[idkew]

Originally posted by mnkeybsness
try changing this:

img {
border : 6px none inherit;
color : #ffffff;
}

to this:

img {
border : 6px solid inherit;
color : #ffffff;
}

the 'none' tells it to not put a border around the image at all. maybe try a little reading on CSS borders

also of note, feel free to look at my valid css with the same image border problem solved.

yeah- thanks. i just used the "suggested" css by the validator, and it suggested no border. once i figuredit out, it seems to be working correctly...

now i am going to do a bit more trimming, and see if the css still does its thing.

thanks a lot for the help you two.