...

View Full Version : Alignment problem in IE



eberdome
02-17-2011, 08: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.gorillaonemedia.com/services/

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, 08:57 AM
<ul class="expander">

<img src="/images/temp_img.png">

<li>
Your current markup is invalid (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fexperiencemediaonline.gorillaonemedia.com%2Fservices%2F). You can't immediately nest any element inside a <ul>/<ol> tag other than <li>

eberdome
02-17-2011, 09: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, 10:04 AM
remove float from image and then make the following changes.
<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>

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, 10: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, 10:36 AM
I got it working, thanks a lot guys!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum