#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    18
    Rep Power
    0

    Problem using <a> tag as block in div


    I'm trying to do a similar thing that is done with unordered list items in navigation bars to change colors/background images on hover by making the <li><a>'s display as block elements, rather than line elements.

    Basically, I have a containing div (200 x 100). Then, I had the <a> set with a class with the display property set to block. I have a width of 200px and height of 100px set. Then I have two floated left, clear:left divs, so that they stack on top of each other. I had set a z-index on those higher than the z-index of the containing div, and the z-index of the blocked <a> tag.

    I fire fox, it worked fine. but in IE, the blocked <a> lined up under the two floated divs. I thought I could change the width of the blocked <a> and float it right, and that would fix it. It did fix it in IE, but in FF, the blocked <a> now gets placed half way up, like it gets past the bottom floated left div, but won't get past the top floated left div. I've posted example code so you can see what I'm doing.

    Thanks for your time and consideration.

    Code:
    <html> <head> <style type="text/css"> .makelink { display: block;  width:137px;  height:100px;  z-index:50; text-align:center;  float:right;  clear:right;  margin:0;  background-color:#bbeecc; } .check { width:53px;  height:50px;  z-index:100;  float:left;  clear:left;  background-color:#cccccc; } #div1{  width:190px;  height:100px;  margin:20px;  float:left;  background-color:#0000cc;  z-index:10; } </style> </head> <body> <div id="div1">    <div class="check">&nbsp;</div>    <div class="check"></div>    <a class="makelink" href="#">some info</a> </div>  </body> </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    18
    Rep Power
    0
    I've found that placing the blocked <a> tag first in the containing div, then placing the floated divs after it fixes the problem. I have no clue what it will do in other browsers. If someone has a better way of doing this, I sure would like to know.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome back.

    Next time please don't put your code in the prompt box, as that removes the formatting. Instead paste the code in the textarea and then select it before clicking the code button.

    in FF, the blocked <a> now gets placed half way up, like it gets past the bottom floated left div, but won't get past the top floated left div. I've posted example code so you can see what I'm doing.
    That's because the the second left float is clearing the bottom of the first. That makes following floated elements also clear it.

    I had set a z-index on those higher than the z-index of the containing div, and the z-index of the blocked <a> tag.
    z-index controls how "positioned" elements overlap; it only applies to "positioned" elements. Your elements don't seem to have the "position" property set.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo