IE CSS Issues

[kb_bdg]

Hello folks -

I've been working on an accessible website, have used several DD nav scripts and all have worked great. The question I have is actually regarding a slight shifting of links/images when moused over in IE5-6. I realize the padding/margins double in IE and I have the 8 main icons in the center of the home page floated in two columns so narrow resolutions will push the 2nd column down. When mousing over the "Community Living" or "Assistive Technology" icon text/image links, the image and text shift up about 5 pixels. My page is valid and I've tested the site in every browser I can find and this is the only issue I have to fix before we go live.

Here's the website -
http://72.167.136.99/index.shtml

The css file is a bit big, so I didn't copy it all here but its located here -
http://72.167.136.99/css/styles.css



CODE -
Here's the XHTML code for the icons -

<div class="homeboxcontainer">

<div class="homeboxcontainer_right">

<div class="homebox_blue">
<a href="programs/technology.shtml" tabindex="230">Assistive Technology<br />
<img src="images/HOME_AssistiveTechnology.jpg" alt="Assistive Technology" width="160" height="120" style="margin-top: 5px;" /></a>
</div>
<div class="homebox_purple">
<a href="programs/employment.shtml" tabindex="250">Employment<br />
<img src="images/HOME_Employment.jpg" alt="Employment" width="160" height="120" style="margin-top: 5px;" /></a>
</div>
<div class="homebox_teal">
<a href="clinics/index.shtml" tabindex="270">Specialty Clinics<br />
<img src="images/HOME_SpecialtyClinic.jpg" alt="Specialty Clinics" width="160" height="120" style="margin-top: 5px;" /></a>
</div>
<div class="homebox_gold">
<a href="programs/sfcp/index.shtml" tabindex="270">Specialized<br />Family Care<br />
<img src="images/HOME_SpecializedFamilyCare.jpg" alt="Specialized Family Care" width="160" height="120" style="margin-top: 5px;" /></a>
</div>

</div>


<div class="homeboxcontainer_left">

<div class="homebox_orange">
<a href="programs/community.shtml" tabindex="240">Community Living&nbsp;&nbsp;<br /><img src="images/HOME_CommunityLiving.jpg" alt="Community Living" width="160" height="120" style="margin-top: 5px;" /></a>
</div>

<div class="homebox_red">
<a href="programs/health.shtml" tabindex="260">Health &amp; Wellness<br /><img src="images/HOME_HealthWellness.jpg" alt="Health and Wellness" width="160" height="120" style="margin-top: 5px;" /></a>
</div>

<div class="homebox_darkblue">
<a href="programs/tbi/index.shtml" tabindex="260">Traumatic<br />Brain Injury<br /><img src="images/HOME_TraumaticBrainInjury.jpg" alt="Traumatic Brain Injury" width="160" height="120" style="margin-top: 5px;" /></a>
</div>

<div class="homebox_green">
<a href="programs/arts/index.shtml" tabindex="260">Fine Arts&nbsp;&nbsp;<br /><img src="images/HOME_FineArts.jpg" alt="Fine Arts" width="160" height="120" style="margin-top: 5px;" /></a>
</div>


</div>
</div>

Here's the CSS code related to these boxes:

/* COLORED HOME PAGE 'FOCUS AREAS' BOXES */

.homeboxcontainer {
width: 75%;
max-width: 410px;
min-width: 190px;
height: 100%;
margin: 1% auto;
padding: 0;
}
.hombeoxcontainer ul {
text-align: left;
}
.homeboxcontainer ul li a {
text-align: left;
color: #000066;
background-color: #FFFFFF;
}
.homeboxcontainer ul li a:hover {
text-align: left;
color: #000099;
background-color: #FFFFFF;
text-decoration: underline;
}

.homeboxcontainer_left ul li a {
text-align: left;
color: #000066;
background-color: #FFFFFF;
}
.homeboxcontainer_right ul li a {
text-align: left;
color: #000066;
background-color: #FFFFFF;
}

.homeboxcontainer_right {
float: right;
width: 186px;
height: 100%;
margin: 0 auto;
}
.homeboxcontainer_left {
float: left;
width: 186px;
height: 100%;
margin: 3% auto 0 auto;
}

.homebox_blue {
width: 180px;
text-align: left;
height: 175px;
color: #FFFFFF;
font-weight: bold;
font-size: 80%;
padding: 15px 0 0 5px;
margin: 0 0 0 2%;
background-image: url(../images/blue__.gif);
background-attachment: scroll;
background-position: left top;
background-repeat: no-repeat;
}
.homebox_teal {
width: 180px;
height: 175px;
color: #FFFFFF;
font-weight: bold;
text-align: left;
font-size: 80%;
padding: 15px 0 0 5px;
margin: 1% 0 0 2%;
background-image: url(../images/teal__.gif);
background-attachment: scroll;
background-position: left top;
background-repeat: no-repeat;
}
.homebox_purple {
width: 180px;
height: 175px;
color: #FFFFFF;
text-align: left;
font-weight:bold;
font-size: 80%;
padding: 15px 0 0 5px;
margin: 1% 0 0 2%;
background-image: url(../images/purple__.gif);
background-attachment: scroll;
background-position: left top;
background-repeat: no-repeat;
}
.homebox_red {
width: 180px;
height: 175px;
color: #FFFFFF;
font-weight: bold;
padding: 15px 2px 0 5px;
text-align: right;
font-size: 80%;
margin: 1% 2% 0% 0;
background-image: url(../images/red__.gif);
background-attachment: scroll;
background-position: right top;
background-repeat: no-repeat;
}
.homebox_orange {
text-align: right;
width: 180px;
height: 175px;
color: #FFFFFF;
font-weight: bold;
padding: 15px 2px 0 5px;
font-size: 80%;
margin: 5% 2% 0% 0%;
background-image: url(../images/orange__.gif);
background-attachment: scroll;
background-position: right top;
background-repeat: no-repeat;
}
.homebox_darkblue {
text-align: right;
width: 180px;
height: 175px;
color: #FFFFFF;
font-weight: bold;
padding: 7px 2px 0 5px;
font-size: 80%;
margin: 1% 2% 2% 0;
background-image: url(../images/darkblue__.gif);
background-attachment: scroll;
background-position: right top;
background-repeat: no-repeat;
}
.homebox_gold {
width: 180px;
height: 175px;
color: #000066;
font-weight: bold;
text-align: left;
font-size: 80%;
padding: 7px 0 0 5px;
margin: 1% 0 0 2%;
background-image: url(../images/yellow__.gif);
background-attachment: scroll;
background-position: left top;
background-repeat: no-repeat;
}
.homebox_green {
text-align: right;
width: 180px;
height: 175px;
color: #FFFFFF;
font-weight: bold;
padding: 7px 2px 0 5px;
font-size: 80%;
margin: 1% 2% 2% 0;
background-image: url(../images/green__.gif);
background-attachment: scroll;
background-position: right top;
background-repeat: no-repeat;
}

Any help on solving this annoying little bounce would be greatly appreciated!

Kitty

[boogyman]

Hello and welcome to the forums.

When posting code at length like you have, we ask that you use the regular
tags, rather than what you are using, which are meant more for inline use... hence "icode".

however regarding your problem, I wouldn't hold a site back because of something like this.

I didn't look at the entire site code, however from above I did notice that you have padding and margins around those elements


padding: 15px 0 0 5px;
margin: 0 0 0 2%;


chances are you have not replicated those properties wherever you are declaring the psuedo :hover selector for the elements.

if that doesn't fix the problem, then next I would try explicitly setting the padding and margin of the anchor images to zero, which should reset those properties.

[kb_bdg]

Thanks boogyman. I wasn't sure about that icode, my first post. I'll remember next time. I tried adding the padding/margin settings to the :hover which didn't change anything. I also zeroed out the padding/margins and still had the same problem. The client is editing program information now, site is going live on Friday, just thought I could figure that out but have tried everything.IE's quirky behavior can be such a headache! I'll keep trying those adjustments, I appreciate your response!