margin/padding - problem in navigational ul li inline list

Question

dominique7 1 Light Poster

16 Years Ago

Hi,

I was just playing with a simple navigational bar and stumbled upon a problem I can't isolate.
When I use <ul> and <li> and "display: inline" I can't get the li fields really close horizontally in Firefox, so that the <li> borders would touch another. IE6 does what I'd expect here.

After I couldn't find what went wrong, I just put together a very basic test, so probably you should see my code through quite easily.

I'd be really glad if someone could point me to my misunderstanding or possible Firefox problem.

Cheers,
Dominique

here's the test.htm

<html>
<head>
<link rel="stylesheet" href="styles2.css" type="text/css" />
</head>
<body>
<div id=outer_box>
<div id=inner_box>
<ul>
<li>eintrag1</li>
<li>eintrag2</li>
<li>eintrag3</li>
</ul>

</div> <!-- inner_box -->
</div> <!-- outer_box -->

</body>
</html>

and here's styles2.css

* {margin: 0px; padding: 0px; border 0px; }
body { background: #FFF; margin: 0; padding: 0; }
div#outer_box { margin: 5px; padding: 10px; background: #eee; border: 1px solid;  }
div#inner_box { margin: 0px; padding: 20px; background: #ccc; }

div#inner_box ul { background: #aaa; padding: 0px; }
div#inner_box li {display: inline; border: 1px solid; }

html-css web-design

2 Contributors
7 Replies
255 Views
9 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by dominique7

Dani AI

Generated 8 Months Ago

Brief diagnosis and practical fixes

The gap you saw in Firefox usually comes from one of two things: (a) HTML whitespace between inline-level list items (spaces/newlines in the source become visual gaps), or (b) inline boxes aligning on the text baseline so font metrics and line-height create tiny offsets. That explains why IE6 looked different and why forcing heights or floats "fixed" the visual problem without addressing the root cause.

If you want modern, robust fixes that avoid fixed heights and clearing floats, try either of these approaches.

Flexible (recommended for modern layouts)

ul.nav {
  display: flex;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
}
ul.nav > li {
  border-left: 1px solid #000;
  padding: 8px 14px;
}

Inline-block (works well if you need older-browser support)

ul.nav {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0;   /* removes inter-item whitespace */
}
ul.nav > li {
  display: inline-block;
  font-size: 14px; /* restore size for items */
  vertical-align: middle;
  padding: 8px 14px;
  border-left: 1px solid #000;
}

Quick notes and debugging tips

If you keep inline (not inline-block/flex) check the HTML: remove the literal space/newline between <li> elements or put them on one line to remove the gap.
If vertical offset is the problem, set vertical-align: top|middle or adjust line-height.
Use the browser inspector: toggle display, temporarily add bright outlines/backgrounds to locate the gap, and inspect computed margin, padding, line-height, and font-size.

As observed, forcing heights worked; as showed, floating fixes it too, but the flex or inline-block approaches avoid fixed heights and give predictable, cross-browser spacing.

All 7 Replies

macneato 29 Posting Pro in Training

16 Years Ago

Try this

div#inner_box ul {
    background: #aaa;
    padding: 0px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-left: 1px solid;
	float:left;

}

div#inner_box li {
    display: inline;
	border-right: 1px solid #000;
	   
}

macneato 29 Posting Pro in Training

16 Years Ago

It's cool, I'm working on application that just doesn't want to place nice, so its a welcomed break.

Here's the way i should have done it in the first place.

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    background: #FFF;
    margin: 0;
    padding: 0;
}

div#outer_box {
    margin: 5px;
    padding: 10px;
    background: #eee;
    border: 1px solid;
	float: left;
	width:800px;
}

div#inner_box {
    margin: 0px;
    background: #ccc;
	float: left;
	width: 100%;
}

div#inner_box ul {
    background: #aaa;
    padding: 0px;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	float:left;
	margin:15px;
}

div#inner_box li {
    display: block;
    border-right: 1px solid;
	float:left;
	padding:20px
}

dominique7 commented: thanks for your colution! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dominique7 1 Light Poster · Answer 1 · 2010-02-18T19:42:16+00:00

thanks, macneato!
Now the list entries are close together, while the whole <ul> element moved down.
I attached screenshots of my initial code and macneato's suggestion.

Seems, I have to define a height for the <ul><li> containing elements to get around my problem?
But does someone know why my initial code doesn't work or where the space between the fields comes?

Cheers,
Dominique

macneato 29 Posting Pro in Training · Answer 2 · 2010-02-18T19:55:50+00:00

Here's how you fix it;

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    background: #FFF;
    margin: 0;
    padding: 0;
}

div#outer_box {
    margin: 5px;
    padding: 10px;
    background: #eee;
    border: 1px solid;
}

div#inner_box {
    margin: 0px;
    height:50px;
    background: #ccc;
}

div#inner_box ul {
    background: #aaa;
    padding: 0px;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	float:left;
	margin:15px;
}

div#inner_box li {
    display: inline;
    border-right: 1px solid;
}

Define a height add a margin to the ul itself.

dominique7 1 Light Poster · Answer 3 · 2010-02-18T20:40:11+00:00

thanks again, macneato!
looks good, but if I now want the text-box to look a bit less squeezed and add a padding to the <li>, it doesn't do once more what I'd expect. I thought I'd understand a bit of HTML and CSS, but well... :)
I'm sorry, I really don't want to steal your time, mate!

Cheers,
Dominique

div#inner_box li {
    display: inline;
    border-right: 1px solid;
    padding: 10px;
}

dominique7 1 Light Poster · Answer 4 · 2010-02-18T21:57:41+00:00

Hey, thanks again for all the effort!

I couldn't stop trying to find what I wanted either.

I added a box just around the <ul> and defined the height in two places.
I just post what works for me (though I was trying to dfind a way without defining the height) and try your solution too.

So, that was a nice lesson for me. I didn't understand everything that happened, but well... :)
I hope I can now transfer it nicely into my bigger page!

Cheers,
Dominique

here's my slightly changed html

<html>
<head>
<link rel="stylesheet" href="styles4.css" type="text/css" />
</head>
<body>
<div id=outer_box>
<div id=inner_box>

<div id=listbox>
<ul>
<li>eintrag1</li>
<li>eintrag2</li>
<li>eintrag3</li>
</ul>
</div> <!-- listbox -->

</div> <!-- inner_box -->
</div> <!-- outer_box -->

</body>
</html>

and the stylesheet:

* {margin: 0px; padding: 0px; border 0px; }
body { background: #FFF; margin: 0; padding: 0; }
div#outer_box { margin: 5px; padding: 10px; background: #eee; border: 1px solid;  }
div#inner_box { margin: 0px; padding: 20px; background: #ccc; }

div#listbox {
height: 35px;
background: #ddd;
border: 1px solid #000;
}

div#listbox ul { }

div#listbox li  {
display: inline;
height: 19px;
float: left;
border-right: 1px solid #000;
padding: 8px 20px;
}

dominique7 1 Light Poster · Answer 5 · 2010-02-18T22:05:09+00:00

Hi again,

yes, your solution looks fine!
Now I've been enough in front of the screen, but later, I'll have a look at your changes line by line and try to understand where you made the difference!

thanks again & certainly see you around some time soon!
Dominique

margin/padding - problem in navigational ul li inline list

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers