Image Rollover bumping text

Discussion in 'CSS' started by Keftenk, Aug 20, 2008.

  1. #1
    I'm clearly doing something wrong, but I can't find a fix for it.
    So, I've come here for some insight and guidance, if anyone knows of a fix, please help me out, thanks.

    Overview:
    The white arrows are to turn to yellow when you roll over the text it is aligned with. The text will also 'rollover' to a yellow, but the problem is the arrow dislodging everything. Maybe it's something with my other nav code, maybe not.

    http://notedls.com/notedls4.0/index.php
     
    Keftenk, Aug 20, 2008 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The navigation bar seems fine in both Firefox 3 and Internet Explorer 6. Did you fix the problem?
     
    steelfrog, Aug 21, 2008 IP
  3. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You are using PNGs, which aren't compatible in IE. Make the arrows GIFs for starters. Also, the arrow is not turning any color right now. Make sure the image is the same size as the current one.
     
    LeetPCUser, Aug 21, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    What am I even looking at? It seems like the entire layout is busted here - though that could be a conflict of the absurdly undersized fonts... There are no hover states I can see, and the 'arrows' are indeed running under the text.

    What I can see is 169 validation errors, so what you have is not HTML, it's gibberish. You have lists consisting of sentence fragments inside paragraphs - are those paragraphs? No, they are not. So why are you marking them up as paragraphs? You have elements that appear to be section headings, without heading tags and again in paragraphs... There are more unclosed DIV than I care to count - a little proper indentation would probably show you that more clearly, and frankly you seem to have gone div happy with way more containers than are needed for such a simple layout.

    Also not sure what that big blank area in the middle is supposed to be, but being it appears to be a scripted content rotator that would seem to be made of /FAIL/ from an accessability standpoint.
     
    deathshadow, Aug 21, 2008 IP