ie 6 url in anchor tag causes extra 10 pixel padding

[manslyAvite]

Hi everyone,

I've run into a strange bug in ie6. I am using a combination of the sliding doors rollovers with a dropdown. I had tested it successfully in all browsers but did not include actual urls and used anchors instead (i.e. href="#4"). When I changed the links to actual URLs I assumed it would look the same which it does in all browsers except ie 6 which has an extra 10 pixel padding on the right.

Has anyone else come across this? I'm not really sure why this would happen.

Thanks in advance!

[Paul O'B]

Hi,

It shouldn't make any difference whether the url is there or not unless its some obscure bug.

It soulds like a margin, whitespace or "haslayout" issue instead. You will have to post some code or a link so that we can look

[manslyAvite]

Sure, here is an example implementation excuse the markup its meant to be used with our wysiwyg editor / menu manager application.

<div class="Service"  style="z-index:97">
    <img src="/images/ph_image.jpg" alt="placeholder" width="39" height="39" />
    <h3>This is the name of the section</h3>
		<div class="ServicesMenu">
			 <ul>
			 <li><a href="#" class="chooseService">Choose a Service
			<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="/dev_applications.asp">Lorem ipsum dolor sit amet</a></li>
					<li><a href="/dev_applications.asp">Lorem Ipsum</a></li>
					<li><a href="#4">Lorem Ipsum</a></li>
					<li><a href="#2">Pellentesque ut leo eu </a></li>
					<li><a href="dev_applications.asp">Lorem Ipsum</a></li>
					<li><a href="#2">Lorem Ipsum</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		        </li>
		</ul>
	</div>
</div><!-- end service -->

the CSS

#ServicesWrapper{
	position:relative; width:322px;
}

/*individual service*/
.Service{
	float:left; width: 284px; background:url(/images/GreyInset.gif) bottom repeat-x; 
	padding:8px 0 8px 0; margin-left: 20px; display:inline;position:relative;
}


.Service img{float:left;margin: 0 15px 0 0; padding:2px; background:#FFF;
	border:#B3B3B3 1px solid;
}

.Service h3{
	float:right; width:224px; color:#09508E; font-size:11px;   margin-top:0px; padding-top:0px;
}

.ServicesMenu{
	margin:0; padding:0; background-color:#FF0000;
	float:right; width:224px; 
}






/* remove all the bullets, borders and padding from the default list styling */
.ServicesMenu ul {
padding:0;
margin:0;
list-style-type:none;
width:224px;
position:relative;
}


/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.ServicesMenu li {
float:left;
width:224px;
}

/* style the links for the top level */
.ServicesMenu a, .ServicesMenu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:214px;
height:25px; 
background:url(/images/bg_greyArrowRight.gif); 
padding-left:10px; 
line-height:25px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .ServicesMenu a, * html .ServicesMenu a:visited {
width:224px;
w\idth:214px;
}

.ServicesMenu ul li {
position:relative;
}


/* hide the sub level and give them a positon absolute so that they take up no room */
.ServicesMenu ul ul {
visibility:hidden;
position:absolute;
z-index:999;
height:0;
top:25px;
left:0; 
width:220px;
}


/* another hack for IE5.5 */
* html .ServicesMenu ul ul {
top:25px;
t\op:25px;
}


.ServicesMenu table {position:absolute; top:0; left:0;}

/* style the second level links */
.ServicesMenu ul ul a, .ServicesMenu ul ul a:visited {
	border-top:#6599CB 1px solid;
	background:#09508E; 
	color:#FFF; 
	height:auto; 
	line-height:1em; 
	padding:10px 10px; 
	width:204px;
}

.ServicesMenu ul ul a:hover{
	color:#F3F3F3; background-color:#0D61AA;
}

/* hack for IE5.5 */
* html .ServicesMenu ul ul a{
width:224px;
w\idth:214px;
}


.ServicesMenu .chooseService{
position:absolute;
}

/* style the top level hover */
.ServicesMenu a.chooseService:hover , .ServicesMenu ul ul a.chooseService:hover{
color:#fff; 
background:#CCCCCC url(/images/bg_greyArrowRight.gif) 0px -25px no-repeat; 

}

/*firefox*/
.ServicesMenu :hover > a.chooseService, .ServicesMenu ul ul :hover > a.chooseService {
color:#fff;
background:#CCCCCC url(/images/bg_greyArrowRight.gif) 0px -25px no-repeat; 
}

/* make the second level visible when hover on first level list OR link */
.ServicesMenu ul li:hover ul,
.ServicesMenu ul a:hover ul{
visibility:visible; 
}

[Paul O'B]

Hi, You seem to have the wrong width in here. Shouldn't it be 204px and not 214px?

 /* hack for IE5.5 */ * html .ServicesMenu ul ul a{ width:224px; w\idth:204px; }

[manslyAvite]

Why yes it would! Thank you so much for your help. I really appreciate you taking the time to check out my issue / lack of competence