Forum Moderators: not2easy
I have a horizontal navbar resting on top of the main content section, at each end of the bar is a small floated image (not present in the test case as the bug still appears without them). The navbar comprises of an unordered text list and on hover the background image is moved up 20 pixels to change colour (replaced by a simple colour change for the test case).
In Firefox and IE the navbar displays correctly with no problems. In Opera, the last element is missing (in the test case you can see that it has been forced onto the next line, directly below where it should be).
The bar is obviously wide enough to accommodate it, but it doesn't want to. I can almost fix it by making the li padding wider left and right, and making the width smaller. However as soon as it displays, I'm left with an ugly gap to one side in all browsers (Opera included).
The following test case is as compact as I could make it while remaining readable, hopefully this is short enough to be usable. The bug has been tested and exists in Opera 9.27, 9.50 and 9.51; it probably also exists on lower versions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ><style type="text/css">
<!--
@charset "utf-8";
/*-------MAIN------*/
body
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}
/*-------SUBNAV------*/
#subnav
{
height: 20px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
position: relative;
top: 10px;
width: 754px;
}
#subnav-right
{
background-color:#0066FF;
display: inline;
float: right;
height: 20px;
width: 2px;
}
#subnav-left
{
background-color:#0066FF;
display: inline;
float: left;
height: 20px;
width: 2px;
}
#subnav ul
{
display: inline;
clear: both;
}
#subnav li
{
display: inline;
padding: 2px 0px 0px 0px;
}
#subnav a
{
background-color: #0066FF;
color: #FFFFFF;
display: block;
float: left;
height: 18px;
padding: 2px 0px 0px 0px;
text-align: center;
width: 125px;
}
#subnav a:hover
{
background-color: #000000;
}
/*-------CONTENT------*/
#content
{
background-color: #121212;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;
position: relative;
text-align: justify;
top: 10px;
width: 734px;
}
-->
</style>
</head>
<body>
<div id="subnav">
<span id="subnav-left"> </span>
<span id="subnav-right"></span>
<ul>
<li><a href="#">news</a> </li>
<li><a href="#">about</a> </li>
<li><a href="#">download</a> </li>
<li><a href="#">media</a> </li>
<li><a href="#">developers</a> </li>
<li><a href="#">support</a> </li>
</ul>
</div>
<div id="content">
Test content, more test content. Test content, more test content.
</div>
</body>
</html>
Hope somebody could help, if any further explanation is needed, don't hesitate to ask. Thanks in advance.
