1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

a:visited, a:hover, a:active styles not working in Firefox or Netscape

Discussion in 'CSS' started by artjewl, Nov 3, 2005.

0
  1. #1
    me again.

    Ok, so it appears to work in IE, but in FF and Netscape my a:visited, a:hover, and a:active styles aren't showing. They work fine in IE, but I can't seem to find the glitch in my code that is keeping FF from recognizing the css for those styles. You can see the page at:

    http://www.artjewl.com/jms/temp2.html

    I'm wondering if it has something to do with the nested divs or the z-index (which I've let get out of control, I know)...

    Thanks for taking a look for this newbie...
     
    artjewl, Nov 3, 2005 IP
  2. artjewl

    artjewl Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Note the link in question is the "Joie Lassiter Gallery" text that appears red in the right-center of the page...
     
    artjewl, Nov 3, 2005 IP
  3. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Check sizes of your elements and their order - most likely another element (like a transparent z-positioned div) covers the link and hides it from the mouse pointer.

    J.D.
     
    J.D., Nov 5, 2005 IP
  4. artjewl

    artjewl Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    That's what I was thinking, but if that were the case, I should be able to set the overlapped div to be the highest z-index and have the problem fixed, right? Just to try to debug it, I tried that, still without luck... I might need to put the pieces back into the puzzle one at a time again. :confused:
     
    artjewl, Nov 5, 2005 IP
  5. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Here's how you fix it - set z-index to, say, 100 for #content:

    #content {... ;z-index:100; ...}

    You also may need to increase height for #container - 100% of a zero is a zero :)

    J.D.
     
    J.D., Nov 5, 2005 IP
  6. artjewl

    artjewl Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks, JD...

    I thought that my having it set to 100% height meant it would expand to the full height of the window...was I confusing it with "auto" again? If I change the height from 100% my container doesn't hold everything an is only as tall as the padding or something (20px or so)...

    As for the z-index, I had been trying to adjust it on the specific div that the link was in rather than its parent. Do you have any idea why it wouldn't have worked with the child? (it did, by the way, fix it by adjusting #content)
     
    artjewl, Nov 5, 2005 IP
  7. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Different browsers interpret the height of the body element differently. For example, save this HTML and open it in FF - you will see that height 100% doesn't do much for the blue div:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>height test</title>
<style type="text/css">
body {height: 100%; margin: 0; padding: 0; background-color: #FEE; border: 1px solid red;}
div {border: 1px solid blue; margin: 0 20%; background-color: #EEF; height: 100%;}
</style>
</head>
<body>
<div>0123456789</div>
</body>
</html>
    HTML:
    J.D.
     
    J.D., Nov 5, 2005 IP
  8. artjewl

    artjewl Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I understand what you're saying, but I guess my question is "what's the answer?" Just, in general, is there a "safe" and (relatively) reliable method to get centered content with css?


    I got my page acting mostly how I want it: The content is centered, and all of it shows, but now the container div is huge for some reason, so there's a lot of extra whitespace at the bottom. Would that be because of the negative vertical placement of the (relatively placed, right-floating) content section?

    I really appreciate your help! I'm just trying to piece together all of the tidbits I'm stumbling over so that it will all make better sense for next time...
     
    artjewl, Nov 6, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Horizontally, yes. See this thread for more details: 7061. Vertically, not really. At least, not without balancing between various browsers. For example, my example above will be assigned height that covers the entire screen if you remove the DOCTYPE. If you want to keep the DOCTYPE declaration, you need to give the <html> element height of 100% (e.g. <html style="height: 100%">). Even then, setting height explicitly, may result in divs' contents overflow the box, etc. You get the idea.

    In practice, when you can control heights of your headers and footers, it is doable with relative or absolute positioning. Here's one quick example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>height</title>
<style type="text/css">
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
div.header, div.footer, div.content-frame {margin: 0 20%;}
div.header {position: relative; border: 1px solid red; height: 50px; background-color: #FEE; z-index: 10;}
div.content-frame {position: relative; top: -54px; border: 1px solid blue; background-color: #EEF; height: 100%;}
div.content {margin-top: 54px;}
div.footer {position: relative; top: -106px; border: 1px solid green; background-color: #EFE; height: 50px;}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content-frame"><div class="content">content</div></div>
<div class="footer">footer</div>
</body>
</html>
    HTML:
    As you can see, it requires careful juggling of widths and heights. In many cases using a table for layout and giving it reasonable height is a simple and effective alternative (tables will always grow - their height is more like min-height).

    I haven't looked at your HTML much, but using relative positioning will usually do this. You can see it in my example - there's some empty space at the bottom which is supposed to be occupied by the content and the footer, but because they are relatively positioned and shifted up, this space is just there for no reason.

    J.D.
     
    J.D., Nov 6, 2005 IP
  10. Shodan5

    Shodan5 Guest

    Messages:
    53
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Once again firefox causes issues!
     
    Shodan5, Dec 5, 2005 IP