css pain in the arse!
- Started
- Last post
- 14 Responses
- JamesBoynton
http://www.jamesrobertedward.com…
Gah!
I have a question which has been driving me mad, it only seems to happen ie ie6/7 and 8 seems ok.
Basically I have 2 divs one above the other. The top div has a margin bottom of 20px. Inside the first div is a paragraph which of course has a margin bottom (margin top is 0).. Lets say the margin bottom on the p is 15px.
All seems good.. And it is in firefox.
But in ie 6/7 the space between the 2 divs is 35px! its adding the bottom of the p as well as the actual bottom of the div....
Is it something I don’t know about in a ie only css?
Its driving me mad!!!!!!!
- JamesBoynton0
scrap ie8 working... seems odd too.
Damn
- JamesBoynton0
Right
In FF it appears that the two margins collapse to the largest of the 2... but not in ie! any way around?
- Stugoo0
id start off by taking your idth of your p tags, you dont need the, jist set the padding on the div to push them in or padding on the p.
if your floating on ie6 then you should set display:inline too as there is apixel doubleing bug, but your not floating soooo...try using paddings! or a clearing div
set a padding class. say .pb20 { padding-bottom:20px;}
then do
<div > <p> content</p></div>
<div class="clear pb20"></div>
<div ><p>content</p></div>- but isnt the still a amrgin to the bottom of the p that pushed down?JamesBoynton
- sorry rereading this i wasnt very helpful.Stugoo
- creez0
dont set margins on the p but on the divs containing them and it'll look the same on ie, code:
p{ background-color:green; width:180px;}div#one {margin-bottom:20px; width:200px; background-color:#FF0000}
div#two {margin-bottom:20px;width:200px...
- JamesBoynton0
Hi Creez, thanks for that... but dont paragraphs have margisn set automatically to the top and bottom? the problem is that the bottom margin of the p is adding to the bottom margin of the divs in ie, where as in FF they collapse to the largest of the 2.
- JamesBoynton0
also, i cant set paragpraph margin bottom to 0 because there would be no gap between them.
- I have this same problem. It's been bugging me as well...theredmasque
- acescence0
the issue with IE is that it won't collapse the margins if "hasLayout" is triggered. one of the things that triggers hasLayout is width, if you remove the width declarations, the margins will collapse as expected. you then of course need to define your width elsewhere.
- braaad0
IE's box model is notoriously incorrect, and will provide you hours of frustration. Something to look forward to! Check out www.csscreator.com some time- it's a great forum for CSS troubleshooting and discussion.
- JamesBoynton0
hey acescence, thanks for that... so do i take the width off the p (which was only there to show what wasnt working... and off the div? because i tried it only on the p and the same problem still remains, will play a bit more. Appreciate the help guys
James
- JamesBoynton0
Hey acescene! Its worked, thank god for that!
I did a quick test http://www.jamesrobertedward.com… and now ie responds the same as ff etc. With the p bottom margin and the div bottom margin collapsing in to the largest of the two.....
now where can i set the widths!?
Cheers
James
- JamesBoynton0
In fact, in the above example i have it working....yes!
I set a div , then within in that a div with no width and within that a p with no width and that seems to works.
So is the that i dont was haslayout on the div and p that both have bottom margins so i shouldnt add widths to them?
- Lloyd_Easter0
maybe you should hire a professional to do your website? it's an important investment that is worth making.
- JamesBoynton0
Hhaha, thanks Lloyd_Easter, you sound like a professional.
Thanks
James
- zaq0