why text appear outside border

Discussion in 'CSS' started by moheballah, Sep 24, 2009.

  1. #1
    
    <ul style="border: 1px #000000 solid; display:block; list-style-type: none;">
    <li>
    	<dl>
    		<dt style="float:left; display:block;">text1</dt>
    		<dd style="float:left; display:block;">text2</dd>
    	</dl>
    </li>
    </ul>
    
    
    HTML:
    i don't know why why text appear outside ul border
     
    moheballah, Sep 24, 2009 IP
  2. addlinkurl

    addlinkurl Well-Known Member

    Messages:
    2,409
    Likes Received:
    129
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    1
    #2
    try this:

    it will work.
     
    addlinkurl, Sep 25, 2009 IP
  3. moheballah

    moheballah Member

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    thanks

    what about this

    <ul style="list-style-type: none; background-color: green; border: 1px black solid; display:block; clear:both;">
    	<li style="width:30%; padding: 5px;	float:right; overflow: visible;">1111111111111111</li>
    	<li style="width:50%; padding: 5px;	float:right; overflow: visible;">222222222222222</li>
    	<li style="width:8%; padding: 5px;	float:right; overflow: visible;">333</li>
    	<li style="width:7%; padding: 5px;	float:right; overflow: visible;">444</li>
    </ul>
    <ul style="list-style-type: none; background-color: green; border: 1px black solid; display:block; clear:both;">
    	<li style="width:30%; padding: 5px;	float:right; overflow: visible;">5555555555555555</li>
    	<li style="width:50%; padding: 5px;	float:right; overflow: visible;">6666666666666666</li>
    	<li style="width:8%; padding: 5px;	float:right; overflow: visible;">777</li>
    	<li style="width:7%; padding: 5px;	float:right; overflow: visible;">888</li>
    </ul>
    
    HTML:
    why ul not have same height of its li :rolleyes:
     
    moheballah, Sep 25, 2009 IP
  4. addlinkurl

    addlinkurl Well-Known Member

    Messages:
    2,409
    Likes Received:
    129
    Best Answers:
    0
    Trophy Points:
    155
    Digital Goods:
    1
    #4
    you need to use width and float.

     
    addlinkurl, Sep 25, 2009 IP
  5. moheballah

    moheballah Member

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    thanks

    about this

    <style>
    .menu
    {
    	float:left;
    	width: 200px;
    	position:relative;
    }
    
    .content
    {
    	clear:both;
    	position:absolute;
    	top: 0px;
    	left: 220px;
    }
    
    ul
    {
    	list-style-type: none;
    	background-color: green;
    	border: 1px black solid;
    	float: left;
    	width: 100%;
    }
    
    li
    {
    	padding: 5px;
    	float:left;
    	overflow: visible;
    }
    </style>
    <div>
    	<div class="menu">menu</div>
    	
    	<div class="content">
    		<ul>
    			<li style="width:30%;">1111111111111111</li>
    			<li style="width:50%;">222222222222222</li>
    			<li style="width:8%;">333</li>
    			<li>444</li>
    		</ul>
    		<ul>
    			<li style="width:30%;">5555555555555555</li>
    			<li style="width:50%;">6666666666666666</li>
    			<li style="width:8%;">777</li>
    			<li>888</li>
    		</ul>
    	</div>
    </div>
    
    HTML:
    1- why there are blank space between 2 ul
    2- how can i make class (content) expand in all page beside class (menu)
    3- how can i make last li expand in all page beside the li before it
     
    moheballah, Sep 25, 2009 IP
  6. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #6
    1. Does adding
    ul { margin:0; padding:0; }
    help. Different browsers have default margins and paddings on some elemnts like ul.

    2. What do you mean you want menu on the left, and content on the right?

    3. Do you mean you want the li's next to each other one one line? Try:
    li{ float: left; }
     
    wd_2k6, Sep 25, 2009 IP
  7. moheballah

    moheballah Member

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #7
    Last edited: Sep 25, 2009
    moheballah, Sep 25, 2009 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    A number of the responses so far have... flaws, and don't actually help you because they might be posting 'fixes' (some of which are invalid markup like the clearing div OUTSIDE the LI) they aren't explaining what they are or how they work.

    Of course all the inlined presentation makes me want to puke.

    In all cases, what's happening is the natural behavior of float and parent container. Floats are taken 'out of flow' for determining the height of elements around them in standards compliant browsers. Legacy versions of IE will incorrectly wrap floats in 'quirks mode' - naturally we can assume you have a valid doctype and aren't dealing with that.

    PROPERLY making parent elements wrap floating children is a matter of tripping an overflow state (like overflow:hidden) and tripping haslayout for IE - width, height or using zoom:1 - the last of those haslayout trips being invalid CSS, but since the rules of CSS say to ignore unrecognized elements to allow for browser specific fixes, big **** deal.

    You also have a lot of redundant CSS inlined there - floats are inherently display:block - you don't need to restate that, same goes for UL, DT and DD.

    For your first example I'd use this CSS
    .nestedULDD {
    	list-style:none;
    	border:1px solid #000;
    }
    
    .nestedULDD li {
    	overflow:hidden;
    	width:100%; /* trip haslayout */
    }
    
    .nestedULDD dt,
    .nestedULDD dl {
    	float:left;
    }
    Code (markup):
    With this markup:

    <ul class="nestedULDL">
    	<li>
    		<dl>
    			<dt>text1</dt>
    			<dd>text2</dd>
    		</dl>
    	</li>
    </ul>
    Code (markup):
    Though I have the sneaking suspicion we're seeing tag abuse in the use of the DL here - and possibly something that SHOULD in fact be a table - though without the actual data you are plugging in it's hard to say. In any case, making the LI wrap the floats with overflow:hidden and width:100% makes the parent UL wrap them, removing the need to be pissing around with adding even more markup to what is already by all indications a bloated mess.

    I have the nasty feeling that this should be:

    <table class="someTable">
    	<tr>
    		<th>text1</th>
    		<td>text2</th>
    	</tr>
    </table>
    Code (markup):
    Though without seeing what you are actually plugging in for data it's hard to say... I just smell UL/DL abuse... Probably because some whacko told you never to use tables even when it's tabular data?

    ... as to your second example/question, again it's elements not wrapping their children, though in this case there's other things going on too... and I'm 99.99% certain you should be using a table there since that SCREAMS tabular data - though it's also a good example why presentation should NEVER be inlined.

    Assuming that was to be kept as a pair of UL, I would expect the following CSS:

    .shouldBeTable {
    	overflow:hidden; /* wrap floats */
    	zoom:1; /* trip haslayout, wrap floats IE */
    	list-style:none;
    	background:green;
    	border:1px solid #000;
    }
    
    .shouldBeTable li {
    	float:right;
    	padding:5px;
    }
    
    .shouldBeTable .firstColumn {
    	width:30%;
    }
    
    .shouldBeTable .secondColumn {
    	width:50%;
    }
    
    .shouldBeTable .thirdColumn {
    	width:8%;
    }
    
    .shouldBeTable .fourthColumn {
    	width:7%;
    }
    Code (markup):
    With this for markup:

    <ul class="shouldBeTable">
    	<li class="firstColumn">1111111111111111</li>
    	<li class="secondColumn">222222222222222</li>
    	<li class="thirdColumn">333</li>
    	<li class="fourthColumn">444</li>
    </ul>
    
    <ul class="shouldBeTable">
    	<li class="firstColumn">5555555555555555</li>
    	<li class="secondColumn">6666666666666666</li>
    	<li class="thirdColumn">777</li>
    	<li class="fourthColumn">888</li>
    </ul>
    Code (markup):
    Although that SCREAMS tabular data, which means use a table, that's what it's FOR. It is NOT "don't ever use a table" it's "Don't use a table for layouts - if you are presenting tabular data, that's what a table is FOR" (The anti-table mafioso's are taking this **** a little too damned far)

    Which means this for CSS:

    <table class="isTable">
    	<tr>
    		<td class="firstColumn">1111111111111111</td>
    		<td class="secondColumn">222222222222222</td>
    		<td class="thirdColumn">333</td>
    		<td class="fourthColumn">444</td>
    	</tr><tr>
    		<td class="firstColumn">5555555555555555</td>
    		<td class="secondColumn">6666666666666666</td>
    		<td class="thirdColumn">777</td>
    		<td class="fourthColumn">888</td>
    	</tr>
    </table>
    Code (markup):
    Although depending on what your REAL data being plugged in is for your first column, that may or may not need to be assigned a TH instead of a TD - likewise all the classnames are placeholders since you should use classes that say WHAT the data is to make it clearer to the next poor shlub to come along and have to deal with the code.

    Hope this helps, if you have real world examples of data to be plugged in, we could probably help you dial this in a hell of a lot closer.
     
    deathshadow, Sep 28, 2009 IP