Tilted Forum Project Discussion Community  

Go Back   Tilted Forum Project Discussion Community > Interests > Tilted Technology


 
 
LinkBack Thread Tools
Old 11-22-2004, 07:29 AM   #1 (permalink)
d*d
Addict
 
d*d's Avatar
 
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>
d*d is offline  
Old 11-22-2004, 11:48 AM   #2 (permalink)
Addict
 
Does this link have the answer?
http://archivist.incutio.com/viewlist/css-discuss/40185
WillyPete is offline  
Old 11-23-2004, 03:06 AM   #3 (permalink)
d*d
Addict
 
d*d's Avatar
 
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
d*d is offline  
Old 11-23-2004, 04:55 AM   #4 (permalink)
Insane
 
Location: Wales, UK, Europe, Earth, Milky Way, Universe
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...
__________________
There are only two industries that refer to their customers as "users". - Edward Tufte
welshbyte is offline  
Old 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;
}
WillyPete is offline  
Old 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
sailor is offline  
 

Tags
css, padding, problems

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



All times are GMT -8. The time now is 01:54 AM.

Tilted Forum Project

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0 PL2
© 2002-2012 Tilted Forum Project

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360