DIV borders
Moderator: General Moderators
DIV borders
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?
- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
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:but it's been a while since I've had to do specific junk like that.
I believe you would something like:
Code: Select all
descriptor { _height:54px; height: 50px }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...
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...
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
Read this:
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm