Jump to content

Unwanted Margin - No Idea Why It's There!


Mark H
 Share

Recommended Posts

Hi all, On my navigation bar I have an unwanted indentation/margin. I am sure I've zeroed all the margins/padding except what I require, yet there seems to be a "phantom" margin on the left hand side. I have used a work around by reducing the wanted left padding, but I will be adding two more navigation items and the phantom margin would prevent me. Any ideas? The situation can be viewed at: http://www.rabel.org.uk Thank you. Mark.

Link to comment
Share on other sites

try ul#main, ul#main ul {padding:0; text-indent:0;} for a start. All ul ,li by default have some padding, margin, and text-indent, so when you are creating a menu using these elements, the first thing to do is to remove or set to zero those styling that will interfere with your menu layout design

ul, li { margin:0; padding:0; text-indent:0; list-style-type:none;}

now this will affect all ul, li tags within you page, to target the ul, li used within the menu use the container id ref, or class it is within

<div id="nav"><ul>  <li><a href="#">parent link</a>				 <ul>						 <li><a href="#">submenu1</a></li>						 <li><a href="#">submenu1</a></li>						 <li><a href="#">submenu1</a></li>				    </ul>  </li>  <li><a href="#">parent link</a></li>  <li><a href="#">parent link</a></li>  <li><a href="#">parent link</a></li></ul></div> 

with above you would use

#nav ul, #nav li { margin:0; padding:0; text-indent:0; list-style-type:none;}

Edited by dsonesuk
Link to comment
Share on other sites

Thanks dsonesuk, Yes, the initial suggestion you made worked fine, and thank you also for the additional guidance on zeroing everything. I will need to get into the habit of zeroing from the outset, as I know different browsers have different defaults. Thanks for your help! Mark.

Link to comment
Share on other sites

I have made the adjustment and it is fine in IE8 and 9, Chrome and Firefox, but IE7 still shows the indent. Any ideas why? Thanks to you, annoyance with Microsoft. Mark.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...