SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    Queensland, Australia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox (Mozilla) - Weird link problem

    Hi Guys,

    I am going to have a little difficulties explaining this.

    First off this is the code

    <div id="main_offer">
    <span class="main_left">
    <a href="3">
    <h1>Charter High Speed Internet</h1>
    <img src="images/high_speed_internet.gif" width="120" height="60"><br>
    Sign up today and get Charter High-Speed Internet for $25.99 a month through February 2005! Charter High-Speed Internet for $25.99 a month through February 2005* Over 70% off a Cable Modem* Free Installation* Over 100 times faster than dial-up<br>
    <h2>Get Paid $12.00</h2>
    </a>
    </span>
    </div>

    The aim is to have the whole div to be an active link and it has been styled with a border.
    The main_left span controls the link behaviour.

    Here is the CSS

    #main_offer{
    margin-right: 5px;
    margin-left: 5px;
    float: left;
    border: 1px solid #42A4D1;
    width: 178px;}

    #main_offer h1 {font-size: 14px; color: #035173; margin:0px; padding-bottom: 2px; border-bottom: 1px solid #42A4D1;}
    #main_offer h2 {font-size: 12px; color: #035173; padding: 3px; border: 1px solid #035173; margin: 10px 0px 0px 0px;}
    #main_offer img {border: none; margin: 10px;}

    .main_left a,.main_left a:link,.main_left a:visited {
    display: block;
    padding: 5px;
    height: 270px;
    background: #FFFFFF;
    color: black;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    }

    .main_left a:hover{
    background: #E7F7FE;
    }


    OK - So here is the quirk....

    The page that displays this code is dynamically created and it will show 3 in a column and then a few rows of these.

    Sometimes what will happen is that one of these boxes will go out of whack.

    And each "row" within the box will become bordered and stretched out as though each element is it's own link. But the code is the same as all the others!!

    If you click refresh it fixes itself.

    I have put together a screen shot to show you what is happening.



    You will see that the second row of boxes is just fine. It's all the same code and structure.

    Have you seen this before? Is my code quirky or is firefox quirky? Anyone have any ideas?

    Any help will be very much appreciated. This has been bugging me for a long time.

    Thanks

    Zoe
    Zoe

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is invalid HTML. You cannot have block-level elements like H1 and H2 inside an A element. And with invalid markup, all bets are off when it comes to rendering.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    Queensland, Australia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you heaps. I worked out another solution not using the H1 tags and it is working great now.
    Zoe


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •