Can I remove a ul indent

**screaming_banjo** · 11-21-2006 03:29 PM

Hi

I've attached a screenshot of my problem. My menu bar is too far to the right which I'm guessing is because the <ul> tag makes it indent. Does anyone know how to get it running alongside the rest of the text?

The site isn't up yet and is on my PC. I have this for my menu bar at the moment:

<img src="logo.jpg" alt="logo.jpg" />
<ul class="navborder" style="margin-top:30px; list-style-type:none;">
<li><a href="default.asp" title="About Us" tabindex="1">About Us</a></li>
<li><a href="lessons.asp" title="Lessons" tabindex="2">Lessons</a></li>
<li><a href="theory.asp" title="Theory Test" tabindex="3">Theory Test</a></li>
<li><a href="hints.asp" title="Hints and Tips" tabindex="4">Hints and Tips</a></li>
<li><a href="faq.asp" title="F.A.Q's" tabindex="5">FAQs</a></li>
</ul>

In my external style sheet I've set a left and right margin of 10% and I also have this for the menu bar:

ul li {display:inline; margin:0 10px 0 10px;}

ul li a {border-left:8px solid white; text-decoration:none; padding-left:0px;}

Hope someone can help, I don't think my CSS is good enough for this!

Thanks

**KDLA** · 11-21-2006 03:40 PM

Code:

ul {margin: 0; padding: 0;}
ul li {display:inline; margin:0 10px 0 10px; padding: 0;}
ul li a {border-left:8px solid white; text-decoration:none; padding:0;}

This should get you aligned with the left edge. Adjust the values as needed.

**screaming_banjo** · 11-21-2006 03:45 PM

Thanks for that, but now my text is all overlapping. Should the first ul ul {margin: 0; padding: 0;}, go in my external stylesheet?

Can you explain what it's doing so that I can adjust the values.....looks a bit of a mess and i'm not too sure what to change.

Thanks so much for your help!

**KDLA** · 11-21-2006 03:49 PM

Huh -- It works for me:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul {margin: 0; padding: 0;}
ul li {display:inline; margin:0 10px 0 10px; padding: 0;}
ul li a {border-left:8px solid white; text-decoration:none; padding:0;}
</style>
</head>

<body>
<ul>
<li><a href="">as;ldkfj;slkfj</a></li>
<li><a href="">aslkdfj</a></li>
<li><a href="">a;lsdkfj</a></li>
</ul>
</body>
</html>

Check what you've got against mine...
Since they're inline & if you want them uniform in size, you may need to determine widths for the <li>.

**screaming_banjo** · 11-21-2006 04:23 PM

Aaargh, I know what I'd done. When you posted your first response, I'd found a solution that suggested using a -x px to move it in.......it was still there, which was how I ended up with the overlapping text!

10:30 and I think I've been working on this too long! Sorry and thanks again for your help!

It's as close as I'll get it because I have a left border on it......looks much better.

Can't thank you enough, was nearly pulling my hair out

**WebJoel** · 11-21-2006 04:30 PM

I run into this problem quite a bit too... that 40-pixel 'gap' that is assumed for the bullets to reside, -even if you cite "inline" which removes the bullets, it seems as if I still end up with that left-hand 'gap' which in tight real estate space can be annoying.

Thread: Can I remove a ul indent

Thread Tools

Display

Can I remove a ul indent

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions