...

View Full Version : li doesn't expanded



haithamedrees23
12-13-2010, 05:39 PM
i have 2 li and each of them should hold 2 right floated divs , but the are not expanded to hold the divs properly as shown in the screenshot in the url below

http://rapidshare.com/files/436706262/li_issue.jpg

the HTML code is
<div class="anothernews">
<ul>

<li><div><img src="Images/smallimg.jpg" /> </div>
<div><p><a href="#">4221 حالة إصابة مكتشفة بالإيدز فى مصر
</a></p></div>
<div class="clear"></div>
</li>


<li><div><img src="Images/smallimg.jpg" /> </div>
<div><p><a href="#">4221 حالة إصابة م
كتشفة بالإيدز فى مصر
</a></p></div>
<div class="clear"></div>
</li>

<div class="clear"></div>
</ul>
<div class="clear"></div>
</div><!--end of anothernews div-->




The CSS code

.anothernews{ width:230px; float:right; margin-right:15px}

.anothernews li{ list-style:none; width:100%; border:1px solid #000000; height:100%;}
.anothernews li div{ float:right; width:48% }
.anothernews li div+div{ margin-right:8px}

haithamedrees23
12-13-2010, 05:40 PM
i have attached the file

paolo1
12-13-2010, 06:30 PM
I can't understand what is wrong. I've tested your code and divs are shown, picture and link in both li items.

Excavator
12-13-2010, 06:49 PM
Hello haithamedrees23,
You can't put divs inside your li's. Check your code with the validator.

See the links about validation in my signature line below.

W3schools has this about lists (http://www.w3schools.com/HTML/html_lists.asp).

Dormilich
12-14-2010, 11:03 AM
You can't put divs inside your li's.

really? the DTD doesn’t forbid that.

SB65
12-14-2010, 11:41 AM
You haven't posted your whole code here, but I suspect the issue is with your .clear divs. If you have:


.clear{clear:both}

then this div:


<li><div><img src="Images/smallimg.jpg" /> </div>
<div><p><a href="#">4221 حالة إصابة مكتشفة بالإيدز فى مصر
</a></p></div>
<div class="clear"></div>
</li>


gets clear:both from the css at the top, but also inherits float:right from:


.anothernews li div {
float: right;
width: 48%;
}

So the clearing div is in itself floated and consequently doesn't clear the float. Making the clear div:


.clear{clear:both;float:none!important}


fixes the issue. If this doesn't fix it, then we need to see all your code, or preferably a link to your page.

(The validator allows a div within an li, but not one as a direct child of a ul)

Excavator
12-14-2010, 12:28 PM
really? the DTD doesn’t forbid that.

Who knew? It is valid. I'm looking for a semantic use for that now...

haithamedrees23
12-14-2010, 01:18 PM
hello SB65

thanks a million , your solution fixed the problem , but why i should add !important?


also thank you all for your efforts, really appreciate :)

SB65
12-14-2010, 01:30 PM
Without the !important, the float will remain since .anothernews li div as a selector is more specific than .clear. Adding !important ensures that the float:none in .clear css takes precedence.

Incidentally, you can see this in Firebug if you look at the css applied to that div.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum