Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts

    element height & width in Firefox

    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.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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/listutorial/
    also:
    http://css.maxdesign.com.au/floatuto...torial0613.htm (tutorial #6)

    Hope this helps,
    Last edited by rmedek; 02-12-2005 at 05:24 PM. Reason: added link

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    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?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    could try display:inline; instead haven't used it much, so i dunno if it will work or not

  • #6
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    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!

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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!

  • #8
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    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?

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yes.

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

    http://alistapart.com/articles/slidingdoors/

    Hope this helps,


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •