Click to See Complete Forum and Search --> : :eek: IE sucks, again... :mad:
toshog
07-15-2005, 01:34 AM
hi all...
padding this time...
like here:
http://guey.el.net/k/tests/02.html
this is the 'make it look decent on ie' version... i knew that b*tch will screw me up again....
i did search for a while on google and according to:
http://www.liewcf.com/blog/archives/2005/05/internet-explorer-padding-and-width/
some smart people in redmond decided to screw everything for the nth time:
"Microsoft decided that padding shouldn’t add to the total actual width of a block-level element, but should subtract from the content display space within the element. The text appears in a more confined space rather than a larger box. Their formula is margin-left, margin-right and width add together to compute actual width. Padding doesn’t play a roll."
i do have a problem with microsoft but for now i just need to know how to make paddings work on most browsers the same way - don't care if the padding is subtracted or added to the box dimensions...
please point me in the right direction... thank you.
--
BonRouge
07-15-2005, 03:05 AM
If you use a complete DTD, you shouldn't have that problem : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">
When I have padding problems I often just cheat. Most people come up with all sorts of silly hacks to fix the "box model" problem as it is known to your average CSS boff. All I do is nest another div tag inside the one I have given a specific width and add the padding to it instead. Sure it means extra markup, do I care? nope!
Most of the time something like:
<div id="mybox">
<h2>mybox title</h2>
<p>
Blah blah blah blah blah
blsh blah blah blah blah
</p>
</div>
has the padding taken care of by a paragraph which, as far as text is concerned, is the way to do it anyway. There really should not be a need for the box model hack, or any reason to run into this problem when you consider that symantically correct markup will always place your content inside an element which you can add the padding to; h1, ul, p, you name it. And, nine times out of ten, these elements are grouped together in the div you have given a width.
toshog
07-15-2005, 06:32 AM
BonRouge:
thanks... if you open the html src of the page you'll notice that i do have the validation. the thing that wasn't there was: "http://www.w3.org/TR/html4/strict.dtd".. now it's there but that doesn't seem to matter...
WoD:
thanks too... i thought about that - i guess i wanted to avoid cheating just because "Microsoft decided that padding shouldn’t add to the total actual width of a block-level element"....
anyway.... it won't be the firest time....
BonRouge
07-15-2005, 06:47 AM
Remove the width from the column style. You don't need it.
DaFonz
07-15-2005, 06:34 PM
Why dont you use the voice family hack?
IE..
#header{
width: 600px; /* (total width including margins for IE5,5.5) */
padding: 0 30px;
voice-family: "\"}\"";
voice-family: inherit;
width: 540px; /* for all the other browsers */
}
html>body #header{
width: 540px;
}
BonRouge
07-15-2005, 07:58 PM
No need for a hack. Just remove the width.
toshog
07-16-2005, 02:18 AM
No need for a hack. Just remove the width.
these are just examples - i need the width. otherwise the box shrinks...
anyway.... another big issue...
2 files with exactly the same code.
http://guey.el.net/k/tests/04.html
http://guey.el.net/k/tests/05.html
EXCEPT: the very first line - (it took me 30 min to figure out why the %@#&!@# these to files don't look the same on the b*tch).
04 works fine on mozilla on any platform. the b*tch displays paddings/margins on the images even when explicitly told that they are zeros and also shrinks the with of "col2" for some reason - which has to do again, i guess, with the b*tch taking borders seriously or not ("col1" has a 2px border on the right side). on the first line that file has a standard validation that comes within every file generated with dreamweaver.
the 05 one has the line BonRouge suggested. that one destroys the list alignment on the menu on any browser - the b*tch and any decent one - but gets rid of the nonexistent paddings/margins of the images in the b*tch case...
i just need a bit of help because this projects starts to feel like a big pain in the behind.... and i blame microsoft for that. really... if i was a billioner i'd sued them by now so many times for so much wasted time and energy... and not only on this project...
thanks a lot... i do appreciate the help i get here.. never mind the b*tching...
BonRouge
07-16-2005, 04:32 AM
You need units in your measurements : ul#nav {
list-style: none;
padding: 5px 18px 1px 5px;
margin: 0;
float: right;
}
toshog
07-16-2005, 11:18 PM
You need units in your measurements
thank you.