View Full Version : element height & width in Firefox

02-12-2005, 06:07 PM
I'm having a problem with the following page http://www.njsims.com/test.html

Basically I'm redesigning my site so I just whipped up a quick test of a nav idea (hence the inline style sheet). I looks fine in IE and Opera but in Firefox the height and width of the navbuttons defaults to the size of the text, rather than the size of the element in the css.

Both my html and my css validate.

Its really important that it renders correctly in firefox since they account for nearly 15% of my sites visitors.

02-12-2005, 06:22 PM
Hi Nancy,

You have to use "display: block" on the anchors; links are inline by default, so the height and width is the height and width of the text, unless you make it a block-level element. Then you can give it whatever height and width you want.

What you're doing is pretty commonly marked up now as a unordered list... here's a great site that explains the whole process:

http://css.maxdesign.com.au/floatutorial/tutorial0613.htm (tutorial #6)

Hope this helps,

02-12-2005, 10:48 PM
or the other possible problem, u used pt instead of px for the font-size, doing this allows the browser to use the font size according to the default font size which varies across browsers, try using px instead, while still using the display block as previously suggested

02-13-2005, 10:16 AM
I put in the display:block and it worked great, except my tabs now stack one on top of the other :s any ideas how to get them back in a straight line?

02-13-2005, 10:31 AM
could try display:inline; instead haven't used it much, so i dunno if it will work or not

02-13-2005, 11:58 AM
with just the display:inline; in firefox it went back to not having the right height and wdith but I went with the <ul> route and it worked great!

02-13-2005, 07:15 PM
Yeah, I forgot to mention, once the height and width is assigned you have to get it to line up... the tutorials mentioned that, though. Glad you got it working!

02-14-2005, 04:11 PM
kinda related to that is it possible to stretch/shrink the background image to fit its contents?
On a different site we're using graphical form buttons bascially the 2 things I need to do is make the images work as submit buttons when you press return and the second thing is to change the rollovers to CSS rather than javascript and I want to just use 1 background image and 1 rollover for all the buttons rather than having different sized buttons and classes for each button. Is that possible?

02-15-2005, 11:52 PM

Try this link for some ideas of how to get one common background image(s) to resize and rollover.


Hope this helps,