Global navigation tabs CSS width/height issue in Firefox 2

[Lars Löwenadler]

This CSS should be familiar to most of you:

ul#portal-globalnav li a { ... }

When testing my Plone 3 site (currently developing offline), I notice that Firefox 2 won't take any notice of the CSS width and height properties. I'm specifying the global navigation tabs to look like 72px * 72 px boxes, which works in every browser (even IE6...), except Firefox 2 where the tabs simply take a shape adjusted to the text they're containing: minimal height and width equal to the text. Adding !important makes no difference.

Grateful for workaround/fix advice...

Lars

[Espen Moe-Nilssen]

Some javascript/style in this post has been disabled (why?)

Any reason the height is not set on the li?

If yes, you probably need to add:

display:block

consider also to set: 

line-height 

Espen Moe-Nilssen

_______________________________________________

Author of Subskins III , build your own theme for Plone. Try it at:

http://subskins.medialog.no

Den 21. sep. 2009 kl. 14.02 skrev Lars Löwenadler:

This CSS should be familiar to most of you:

ul#portal-globalnav li a { ... }

When testing my Plone 3 site (currently developing offline), I notice that

Firefox 2 won't take any notice of the CSS width and height properties. I'm

specifying the global navigation tabs to look like 72px * 72 px boxes, which

works in every browser (even IE6...), except Firefox 2 where the tabs simply

take a shape adjusted to the text they're containing: minimal height and

width equal to the text. Adding !important makes no difference.

Grateful for workaround/fix advice...

Lars

-- 

View this message in context: http://n2.nabble.com/Global-navigation-tabs-CSS-width-height-issue-in-Firefox-2-tp3684792p3684792.html

Sent from the User Interface & Design mailing list archive at Nabble.com.

_______________________________________________

UI mailing list

[hidden email]

http://lists.plone.org/mailman/listinfo/ui

_______________________________________________
UI mailing list
[hidden email]
http://lists.plone.org/mailman/listinfo/ui

[Lars Löwenadler]

First of all; I discovered that the ul part of ul#portal-globalnav li a { ... } seems to be unnecessary so I removed it and typed simply #portal-globalnav li a { ... }. As for your first question; with the properties I use it works best to put it all in #portal-globalnav li a { ... }. Moving some properties to an expression of #portal-globalnav li { ... } won't work, as it seems.

Anyway, here's the full code I use (it's the same as before except for the ul-part):

#portal-globalnav li a {
      background: url(/plone-site/portal_skins/images/button.png);
      _background: url(/plone-site/portal_skins/images/button_IE6.png);
      border:1px solid #c1c1c1;
      display:inline-block;
      padding:1px;
      height:72px;
      width:72px;
      vertical-align:top;
}

I discovered that inline-block may be the problem here, according to this chart it doesn't work in Firefox 2: http://www.quirksmode.org/css/display.html

Adding line-height didn't help either...

Thanks,
Lars

Espen Moe-Nilssen wrote:

Any reason the height is not set on the li?

If yes, you probably need to add:

display:block

consider also to set:
line-height



Espen Moe-Nilssen
_______________________________________________

Author of Subskins III , build your own theme for Plone. Try it at:
http://subskins.medialog.no

[Lars Löwenadler]

Update; I have now resolved the issue. There seem to be a few properties that all together make it work. One important part was to drop the display:inline-block and settle with display:block as Firefox 2 doesn't understand inline-block. Also, it was actually more successful to use #portal-globalnav li a {...} instead of #portal-globalnav li {...}.

Here's the full code:

#portal-globalnav {
      margin: -105px 8px;
      _margin: -100px 0px;
      padding: 0;
      height: 72px;
      text-align: right;
}

#portal-globalnav li a {
      background: url(/plone-site/portal_skins/images/button.png);
      _background: url(/plone-site/portal_skins/images/button_IE6.png);
      border:1px solid #c1c1c1;
      display:block;
      padding:1px;
      margin:0.5em 0.5em 0em 0.5em;
      height:72px;
      width:72px;
      vertical-align:top;
      float:right;
      line-height:1.5em;
}

This code should render correct boxes in all browsers, including IE6 and Firefox 2.

(By the way, thank you Espen for the personal email reply.)

Regards,
Lars