Page 1 of 1
DIV borders
Posted: Wed Feb 01, 2006 3:50 pm
by Ree
Say I have a DIV and set its height to 50px in my stylesheet. I also give it border-top: 2px and border-bottom: 2px. In Firefox, the DIV's total height is 50px + 4px while in IE it's 50px. How do I make both browsers display the div identically?
Posted: Wed Feb 01, 2006 4:14 pm
by feyd
CSS hack. There are various means to do them, each for variants of the browsers on differing operating systems or versions.
I believe you would something like:
Code: Select all
descriptor { _height:54px; height: 50px }
but it's been a while since I've had to do specific junk like that.
Posted: Wed Feb 01, 2006 4:25 pm
by Ree
Bah I hate this hacking stuff, my CSS won't validate. I guess I'll just have to live with the extra pixels in FF...
Btw, adding display: table-cell property for the DIV, it does make FF display the DIV the same way IE displays it (50px height). The problem is then I cannot put two (or) more similar DIVs with this property one below another...
Posted: Wed Feb 01, 2006 4:45 pm
by feyd
You could use Javascript to "tweak" the CSS information after loading has completed..

Posted: Wed Feb 01, 2006 4:45 pm
by neophyte
I recently had this problem myself. The solution I found was to put margin/padding/border assignments inside of a postioned container. Once I did that it resolved those errors.
Read this:
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm