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... :roll:

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.. :idea:

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