Jump to content

Unwanted Margin - No Idea Why It's There!


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...