Hi,
Iv got a couple of sitepoint books so i thought i would post my question here, it’s been annoying me for hours now…
im trying to get a few div’s to have a hover state, it worked fine in firefox but as usuall IE is the problem,
simply,
a:hover {
text-decoration: none;
border:none;
background-color:#fff;
opacity:0.6;
}
and
<a href="#"><div id="box5"></div><div id="box5-1"></div></a>
any help appriciated (:
Steven
Hi and welcome to Sitepoint 
Seems your structure isn’t quite correct: you have block level (div) nested inside inline (a tag). You might rethink that structure 
If you still have problems, post the full html and css code or a link to a live page (because you’re new, you wont be allowed yet to post the link in it’s normal way, so just replace the dots in the adress with the word ‘dot’. We’ll do the rest )
Im not sure the best way to achive what i am after so here is my pages so you get the idea…
www dot stiofan dot com/testfolder/
It’s a building plan, look at it in firefox, that’s how i need it to look,
advice on how best to get that would be amazing 
Well, Firefox is being kind to you with your errors. The HTML5 people did decide to change the rules and let anchors wrap divs… so if you wanted to research HTML5 and switch to that then possibly all the browsers would be cool with that, I dunno.
However, remaining in the real world of HTML4, you would have to do one of two things (because I’m pretty sure your problem with IE8 is IE is actually calling you out on your error… removing the error should make it work):
You can either change all those divs to some legal inline element (spans are fine for this) and if they need block nature, with css you can set the to display: block;
Or, you can have divs on the outside and anchors on the inside and those anchors themselves set to display: block (so they can have a set height and width).
I’m leaning towards #1 because that preserves most of what you already have. Remember that this means your p’s also have to change to something inline.
Blocks are like buckets. Inlines are like water. Buckets can hold water, and other buckets, but water can’t hold a bucket.
Except in HTML5. Bleh.
Here you go: you have some validation errors, mainly because you nested block elements into an inline element, like i already told you. IE6 and Opera choked on that 
I didn’t take a close look at your css or didn’t alter much to your structure. Like poes said, there are some ways to go round but i took the easy way out (being the lazy bum i am lol) and cleaned up your nesting structure. I also removed the extra closing body tag. See if this works for you (only tested locally in Opera and IE6):
<div id="body">
<div id="menuwrap" >
<div id="box1">
<p> </p>
<p><a href="#" title="Vacant B3/1/A <br> open mos">Vacant B3/1/A 1710sq ft</a></p>
</div>
<div id="box1-2"></div>
<div id="box1-3"></div>
<div id="box2"><br />
<br />
<br />
<a href="#">Vacant B3/1/B</a> </div>
<div id="box3-1"><a href="#">STTC Test Laboratory<br />
B3/1/C</a></div>
<div id="box3"></div>
<a href="#"></a>
<div id="box4"></div>
<a href="#"></a>
<div id="box5"></div>
<div id="box5-1"></div>
<a href="#"></a>
<div id="box6"></div>
<div id="box6-1"></div>
<a href="#"></a>
<div id="box7"></div>
<a href="#"></a>
<div id="box8"></div>
<a href="#"></a>
<div id="box9"></div>
<a href="#"></a>
<div id="box10"></div>
<a href="#"></a>
<div id="box11"></div>
<a href="#"></a>
<div id="box12"><a href="#">Stairs </a></div>
<div id="box13"></div>
<a href="#"></a>
<div id="box14"></div>
<a href="#"></a>
<div id="box15"></div>
<a href="#"></a>
<div id="box16"></div>
<a href="#"></a>
<div id="box17"></div>
<div id="box18"></div>
<div id="box19"></div>
<div id="box20"></div>
<div id="box21"></div>
<div id="box22"></div>
<div id="box23"></div>
<div id="box24"></div>
<div id="box25"></div>
<div id="box26"></div>
<div id="box27"></div>
<div id="box28"></div>
<div id="box29"></div>
<div id="box30"></div>
<div id="box31"></div>
<div id="box32"></div>
<div id="box33"></div>
<div id="box34"></div>
<div id="box35"></div>
<div id="box36"></div>
<div id="box38"></div>
<div id="box37"></div>
<div id="box39"></div>
<div id="box40"></div>
<div id="box41"></div>
<div id="box42"></div>
<div id="box43"></div>
<div id="box44"></div>
<div id="box45"></div>
<div id="box46"></div>
<div id="box47"></div>
<div id="box48"></div>
<div id="box49"></div>
<div id="box50"></div>
</div>
</div>
<div>
<p>c</p>
<p>c</p>
<p>c</p>
<p>c</p>
</div>
Something not clear, problems… just come back to us 
You can fake this by overlaying an absolute anchor
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YuriKolovsky - overlay layers in IE6</title>
<style type="text/css">
/*this is organised for you*/
/*Predefined Vars*/
* {
margin:0;
padding:0;
}
.hoverb {
position:relative;
margin-top:1.25em;
margin-left:1.25em;
}
/*Predefined Vars*/
/*width / height*/
.hoverb div, a, a:hover span {
border-style:solid;
border-width:4px;
}
.hoverb div, a, a span {
width:12em;
height:100px;
}
a {
display:block;
margin-top:-108px;
text-decoration:none;
}
h2, p {
width:12em;
margin:4px;
}
/*width / height*/
/*overlay trickery*/
a span {
display:block;
position:absolute;
z-index:10;
top:0px;
left:0px;
background-image:url(fake.gif);
cursor:pointer;
}
h2, p {
position:absolute;
left:0;
z-index:2;
}
/*overlay trickery*/
/*Colors*/
.hoverb div {
background-color:#999;
}
a {
border-color:#555;
}
a:hover {
background-color:#e3e3e3;
}
a:hover span {
border-color:#000;
}
/*Colors*/
/*MISC*/
h2 {
margin-top:-1px;
margin-left:10px;
font-size:xx-large;
}
p {
margin-left:10px;
margin-top:8px;
top:1.7em;
font-size:large;
}
/*MISC*/
</style>
</head>
<body>
<!--having h2 and p to look like its inside a link can be usefull, as clients often want hover buttons with text, and usually use ie6...
notice how the links are clickable-->
<div class="hoverb">
<div><h2>Planes</h2><p>for air travel</p></div><!--you could probably put all this in another div and treat that div as the h2 and p, and move h2, p inside the div-->
<a href="#planes"><span> </span></a><!-- is to avoid the empty span warning in the validator-->
</div>
<div class="hoverb">
<div><h2>Trains</h2><p>for land travel</p></div>
<a href="#trains"><span> </span></a>
</div>
<div class="hoverb">
<div><h2>Automobiles</h2><p>for personal travel</p></div>
<a href="#automobiles"><span> </span></a>
</div>
</body>
</html>
OK not really sure how to get ti to work with replacing div with span and p?
look at
www dot stiofan dot com/testfolder/ and look at test3 is that what u mean?
can anyone give me a working example of test 3?
if you replace every div and p with a span, that will make it legal but as I said, they are inlines and so to make them act like the divs did, you need to make them display: block in the css. You didn’t have to say that for the divs or the ps because that’s how they come out of the box.
That way a single anchor can remain a parent for the other elements.
That’s not what im trying to do. That makes the text have a white background when hovered, but im trying to make the whole div white when hovered like it does for me in firefox,
I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?
Im still just learning css so examples are a great help.
i tryed
<a href="#"><span id="box6"></span><span id="box6-1"></span></a>
but no luck,
Do u understand what im trying to do?
Do you have my html still? Try setting the a tag as display:block and give it a height of 100%.
a {
color:#000;
text-decoration: none;
border:none;
display:block;
height:100%;
}
Was that directed at me? My code works
I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?
There is no tag in the world that will make a block inside of an inline valid :). Use the way I pointed out.
No your code works amazing but can i make it work to hightlight two or more areas as it needs to highlight a whole room when hoverd,
please look at www dot stiofan dot com/testfolder/xls-test-3.html
that works in firefox, see how it makes the whold room highlighted, is that possable with your code?
Rough around the edges but is this what you meant? Does each box need content in it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0
}
div.wrapper {
position:relative;
width:15em;
margin:20px;
}
div{height:10em;}
a {
height:10em;
background:#f2f2f2;
text-decoration:none;
overflow:hidden;
display:block;
margin-top:-3em;
}
a.two{margin:0;}
a:hover {
background:red;
}
h2, p {
padding:0 20px;
position:relative;
z-index:1;
}
span {
z-index:100;
position:absolute;
width:15em;
height:10em;
top:0;
left:0;
background: url(fake.gif);
}
span.two{z-index:99;}
div.two{width:200%;}
</style>
</head>
<body>
<div class="wrapper">
<div>
<h2>Planes</h2>
<p>for air travel</p>
<a href="#"><span></span></a>
</div>
<div class="two">
<a href="#" class="two"><span class="two"></span></a>
</div>
</div>
</body>
</html>
What you can do is this: from my example
a {
color:#000;
text-decoration: none;
border:none;
}
a:hover {
text-decoration: none;
border:none;
background-color:#fff;
opacity:0.6;
display:block;
height:100%;
}
#box2:hover{
background-color:#FFFFFF;
}
tsted in IE6 and opera and the whole div changes to white on hover. Note that i used it on the html i provided you earlier.
Thats almost it, only one box needs content.
the whole thing i am stuck on is i need both boxes to be highlighted on hover (at the same time) and they will both link to the same thing
So if i hover on the top box the top box will highlight and the bottom box will highlight aswell and the same the otherway about.
thats why i was trying to put two divs in a href because they both highlight…
Both at the same time? I don’t think that would be possible without some javascript in place :). Because if you think about it, you can’t hover over two elements at once, nor can you make that kinda shape with an element (an anchor is inline and it wrapped around the <div> in your first example to create taht shape. Other browsers won’t do that)
Javascript is probably your only way here.
i had kind of fugured that might be the case, are u any good at javascript? 
Lol no I’m not. Head over to the Javascript forum for help
Thanks for all your help m8:)
I finally got if sorted with soem javascript
<style type="text/css">
.myHighlight {
color:#fff;
background-color:#0C6;
opacity:0.5;
filter: alpha(opacity=50);
}
.myDefault {
color:#333;
background:#090;
}
</style>
<script type="text/javascript">
function changeTo(myId)
{
document.getElementById(myId).className='myHighlight';
}
function changeBack(myId)
{
document.getElementById(myId).className='myDefault';
}
</script>
and
<a href="http://www.google.co.uk"><div id="box33" class="myDefault" onMouseover="changeTo('box33'); changeTo('box34');" onMouseout="changeBack('box33'); changeBack('box34');"></div>
<div id="box34" class="myDefault" onMouseover="changeTo('box33'); changeTo('box34');" onMouseout="changeBack('box33'); changeBack('box34');"><br />
<br />
<br />
test</div></a>
i know it’s totaly not valid but it workes in ie, firefox and safari, so im happy…
Glad to hear it’s all sorted