Welcome to WebmasterWorld Guest from 54.146.180.94

Forum Moderators: not2easy

content get out from the border

   
9:08 am on Jun 22, 2013 (gmt 0)



Hi,

I have a problem with content that don't want to stay in a border.

It's about the <li> elements whitin <ul>.

I put the code bellow:

.php code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="border.css" >


</head>


<body>


<div class="big">



<ul id="menu">

<li> <a href="#"> abc </a> </li>
<li> <a href="#"> abc </a> </li>


</ul>




</div>




</body>




</html>



And the .css code



*{

margin: 0px;
padding:0px;

}


html,body {

background-color:pink

}


.big {

margin: 10% 20% 20% 20%;
background-color:blue;

}


#menu {

list-style:none;
border-style:solid;


}

#menu li {

float:left;

}



The <li> elements go out from border limits.


Please help me if you can, thank you very much.
10:06 am on Jun 22, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to WebmasterWorld!

The problem here is that floats are removed from the flow, causing the parent to collapse. If you use
display: inline-block
instead of
float: left
you avoid this problem.
10:41 am on Jun 22, 2013 (gmt 0)



Yes, if I remove the floating, the <li> remains within border, but I want that my <li> elements to be aligned horisontaly. How I do that please?

Thank you?
10:57 am on Jun 22, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Edit: I type slow, so this was written before your post.

Lists are a pain. I have been bitten more times than I can count by a generic
{padding: some-small-number-on-all-sides;}
that turns out to have unintended consequences when it comes to list items.

I've never found the exact numbers in writing-- it may be up to the browser-- but list items have an inherent left padding. It's where the marker lives. Or, uhm, the absence of a marker if you're not using one.

Make a fresh html document, put in some nonsense lists and include this in the CSS:

ul {background-color: inherit; border: 1px solid blue;}
li {background-color: inherit; border: 1px dotted red;}


You can use a background-color instead of a border; either way, the padding will jump out and hit you in the face.
11:07 am on Jun 22, 2013 (gmt 0)



I don't understand, you say that is impossible to fit list within borders?
12:23 pm on Jun 22, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



It's not impossible, but you have to be very careful with the padding.

For border purposes, all my current browsers interpret "list" as "container holding all the list items, plus empty space on the left". But my ancient copy of MSIE interprets "list" as "the set of all its items, exclusive of empty space on the left". I really hope this is not true of any MSIE in current use. If it is, you're in conditional-comment territory. Ugh.
2:58 pm on Jun 22, 2013 (gmt 0)

10+ Year Member



Hi,

Your border is on #menu which is the parent of the list items and as mentioned already your lists items are floated and therefore removed from the flow so the parents height is zero and the parent's border will not encompass the child floats.

You could as already mentioned us display:inline-block on #menu which will create a new block formatting context and as such will automatically contain child floats and solve your problem. However inline-block leaves white space gaps (and needs a hack for ie7 and under) and therefore if you don't need visible overflow it's eaasier to just add overflow:hidden to #menu instead.

Overflow other than visible also creates a new block formatting context and elements in this context automatically enclose (contain) their child floats.

If you need visible overflow then use the "clearfix" method of clearing floats (just google it) and that will solve the problem also. :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month