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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts

    Alignment problem in IE

    Hey Everybody,

    I'm now having a problem with aligning an li with an img. In FF and all other browsers (except IE of course) the text and image are aligning perfectly. In IE however the text sits right below the image, like its being pushed down. Anyone know why, i have been going at this thing for hours, no dice

    Link: http://experiencemediaonline.gorilla....com/services/

    Code:

    Code:
    div#services { width:709px; min-height:440px; overflow:hidden; position:relative; }
    ul.expander { height:auto; list-style-type:none; padding:0; padding-bottom:35px; margin:0; border:0; border-bottom:1px solid #B7B7B7; width:709px; }
    ul.expander li { text-align:right; font-size:12px; width:534px;  }
    ul.expander img {  float:right; width:155px; height:85px; padding:0; margin:0; margin-left:20px; border:1px solid #B7B7B7; }
    Thanks in advance!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <ul class="expander">
    
    <img src="/images/temp_img.png">
    
    <li>
    Your current markup is invalid. You can't immediately nest any element inside a <ul>/<ol> tag other than <li>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    eberdome (02-17-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    I have validated my code and switched things around. At first it was messed up, now I'm back to where i left off... Still looks bad in IE.. Any suggestions?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    remove float from image and then make the following changes.
    Code:
    <ul class="expander">
    <li class="image"><img src="/images/temp_img.png"></li>
    <li class="text"><h3>BROADCAST</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit curabitur vitae metus leo, </li>
    
    </ul>
    Code:
    li.image{
    float:right;
    width:155px;
    }
    li.text{
    margin-right:160px;
    }
    btw, it looks like your content doesn't appear as a "list". Can't you use <p> tag to wrap that text and and set the float:right to the image and then wrap the whole inside a <div> ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    eberdome (02-17-2011)

  • #5
    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 eberdome,
    You put a width of 709px on #services and ul.expander but the total width of the li's is 711px. Remove that border on the img and it all fits inside the 709px...

    ab is right though, your content is not a list.
    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

  • Users who have thanked Excavator for this post:

    eberdome (02-17-2011)

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    I got it working, thanks a lot guys!


  •  

    Tags for this Thread

    Posting Permissions

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