SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text pulled to bottom in IE

    I have this ul li I'm trying to add to the content of a site. Everything looks ok except when I view the page on IE. The title and description are both pulled to the bottom. How can I stop IE from pulling the title and description to the bottom?



    HTML Code:
    <ul class="contentBoxes">
    
      <a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"><li><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
      <a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"><li><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
      <a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"><li class="nomar"><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
    </ul><!--end of boxes-->

    HTML Code:
    ul.contentBoxes {
        background-color: #FFFFFF;
        float: left;
        margin: 10px 0 3px;
        width: 960px;
        border-color: #D3D3D3;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 3px;
        padding: 8px 0;
    	height:98px;
    	margin-bottom: 8px;
    }
    ul.contentBoxes li {
        display: block;
        float: left;
        height: 101px;
        margin-right: px;
        margin-left: 7px;
        width: 310px;
    }
    ul.contentBoxes li.nomar {
        margin: 0;
        margin-right: 0px;
    	margin-left: 7px;
    }
    ul.contentBoxes li div {
        display: block;
        float: left;
        margin: 15px 0 0 13px;
        width: 175px;
    }
    ul.contentBoxes li img {
        float: right;
        margin: 10px 30px 0 0;
    }
    ul.contentBoxes li h4 {
        color:#3B6B82 !important;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 6px;
    }
    ul.contentBoxes li p {
        color: #727272;
        float: left;
        font-size: 12px;
        width: 180px;
        font-family: Tahoma,Arial,Helvetica,sans-serif;
        font-size: 12px;
        overflow: hidden;
        padding: 0px;
    }
    
    p.images {
        display: block;
        float: left;
        margin: 10px 0;
        padding: 0;
        text-align: center;
        width: 100%;
    }

  2. #2
    SitePoint Member webwolfwizard's Avatar
    Join Date
    Mar 2012
    Location
    Northern Ireland
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you attach the html and the css file?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    There simply isn't enough width to have the text on the same line

    Code:
    <!doctype html>
    <html>
    <head>
    <title>asdf</title>
    <style type="text/css">
    *{margin:0;}
    ul.contentBoxes {
        background-color: #FFFFFF;
        float: left;
        margin: 10px 0 3px;
        width: 960px;
        border-color: #D3D3D3;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 3px;
        padding: 8px 0;
    	height:98px;
    	margin-bottom: 8px;
    }
    ul.contentBoxes li {
        display: block;
        float: left;
        height: 101px;
        margin-right: px;
        margin-left: 7px;
        width: 310px;
    }
    ul.contentBoxes li.nomar {
        margin: 0;
        margin-right: 0px;
    	margin-left: 7px;
    }
    ul.contentBoxes li div {
        display: block;
        float: left;
        margin: 15px 0 0 13px;
        width: 175px;
    }
    ul.contentBoxes li img {
        float: right;
        margin: 10px 0px 0 0;
    }
    ul.contentBoxes li h4 {
        color:#3B6B82 !important;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 6px;
    }
    ul.contentBoxes li p {
        color: #727272;
        float: left;
        font-size: 12px;
        width: 180px;
        font-family: Tahoma,Arial,Helvetica,sans-serif;
        font-size: 12px;
        overflow: hidden;
        padding: 0px;
    }
    
    p.images {
        display: block;
        float: left;
        margin: 10px 0;
        padding: 0;
        text-align: center;
        width: 100%;
    }
    </style>
    </head>
    
    <body>
    <ul class="contentBoxes">
    
      <li><a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
      <li><a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
      <li class="nomar"><a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
    </ul><!--end of boxes-->
    </body>
    </html>
    I switched up the HTML too, you had <a>'s as the direct children of <ul> which isn't allowed. So I put it inside the <li>. Though still invalid because you have it wrapping around a <div> and <p> which are block elements. If you wanted it to encompass the entire box, you could have it sitting empty as the first child of <li> and then give it position:absolute; and give it width/height to overlay the entire box. Of course, the <li> will need position:relative to work . In the below code, I added CSS for the anchors, along with setting position:relative on the <li>.
    Code:
    <!doctype html>
    <html>
    <head>
    <title>asdf</title>
    <style type="text/css">
    *{margin:0;}
    ul.contentBoxes {
        background-color: #FFFFFF;
        float: left;
        margin: 10px 0 3px;
        width: 960px;
        border-color: #D3D3D3;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 3px;
        padding: 8px 0;
    	height:98px;
    	margin-bottom: 8px;
    }
    ul.contentBoxes li {
        display: block;
        float: left;
        height: 101px;
    position:relative;
        margin-right: px;
        margin-left: 7px;
        width: 310px;
    }
    ul.contentBoxes li.nomar {
        margin: 0;
        margin-right: 0px;
    	margin-left: 7px;
    }
    ul.contentBoxes li div {
        display: block;
        float: left;
        margin: 15px 0 0 13px;
        width: 175px;
    }
    ul.contentBoxes li img {
        float: right;
        margin: 10px 0px 0 0;
    }
    ul.contentBoxes li h4 {
        color:#3B6B82 !important;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 6px;
    }
    ul.contentBoxes li p {
        color: #727272;
        float: left;
        font-size: 12px;
        width: 180px;
        font-family: Tahoma,Arial,Helvetica,sans-serif;
        font-size: 12px;
        overflow: hidden;
        padding: 0px;
    }
    ul.contentBoxes li a
    {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    }
    
    p.images {
        display: block;
        float: left;
        margin: 10px 0;
        padding: 0;
        text-align: center;
        width: 100%;
    }
    </style>
    </head>
    
    <body>
    <ul class="contentBoxes">
    
      <li><a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"></a><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
      <li><a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"></a><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
      <li class="nomar"><a href="http://www.mysite.com" target=
        "_blank" rel="nofollow"></a><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
    </ul><!--end of boxes-->
    </body>
    </html>
    Hope this helps .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, that took care of it, I really appreciate the help.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Glad I was able to help . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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