PDA

View Full Version : Floating problem in ie7 - need help asap !!



aaronhockey_09
Mar 22nd, 2011, 11:26 PM
hey guys, so iv run into a problem right now. Im making a website for a client, and there seems to be a problem with the floating in IE7.

If you view it in chrome or firefox you can see it floats properly, but if you view it in IE7, there is something wrong w/ the floating / clearing.

you can view the site at sellingstcharlescounty.com/?preview_design=2182

and the css at http://www.ckgpreview.com/Preview/joannah/style.css

What do i need to put in the IE7 CSS to make this float properly.
thanks in advance.

KaliK
Mar 22nd, 2011, 11:44 PM
Can you post a screen shot of the page with the problem? I don't have IE 7 so I can't see exactly where the issue is.

Excavator
Mar 23rd, 2011, 12:00 AM
Hello aaronhockey_09,
You are pretty vague when you say "floating problem" and don't give element names and a better description.

I'm guessing it's your #testimonials ul that's moving out of #testimonials? IE7 does not handle negative margins the same as newer browsers. Instead of that margin-left: -20px; it might work better to give it a width and normal margins like this -



#testimonials ul {
width: 248px;
margin: 0 20px;
list-style:none;
/*
margin-right:15px;
margin-left:-20px;
*/
}

aaronhockey_09
Mar 23rd, 2011, 12:14 AM
Hey, sorry about that.
The problem seems to be in the #mid-right.


The information seems to floating correctly ( right with a margin right) , but the background isnt. ( floating right but no margin right ).
I will give what you said a try and see if it helps.

Thanks very much.

Excavator
Mar 23rd, 2011, 12:30 AM
Hey, sorry about that.
The problem seems to be in the #mid-right.


The information seems to floating correctly ( right with a margin right) , but the background isnt. ( floating right but no margin right ).
I will give what you said a try and see if it helps.

Thanks very much.

Yes, see my previous post about the negative margin. I think that suggested bit of CSS will clear it up for you.
It's very likely you'll be able to make that even simpler by doing away with the width.
Try it like this once -

#testimonials ul {
margin: 0 20px;
list-style:none;
}

aaronhockey_09
Mar 23rd, 2011, 12:55 AM
Thanks, worked great!!