<li> extra space in IE
- Started
- Last post
- 17 Responses
- Moo
I guess others have come across this problem but I can't seem to find the solution on how to fix the extra spacing in the dreaded IE6 & 7 in firefox it looks fine
I've tried inline height, importants on 0p padding and margin but nothing it keeps added some stupid space any ideas?
cheers m00
- Autokern0
you mean the infamous 3px jog?
- hawkwah0
example?...code?...
- Moo0
- Moo0
<Html code>
<div id="footer">
<ul>
<h4>Customer Services</h4>
<li>• <a href="#">Contact Us</a></li>
<li>• <a href="#">Where To Buy</a></li>
<li>• <a href="#">Terms & Conditions</a></li>
<li>• <a href="#">Delivery & Returns</a></li>
<li>• <a href="#">FAQ's</a></li>
</ul>
<ul>
<h4>About Us</h4>
<li>• <a href="#">About Russell Hobbs</a></li>
<li>• <a href="#">News</a></li>
<li>• <a href="#">Press Releases</a></li>
<li>• <a href="#">Email Newsletters</a></li>
<li>• <a href="#">WEEE Recycling</a></li>
</ul>
<ul>
<h4>Help</h4>
<li>• <a href="#">Gift Ideas</a></li>
<li>• <a href="#">Buying Guide</a></li>
<li>• <a href="#">Recipes</a></li>
<li>• <a href="#">Feedback</a></li>
<li>• <a href="#">Articles</a></li>
<li>• <a href="#">Accessibilty</a></li>
</ul>
<ul>
<h4>Select a Country</h4>
<li>• <a href="#">United Kingdom</a></li>
<li>• <a href="#">Germany</a></li>
<li>• <a href="#">France</a></li>
</ul>
<ul>
<h4>My Account</h4>
<li>• <a href="#">Login/Register</a></li>
<li>• <a href="#">My Account</a></li>
<li>• <a href="#">Email Newsletters</a></li>
<li>• <a href="#">Delivery & Returns</a></li>
<li>• <a href="#">Privacy Policy</a></li>
</ul>
<ul>
<h4>Partners</h4>
<li>• <a href="#">Hovis</a></li>
<li>• <a href="#">Nescafe</a></li>
<li>• <a href="#">Tetley</a></li>
<li>• <a href="#">Toastabags</a></li>
</ul>
</div>
</Html code><css code>
#footer{
width: 100%;
height: 138px;
border: #FFFF00 1px solid;
}#footer ul{
list-style: none;
width: auto;
float: left;
margin: 0 29px 0 29px;
border: #00FFFF 1px solid;
padding: 0px !important;
}#footer li{
margin: 0 0 1px 0;
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 0px !important;
border: #FF0000 1px solid;
}#footer a{
color: #999999;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 11px;
padding: 0px !important;
}#footer a:hover{
color: #ffffff;
text-decoration: underline;
}
</css code>
- Nightshade0
Looks like line height to me
Add this to the top of your CSS file, see if it fixes it: http://meyerweb.com/eric/thought…
- hawkwah0
send me a link to the page and ill have a goo at it.
- jaylarson0
it's probably the fact that IE has a scroll bar even when there is no need
- i had the same problem a while back: http://www.qbn.com/t…jaylarson
- and that shifts pages over to the left. it's noticeable using IE in FF too.jaylarson
- Stugoo0
one thing to try is to put all the code on one line and remove ALL white space... IE has a retarded way of rendering space.
- Stugoo0
let me bash this into a test file
- BIGGESTDOGINTHEWORLD0
To be honest... your trying to be too anal with it, that sort of attention to detail is fine with Safari/Firefox but with IE you will drive yourself fucking mental doing that in IE.
Its all very possible but not worth the effort if you ask me, an IE user won't appreciate the work you put in anyway. I'd spend the time making sure FF/Safari/Opera are perfect and then adding some Webkit/CSS3/HTML5/JQuery niceness.
- i agree with what your saying but its not how the boss will see itMoo
- Stugoo0
i disagree with the above,
som reason my partial is not running right and connection to internet is being rubbish.
ill have to look at this later...try removing your margins, paddings and widths and building it up in steps. use background colours on everything to see if anything is popping out of their box.
- Shaney0
sorry bit busy right now too but try what Stugoo says and use firebug to remove paddings, widths, margins so you can see in real time whats changing. I would start with paddings tho...
- vaxorcist0
a shotgun approach:
1. try this: http://dean.edwards.name/IE7/
2. read and try this : http://www.communitymx.com/conte…
- IRNlun60
Those h4's inside the unordered lists are not valid but most likely not causing this. Looks like it might be line-height...
Also, why are you using '•' for bullets? You could use list-style-type: disc; list-style-position: inside;(or outside if you don't want to text to wrap under the bullet but you'll need to add more left margin.)
- d_rek0
you forgot the line of code:
$include.IE = "false"
- amullins0
#footer ul is floated so ie needs display:inline.
set overflow to auto or hidden (on floated elements) to clear your floats.
wrap those h4s in lis.