Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    li doesn't expanded

    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



    the HTML code is
    Code:
    <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
    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}

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have attached the file
    Attached Thumbnails Attached Thumbnails li doesn't expanded-li-issue.jpg  

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't understand what is wrong. I've tested your code and divs are shown, picture and link in both li items.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,389
    Thanks
    13
    Thanked 353 Times in 349 Posts
    Quote Originally Posted by Excavator View Post
    You can't put divs inside your li's.
    really? the DTD doesn’t forbid that.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You haven't posted your whole code here, but I suspect the issue is with your .clear divs. If you have:

    Code:
    .clear{clear:both}
    then this div:

    Code:
    <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:

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

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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Dormilich View Post
    really? the DTD doesn’t forbid that.
    Who knew? It is valid. I'm looking for a semantic use for that now...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.
    Last edited by SB65; 12-14-2010 at 12:33 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •