CSS seems to be adding extra hyperlinks into my code?

Discussion in 'CSS' started by cocoMonkey, May 12, 2007.

  1. #1
    Alright guys,

    Im having a problem with some code. It works perfect in IE7 (not tried in 6), and it actually almost works perfect in Firefox, except for the odd strange one.

    Its a new site im making, and there are 100's of the same DIV on page, they all look right, except every so often in firefox one goes wrong.

    The code is somthing like this:

    <div id="box">
    <a href="link">
    <div id="name">name</div>
    <div id="age">age</div>
    <div id="location">location</div>
    </a>
    </div>

    Now like i say, this works fine most of the time, but every so often, every div in the hyperlink code gets its own hyperlink attached to it.

    When you view the code, it still looks good. but when you download it to view offline, you can basicly see whats going wrong.

    The code appears somthing like this:

    <div id="box">
    <a href="link"><div id="name">name</div></a>
    <a href="link"><<div id="age">age</div></a>
    <a href="link"><<div id="location">location</div></a>
    </div>

    It adds a hyperlink to each, instead of just the surrounding div. -- but only once every 30 "boxes"

    Any ideas what this could be???

    Many thanks for any help.

    Cheers.
     
    cocoMonkey, May 12, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You cannot have DIVs inside anchors (<a> elements) since DIVs are block-level elements while anchors are inline.

    If you really need to create a list of links, then use a list and then style it with CSS, like so:
    
    <ul id="menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    
    Code (markup):
    And of course, style to taste.
     
    Dan Schulz, May 13, 2007 IP
  3. cocoMonkey

    cocoMonkey Active Member

    Messages:
    305
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #3
    What i put works 99% of the time, on both IE and Firefox.

    It is just every so often 1 of the boxes goes wrong. only on firefox. I cannot work it out.

    The code looks exactly the same.

    Would someone take a look at my code for me maybe?

    It is really "bad" code, but it just does my head in that it almost works except for 1 or 2 every so often.

    Cheers.
     
    cocoMonkey, May 13, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Why would you expect consistent results from invalid code, for which there is no defined behavior. It is insane to think you can effectively debug invalid markup. Make your markup valid, and it will be worth looking at.

    See Why We Won't Help You. It's just as true today as it was four years ago. Moreso with the advancement of standards compliant browsers.

    cheers,

    gary
     
    kk5st, May 13, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    When you say only on Firefox, do you mean you check just IE and Firefox? What about Opera, Konqueror and Safari?
     
    Dan Schulz, May 13, 2007 IP
  6. asfi

    asfi Peon

    Messages:
    110
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    make <div> inside <a>.........cheers
     
    asfi, May 14, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Having a block-level element inside an inline element (as you proposed, asfi) is not valid HTML (or XHTML). The code will invalidate, and can cause more problems than it would pretend to "solve".
     
    Dan Schulz, May 14, 2007 IP