margin/padding - problem in navigational ul li inline list

Question

dominique7 1 Light Poster

14 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; }

web-design

2 Contributors
7 Replies
230 Views
9 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by dominique7

macneato 29 Posting Pro in Training

14 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

14 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