Opera CSS Issues

Post by **caughtatwork** » 09 February 05 7:40 pm

Guys.

Not sure if you have ever noticed, but in Opera the header section, all of the tabs are squeezed up on the right and are not useable.

The CSS changes below should fix this problem. It looks like an absolute position problem in conjunction with float:right.

I can't test the whole thing but I have run some tests on IE, Opera, Firefox and Netscape and it 'appears' to solve the problem.

I had to dick around with some of the padding to replicate the absolute positioning, but you may need to do a final change on some of the padding if the tabs are out a bit.

Please test it before implementing.

Regards.

OLD CSS:
------------

#header ul {
width: auto;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0 15px 0 0;
list-style: none;
background: url("/pics/header_br.gif") no-repeat bottom right;
z-index: 110; /* below the H1 */
}
#header li {
float: right;
background: transparent url("/pics/header_tab.gif") 100% -600px no-repeat;
padding: 0 6px 0 0;
margin: 0 1px 0 0;
border-bottom: 1px solid #515358;
}
#header ul a {
float: left;
display: block;
padding: 4px 4px 4px 10px;
background: transparent url("/pics/header_tab.gif") 0% -600px no-repeat;
font-weight: bold;
color: #fff;
text-decoration: none;
}

NEW CSS:
------------

#header ul {
width: auto;
bottom: 0;
right: 0;
margin: 0;
padding: 25px 15px 0 0;
list-style: none;
background: url("/pics/header_br.gif") no-repeat bottom right;
z-index: 110; /* below the H1 */
}
#header li {
display: inline; // New Attribute
width: auto; // New Attribute
float: right;
background: transparent url("/pics/header_tab.gif") 100% -600px no-repeat;
padding: 0 0 0 0;
margin: 0 1px 0 0;
border-bottom: 1px solid #515358;
}
#header ul a {
float: right;
display: block;
padding: 4px 4px 4px 10px;
background: transparent url("/pics/header_tab.gif") 0% -600px no-repeat;
font-weight: bold;
color: #fff;
text-decoration: none;
}

Mind Socket · Post by **Mind Socket** » 10 February 05 9:13 am

Thanks for the detailed research. Not sure when we'll get a chance to look at it, especially since we're probably going to redo the navigation altogether, so in the meantime can you let me know what version of Opera you are using?

Based on the information at ...
http://www.quirksmode.org/css/tests/opera_float.html
... I'd like to suggest trying the latest version (if not already) and/or the workaround described at the bottom.

Cheers,
- Rog

Post by **caughtatwork** » 10 February 05 9:30 am

I was using 7.11
I am now using 7.54
All is fine.

The workaround you suggested is essentially what I did, although I didn't get it from that page.

I suppose if you are using an older version of Opera some people may still experience the problem.

Maybe in the FAQ section you could include a suggestion that Opera versions prior to 7.54 may experience issues with the header layout.

Regards.

ideology · Post by **ideology** » 12 February 05 7:12 am

we applied your changes but it stuffed up all the tabs when viewed in firefox, so unfortunately we had to go back to how it was

as mind socket says, we're planning to change the header navigation and probably go with a pretty simple approach with limited css, so hopefully the problem will go away