homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
content get out from the border
ghid



 
Msg#: 4586668 posted 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.

 

DrDoc

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



 
Msg#: 4586668 posted 10:06 am on Jun 22, 2013 (gmt 0)

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.
ghid



 
Msg#: 4586668 posted 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?

lucy24

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



 
Msg#: 4586668 posted 10:57 am on Jun 22, 2013 (gmt 0)

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.

ghid



 
Msg#: 4586668 posted 11:07 am on Jun 22, 2013 (gmt 0)

I don't understand, you say that is impossible to fit list within borders?

lucy24

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



 
Msg#: 4586668 posted 12:23 pm on Jun 22, 2013 (gmt 0)

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.

Paul_o_b

10+ Year Member



 
Msg#: 4586668 posted 2:58 pm on Jun 22, 2013 (gmt 0)

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. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved