UPDATE:
This seem to only be an issue with ul
/li
if i replace the ul
with a div
and remove the li
and apply the relevant style to the a
's instead its fine. ID' still liek to know why the ul
/li
structure presents a problem since margin/padding have been reset explicitly.
Im having soem trouble with the children of a fixed position element in IE7. They seem to be gaining width/margin/padding from somewhere but I cant discern where or how to fix it.
You can take a look at it in jsFiddle here. Ive added the bg colors just for debugging. The image/li tags should be flush with they yellow, and are in IE8 as well as mozilla and webkit. But in IE7 there is an extra ~20px of space to the left pushing them over, as if the li
, a
, or img
tags had a margin. However, if i look through the properties in IEDevToolbar there is no margin or padding being applied. Futhermore, this happens even if i assign widths to everything and zero out margin/padding directly on each element with IEDevToolbar.
I'm totally lost on this one.
Below is the relevent code... There is a XHTML 1.0 Transitional doctype on the layout in question:
<style type="text/css">
.social-widgets {
position: fixed;
top: 125px;
left: 0px;
background: #f00;
width: 34px;
}
.social-widgets-content {
list-style: none inside none;
margin: 0;
padding: 0;
text-align: left;
background: #ff0;
}
.social-widgets-content li {
margin: 10px 0 !important;
padding:0;
width: 34px;
background: #0f0;
}
.social-widgets-content img {
display:block;
border-top: 2px solid #e9e8e8;
border-bottom: 2px solid #e9e8e8;
border-right: 2px solid #e9e8e8;
padding: 0px; margin:0px;
background: #00f;
}
</style>
<div class="social-widgets">
<ul class="social-widgets-content">
<li><a href="#"><img src="/images/button/button.facebook.png"></a></li>
<li><a href="#"><img src="/images/button/button.twitter.png"></a></li>
<li><a href="#"><img src="/images/button/button.feedback.png"></a></li>
</ul>
</div> <!-- /.social-widgets -->