|
11-22-2004, 07:29 AM
|
#1 (permalink) |
|
Addict
|
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> |
|
|
11-22-2004, 11:48 AM
|
#2 (permalink) |
|
Addict
|
Does this link have the answer?
http://archivist.incutio.com/viewlist/css-discuss/40185 |
|
|
|
11-23-2004, 03:06 AM
|
#3 (permalink) |
|
Addict
|
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 |
|
|
|
11-23-2004, 04:55 AM
|
#4 (permalink) | |
|
Insane
Location: Wales, UK, Europe, Earth, Milky Way, Universe
|
Quote:
__________________
There are only two industries that refer to their customers as "users". - Edward Tufte |
|
|
|
|
11-23-2004, 05:10 AM
|
#5 (permalink) |
|
Addict
|
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, 12:10 PM
|
#6 (permalink) |
|
beauty in the breakdown
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 |
|
|
| Tags |
| css, padding, problems |
|
|
