CSS padding problems - Tilted Forum Project - TFP - Sexuality, Philosophy and Political Discussion

d*d · 11-22-2004, 08:29 AM

I'm building a site using CSS and am trying to ensure it displays well on IE and Mozilla/safari. I have mnaged to iron out and find workarounds for most of their incompatibilities but I can not find out why Mozilla adds the padding attached to a box to it's overall width whilst IE does not

ie
#box{
width: 100px
padding: 10px
}
will give a box 100 px wide in IE but 120 px wide with Mozilla

why can't all the browsers just get along with each other isn't that why we have w3c standards>

WillyPete · 11-22-2004, 12:48 PM

Does this link have the answer?
http://archivist.incutio.com/viewlist/css-discuss/40185

d*d · 11-23-2004, 04:06 AM

Cheers Willypete this is the second time you've helped me out here, I do appreciate it
the link does kinda help - but only in so far as confirming that there is no easy work around for this problem (at least not till css3 when you will be able choose whether padding is addedd to the width or not, wether microsoft will bother to make their browser compatible remains to be seen) so I have abandoned padding and am using margins around the contents of the box with a separate div tag

welshbyte · 11-23-2004, 05:55 AM

Quote:

Originally Posted by d*d

wether microsoft will bother to make their browser compatible remains to be seen)

I read somewhere that its very unlikely that M$ are going to be making any functionality changes to IE until after longhorn is released. Probably too busy writing patches for the current versions...

WillyPete · 11-23-2004, 06:10 AM

Cool, glad it helped.

I didn't have my magazine with me to give you this, but saw something about the boxmodel hack in Issue 14 Practical webpages for IE5.5 and the xml problem for IE6+.

They mention a hack on this site:
http://www.tantek.com/map.html

And the hack:
http://www.tantek.com/CSS/Examples/boxmodelhack.html

What it is, is IE5.5 places padding on the inside of every html element's containing box, compliant browsers put it outside too.
Thr4, a 200 px wide element with 20 px of padding takes up 20 + 200 + 20 px of space in compliant browsers but just 200px in IE 5.5.

You can use the following code to check for browser and then run the applicable CSS:

HTML Code:

.column {
padding: 20px;
width: 240px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}

sailor · 11-24-2004, 01:10 PM

http://www.quirksmode.org/css/box.html

Check that. Both browsers have different ways of viewing the padding. You can define ways for each browser to handle in the CSS code. Saved my ass more than once.

11-22-2004, 08:29 AM	#1 (permalink)
d*d Addict Join Date: Sep 2004	CSS padding problems I'm building a site using CSS and am trying to ensure it displays well on IE and Mozilla/safari. I have mnaged to iron out and find workarounds for most of their incompatibilities but I can not find out why Mozilla adds the padding attached to a box to it's overall width whilst IE does not ie #box{ width: 100px padding: 10px } will give a box 100 px wide in IE but 120 px wide with Mozilla why can't all the browsers just get along with each other isn't that why we have w3c standards> __________________ see the irony ... SEE IT

11-23-2004, 04:06 AM	#3 (permalink)
d*d Addict Join Date: Sep 2004	Cheers Willypete this is the second time you've helped me out here, I do appreciate it the link does kinda help - but only in so far as confirming that there is no easy work around for this problem (at least not till css3 when you will be able choose whether padding is addedd to the width or not, wether microsoft will bother to make their browser compatible remains to be seen) so I have abandoned padding and am using margins around the contents of the box with a separate div tag __________________ see the irony ... SEE IT

11-23-2004, 06:10 AM	#5 (permalink)
WillyPete Addict Join Date: Jul 2004	Cool, glad it helped. I didn't have my magazine with me to give you this, but saw something about the boxmodel hack in Issue 14 Practical webpages for IE5.5 and the xml problem for IE6+. They mention a hack on this site: http://www.tantek.com/map.html And the hack: http://www.tantek.com/CSS/Examples/boxmodelhack.html What it is, is IE5.5 places padding on the inside of every html element's containing box, compliant browsers put it outside too. Thr4, a 200 px wide element with 20 px of padding takes up 20 + 200 + 20 px of space in compliant browsers but just 200px in IE 5.5. You can use the following code to check for browser and then run the applicable CSS: HTML Code: .column { padding: 20px; width: 240px; voice-family: "\"}\""; voice-family:inherit; width:200px; }

11-24-2004, 01:10 PM	#6 (permalink)
sailor beauty in the breakdown Join Date: Apr 2003 Location: Chapel Hill, NC	http://www.quirksmode.org/css/box.html Check that. Both browsers have different ways of viewing the padding. You can define ways for each browser to handle in the CSS code. Saved my ass more than once. __________________ "Good people do not need laws to tell them to act responsibly, while bad people will find a way around the laws." --Plato

11-22-2004, 12:48 PM	#2 (permalink)
WillyPete Addict Join Date: Jul 2004	Does this link have the answer? http://archivist.incutio.com/viewlist/css-discuss/40185