Forum Moderators: open
This is what I have:
<a href="page2.html">
<div class="box">
</div>
</a>
It works fine in FF2 and Opera8 but not surprisingly, IE doesn't do it. Is there any other way to do this in IE? I don't want to have to make a One-color-box image.
Thanks
<div class="box">
<a href="page2.html">
</a>
</div>and now your CSS - we want to make the <a> take up the entire of the inside of the <div>, so:
.box a {
display: block;
height: 100%;
width: 100%;
}Technically here we don’t need the width as display:block elements automatically are as wide as their container, but it’ll force IE into ‘hasLayout’ mode which might fix any weirdness you’d see.
Actually I just gave my <a> tags the class name that I had given my <div> tags and it works perfectly. Is this something incorrect to do though?
That should be fine, so long as the <div> is not within the <a> tag. Your <a> tag should ultimately be contained within some block-level element if you are using a Strict DOCTYPE.
I do have something like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div class="wrapper">
<div class="content">
<p> blah blah blah </p>
</div>
<a class="box" href="page.html"><a>
</div>
and my CSS
.wrapper {
display: block;
width: 765px;
height:500px;
position:absolute;
}
.box {
display:block;
position:absolute;
width:125px;
height:125px;
}
Does my "wrapper" work as the block-level element that you were talking about?. And why is it that my <a> has to be contained within a block-level element?
Thanks!
display:block;in your CSS) and contains your anchor (<A> - an inline element).
And why is it that my <a> has to be contained within a block-level element?
Well, under a Transitional DOCTYPE I don't think it does. However, under a Strict DOCTYPE, inline elements (<a>, <img> etc.) cannot appear directly within the <body> tag, they have to be contained within another block-level element... that is all.
