7 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I'm sketching a centered layout with tabbed navigation. Everything looks good in Firefox, Safari and Internet Explorer (thanks to IE7.js), but Opera 9.25 (Windows and Linux) doesn't want to honor the min-width I applied to the tabs.

This is my html for the navigation:


This is the corresponding CSS:

#nav {
position: absolute;
width: 100%;
background: #2F9CBB;
color: #FFFFFF;
margin: 0 auto;
white-space: nowrap;
text-align: left;
background: #2F9CBB url(cont_topo_sombra.gif) repeat-x bottom;
}

#menu{
float: right;
margin-right: 25px;
}

#menu li{
float: left;
background: transparent url(proj_d.gif) no-repeat top right;
}

#menu li+li {
margin-left: -2px;
}

#menu a {
display: block;
min-width: 107px;
padding: 16px 15px 12px 15px;
font: bold 0.825em Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
text-decoration: none;
background: transparent url(proj_e.gif) no-repeat top left;
}

#submenu {
position: absolute;
padding: 5px 0 10px 10px;
margin: 0 0 0 3px;
background: #F12121;
background-image: none;
}

#submenu li {
float: none;
padding: 0;
margin: 0;
background-image: none;
}

#submenu li+li {
margin: 0;
}

#submenu a{
display: block;
font: normal 0.6875em Verdana, Arial, Helvetica, sans-serif;
padding: 5px 0 0;
margin: 0;
background-image: none;
min-width: 120px;
}

Online example here: http://enfado.textdriven.com

Opera is not respecting the min-width: 107px directive in #menu a.

Can anyone figure out why? Am I doing something wrong?

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 3 years 39 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I'm not really familiar with

I'm not really familiar with Opera or the min-width property, sorry. But, why don't you just set a width of 107px? It doesn't appear that any of the tabs are wider than that...

guictx (not verified)
Anonymous's picture
Guru

Fluidity

I want the tabs to grow if the user changes the text size. If I use width they don't do it.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 3 years 39 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I see. Not sure on this

I see. Not sure on this issue though, sorry.

However, the right-most tab breaks after 6 resizes in Firefox currently, just so you know.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 9 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Because anchors aren't block

Because anchors aren't block level by default, it seems like Opera has trouble calculating what width they should be if it's not set explicitly. But you don't need a width or min-width anyway - the tabs will expand in size with the text if you don't specify either. In fact, that's the whole point of the sliding doors approach.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

guictx (not verified)
Anonymous's picture
Guru

Well but my anchors (#menu

Well but my anchors (#menu a) have the display set to block so it should work.

As for the min-width, I'm using it because I want all the tabs to start with the same size.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 9 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Then use width and change

Then use width and change your pixel value to ems instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

guictx (not verified)
Anonymous's picture
Guru

Exactly

It works perfectly!!

I keep forgetting that em's exist...

Thank you Tyssen.