IE is my arch Enemy

[mRko81]

Hey here my issue as it always seems to be. I have valid HTML and CSS but like always IE does not like it.

<div id="buttonBox">
	<div class="button" id="realestate_button">
		<a href="#"><span>TrademarkProperties.com</span></a>
	</div>
	<div class="button" id="tv_button">
		<a href="#"><span>Trademark-TVshow.com</span></a>
	</div>
	<div class="button" id="ecom_button">
		<a href="#"><span>Trademark-Merchandise.com</span></a>
	</div>
	<div class="button" id="areapartner_button">
		<a href="#"><span>Trademark-AreaPartners.com</span></a>
	</div>
</div><!-- /buttonBox -->

CSS

#buttonBox {
	width: 235px;
	height: 242px;
	margin: 5px 0 0 5px;
	padding: 0;
	background: transparent;
	float: left;
	}
#buttonBox div {
	margin: 0;
	padding: 0;
	}
.button {
	display: block;
	width: 115px;
	height: 116px;
	float: left;
	}
.button a {
	display: block;
	width: 105px;
	height: 106px;
	text-decoration: none;
	}
.button a span {
	display: block;
	width: 105px;
	height: 106px;
	visibility:hidden;
	}


/* ---------- natural states ---------- */

#realestate_button {
	background: transparent url(../img/4buttonNav/realestateBG.gif) top left no-repeat;
	}
#tv_button {
	background: transparent url(../img/4buttonNav/tvBG.gif) top left no-repeat;
	}
#ecom_button {
	background: transparent url(../img/4buttonNav/ecomBG.gif) top left no-repeat;
	}
#areapartner_button {
	background: transparent url(../img/4buttonNav/areapartnersBG.gif) top left no-repeat;
	}


/* ---------- hover states ---------- */

#realestate_button:hover {
	background: transparent url(../img/4buttonNav/realestateBG.gif) bottom left no-repeat;
	}
#tv_button:hover {
	background: transparent url(../img/4buttonNav/tvBG.gif) bottom left no-repeat;
	}
#ecom_button:hover {
	background: transparent url(../img/4buttonNav/ecomBG.gif) bottom left no-repeat;
	}
#areapartner_button:hover {
	background: transparent url(../img/4buttonNav/areapartnersBG.gif) bottom left no-repeat;
	}

I appreciate a second pair of eyes to get this guy to play along.

 

[mRko81]

ohyeah and here is a link to see it in action.

http://81art.com/projects/kramedart/realestate/4buttons.html

 

[vacunita]

Another victim of IE's box modeling. And IE6's incompatibility with the hover pseudo class on anything but links.

In short IE only supports hover for the "a" link class.
a:hover.

For the wrapping problem try setting padding and margin for every DIV to 0px. so everything has the same dimensions to start. Then research IE's box model for some insight.

Start here:

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[mRko81]

the hover class im ok with but it is the positioning that i am stressing over. Having gone through and set the margin/padding to 0px this helped but i fugured out what was throwing the wrapping off. i was using a version if image replacement for the buttons so that a screen reader could read what the buttons were for. so i set the font-size and line height to 1px and now every body is sitting in place.

thanks V!

 

[vacunita]

Welcome, Glad I could be of assistance.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

You will be glad to know that in IE7 (a critical update for IE6), your page works as good as it does in FF. In IE6 and IE5 at the moment it looks ok without the hover effect. You can try adding a proprietary stylesheet for IE pre 7 and do an expression for the hover effect.