Alignment problem in IE

eberdome · 02-17-2011, 07:12 AM

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!

abduraooft · 02-17-2011, 07:57 AM

Quote:

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>

eberdome · 02-17-2011, 08:55 AM

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?

abduraooft · 02-17-2011, 09:04 AM

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> ?

Excavator · 02-17-2011, 09:07 AM

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.

eberdome · 02-17-2011, 09:36 AM

I got it working, thanks a lot guys!