Opera CSS Issues
Posted: 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;
}
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;
}