CSS help!
- Started
- Last post
- 21 Responses
- Greedo
I have a css conundrum...
http://www.xseet.com/products/to…
On the right hand side there is a 'downloads' and 'contact' container which somehow ends up at the bottom on IE only, it works in Firefox, safari, opera etc. It should by all means be up there, there's enough space and i made it float right. Yet somehow it doesn't. Any ideas?
- OhYeah0
Not sure if this will help but have you tried to float the download part to the left and not the right? I have had problems in the past with float:right in general.
- doctor0
I assume the problem occurs in IE6?
Have you tried narrowing the boxes? What happens if you do - do they still float around in the bottom?
Make sure you don't trigger IE into quirks mode. That shit is like a parallel universe.
- Thompy0
aye it's probably to do with ie's interpretation of the box model.
- pylon0
Agree with dr — try narrowing your contact-wrapper from 233 to like 200 or so.
- Greedo0
i already narrowed it, originally it was 238, that way it was perfectly distributed across the container. i can make it even smaller, but i somehow doubt thats it...
- Dancer0
Put some BG colours in there so you can see the divs properly
- Good way to trouble shoot, or add on borders.Thompy
- +1
7point34 - Not borders. It will push everything out by 2 pxDancer
- hahahaha, I usually just take that into accountThompy
- Don't add borders, they take up an extra 2 pixels of width which can throw out pixel specific width divs.jamble
- Dancer you speedy motherfucker ..jamble
- +1pylon
- 7point340
greedo,
are you floating the divs left to get them to line up?
i dont see a float: left; on wrapper-content or wrapper-downloads.
also you're missing a 6 on the color for footer li
- jasonistaken0
Yes. In IE 6, if a block is floated in one direction, it will double its margin in that particular direction. As mentioned before, just add display:inline to any floated element with a margin... All other browsers ignore it, because floated elements are inherently display block.
- That sounds dirty. Are you sure it won't mess up the float in standard compliant browsers?doctor
- As I said... It doesn't.
Floats ARE blocks. ALWAYS. But for some reason, it makes IE 6 play nicejasonistaken
- Gordy220
I use clearfix for anything float related - google it.
Also, perhaps add any padding / margin to a child element.
- TResudek0
Not sure if you have the answer yet but I think if you just add display:inline to the div that is floating right, you should be in good shape. Looks like the margin-right is doubling.
- Greedo0
k so i added the display:inline, could someone with IE 6/7 please check for me to see if the downloads/contact div is still ending up on the bottom?
http://www.xseet.com/products/to…
fank you
- TResudek0
Still at the bottom
- TResudek0
What you have there is a real messy mess. You have a DIV called "content" with a width of 740px. The right column is out side of that div and the div that surrounds it.
You need to take a step back and rethink things.
- doctor0
Why would you add display:inline to a floated element? That doesn't make much sense to me, as float only applied to block elements. If it's an IE hack, could you please link to a description of it?
Greedo: I haven't bothered to look through your code, but it sounds like you've gotten in too deep. Maybe you should try and simplify your layout - fewer containers and less CSS, as suggested above?
Keep us posted. :)
- display:inline; stops margin doubling bug in ie6.Stugoo
- on floatsStugoo
- But what about standards compliant browsers (ie Safari and Opera)?doctor
- I should say browsers that pass the ACID test. http://acid3.acidtes…doctor
- not to my knowledge either,
in an ideal world.....Stugoo - In the ideal world we wouldn't be testing for IE anyway... :)doctor
- Nothing happens in standards compliant browsers, because it's not a standard. They ignore it. Completely.jasonistaken
- Stugoo0
My Ie 6 looks fine tbh.
- doctor0
Just tested in IE7, and that looks fine too actually.