DIV borders

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

DIV borders

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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...
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

You could use Javascript to "tweak" the CSS information after loading has completed.. :idea:
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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
Post Reply