IE and CSS

Discussion in 'Web Design and Development (archive)' started by idkew, Dec 26, 2003.

  1. macrumors 68020

    idkew

    Joined:
    Sep 26, 2001
    Location:
    where the concrete to dirt ratio is better
    #1
    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.
    Thanks,
    Ben

    also- any suggestions on the site are welcomed.
     
  2. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #2
    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
     
  3. thread starter macrumors 68020

    idkew

    Joined:
    Sep 26, 2001
    Location:
    where the concrete to dirt ratio is better
    #3
    yeah- it seems no one can explain it....

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

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

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #4
    I'm putting my vote in for Mozilla Firebird. It's fast, it's lightweight, and it renders almost everything correctly.
     
  5. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #5
    Have you tried explicitly stating the border style? Try something like this and clear the border code out of the HTML.

    Code:
    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. :)
     
  6. thread starter macrumors 68020

    idkew

    Joined:
    Sep 26, 2001
    Location:
    where the concrete to dirt ratio is better
    #6
    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.
     
  7. thread starter macrumors 68020

    idkew

    Joined:
    Sep 26, 2001
    Location:
    where the concrete to dirt ratio is better
    #7
    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.
     
  8. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #8
    didn't come out "illegal" for me, though i did specify it as
    Code:
    a:link img {
           border: 1px solid #99CCFF;
            }
     
  9. thread starter macrumors 68020

    idkew

    Joined:
    Sep 26, 2001
    Location:
    where the concrete to dirt ratio is better
    #9
    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.
     
  10. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #10
    try changing this:
    Code:
    img {
    border : 6px none inherit;
    color : #ffffff;
    }
    to this:
    Code:
    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.
     
  11. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #11
    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.
     
  12. thread starter macrumors 68020

    idkew

    Joined:
    Sep 26, 2001
    Location:
    where the concrete to dirt ratio is better
    #12
    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.
     

Share This Page