css problems(well duh..)

[danm68]

Hi all..im new round here..and have questions! :)first of all..my problem is with a css tutorial i found on a website..greycobra.com and the tutorial can be found by going to 'tutorials database' in the left hand nav section, and then clicking on html and css. and go to my first css website or something...part 1..ok right..found it so heres the link http://www.greycobra.com/tutorials/creatin...ite/page-1.html. and my problem is with a section in the tutorial..in either part 1 2 3 or 4. it tells you to insert a 'quote' style which is as follows...quote{ width:100%; background-color:#EEE; color:#000; font-size:8pt; font-weight:bold; padding:2px; border-bottom:1px solid #000; text-align:right;}i do get all this (believe it or not!) but when i view in mozilla firefox browser, i think it interprets it as..100% width and then the padding pushes the width out that extra bit...i did view this in IE and it works fine..but since it doesnt work in FF i know what to know why??? (i am one of those people..have to know whats wrong and how to fix it ) i tried 2 px right margin to keep it away from the border but that doesnt work because width overrides i think... and if you stick width to auto then it works..but i NEED to know why it does that..or if theres a 'legible' way to fix it..with width 100% and padding 2px...but if there is no way then ill just keep it auto....also the width doesnt make sense anyway...because text is aligned right and color goes for whole row...but still i would like to know so any ideas or pro help is greatly appreciated..and if you want i can stick the whole site up on a free host or something and give you link...or in part four of the tutorial is the full source code so just copy n paste away. Thankyou!Note: i think the links in the tutorials are broken.. so when at the bottom of page..it says 'part two' instead of clicking that link...just change ...first-css-website/page-1.htm.. to first-css-website-part-2/3/4 (whichever your up to)/page-1.htm...all done...

[aspnetguy]

you will find that IE and FF interpret 100% differently when dealing with width and height. There is nothing you can do about except find ways around it.

[danm68]

you will find that IE and FF interpret 100% differently when dealing with width and height. There is nothing you can do about except find ways around it.

K thanx...but thats the thing..i dont know a way around it..so does anyone? or just leave width auto or w/e..still thanks for replying.

[[Coyot3]]

Hi, i supose that you are getting a common problem and the origin is the diferent box model between IE and FF.You can check here how it works.The page box is a special kind of box that is described in detail here.A lot of times you will have to use what we call "hack" to get (almost) the same result with (almost) all browsers.Take a look here to try to solve your problem.Paulo A. Silva

[aquatsr]

Oh yes, hacks... took me quite a lot of hours and... mild expletives towards IE to get the job done.

[danm68]

im pretty sure thats it..but i dont have a fixed pixel width for the quote section so ill just keep it width:auto;..but its just a tutorial..and was just wondering if anyone knew how to fix it, (which people do but im too lazy to make it work..lol) so thanks for all the help and ideas..and fast replying..i like it. Hopefully i can return the favour to somebody soon.