I am using a simple list as navigation which brings up the appropriate background image depending on the state of the link normal, hover or current. In IE6 the current or actual page is being ignored, not displaying the different image and leaving the link active. The code is -
<div id="mainNav">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
The CSS for the navigation is -
#topcontent1 #mainNav {
position: absolute;
left: 86px;
width: 328px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.9em;
padding: 0px;
clear: both;
color: #666633;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: 700;
text-transform: uppercase;
}
#topcontent1 #mainNav ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#topcontent1 #mainNav li {
float: left;
margin: 0;
padding:0;
display: block;
}
#topcontent1 #mainNav li a:link, #topcontent1 #mainNav li a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color: #fff;
text-decoration: none;
display: block;
background-repeat: no-repeat;
margin-right: 10px;
width: 99px;
height: 62px;
margin-top: 0px;
line-height: 62px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0;
text-align: center;
padding-top: 60px;
background-image: url('../images and html/images/tabnorm.jpg');
}
#topcontent1 #mainNav li a:hover {
color: #f8b449;
border: none;
background-image: url('../images and html/images/tabhover.jpg');
background-repeat: no-repeat;
}
#topcontent1 #mainNav ul li a.current {
color: #AAB3B2;
background-image: url('../images and html/images/tabcurr.jpg');
background-repeat: no-repeat;
}
#topcontent1 #mainNav ul li a.current:hover {
color: #AAB3B2;
cursor: default;
}
The #topcontent1 #mainNav ul li a.current style is seemingly being ignored by IE6.
can anyone see an issue or suggest a work around
IE6 seems to have problems with complicated selector statements. maybe try using
#mainNav a.current
instead of
#topcontent1 #mainNav ul li a.current
Change this in your code
#topcontent1 #mainNav li a:link, #topcontent1 #mainNav li a:visited {
to
#topcontent1 #mainNav li a {
Related
All my li elements allying at the same spot on on top of the other even tho they are supposed to use the display block.
The nav bar simply displays the sub-menu under the regular menu, but all the ul,li are on top of each other.
<ul class="navbar">
<li class="left">Scripts
<ul>
<li>
test1
</li>
<li>
test2
</li>
<li>
test3dfgdsfgdfsg
</li>
<li>
test523542352543253q4teargt
</li>
</ul>
</li>
Yes i know the code is very messy
ul.navbar {
list-style: none;
bottom: -30px;
padding: 0;
}
ul.navbar li.right {
float: right;
line-height: 14px;
display: block;
}
ul.navbar li.left {
float: left;
line-height: 14px;
display: block;
}
ul.navbar li a {
display: block;
color: #FFF;
font-size: 20px;
line-height: 14px;
text-decoration: none;
background: #3366CC;
margin: -30px 0 0 0;
padding: 10px 25px;
}
ul.navbar li ul {
list-style-type: none;
}
ul.navbar li a:hover {
background: #4075DE
}
ul.navbar li ul li a {
display: none;
color: #FFF;
font-size: 20px;
position: absolute;
margin:0px;
}
ul.navbar li:hover ul a{
display: block;
margin-left:-40px;
}
Remove position: absolute on the a{}
http://jsfiddle.net/v1kq7dva/
ul.navbar {
list-style: none;
bottom: -30px;
padding: 0;
}
ul.navbar li.right {
float: right;
line-height: 14px;
display: block;
}
ul.navbar li.left {
float: left;
line-height: 14px;
display: block;
}
ul.navbar li a {
display: block;
color: #FFF;
font-size: 20px;
line-height: 14px;
text-decoration: none;
background: #3366CC;
margin: -30px 0 0 0;
padding: 10px 25px;
}
ul.navbar li ul {
list-style-type: none;
}
ul.navbar li a:hover {
background: #4075DE
}
ul.navbar li ul li a {
display: none;
color: #FFF;
font-size: 20px;
position: absolute;
margin:0px;
}
ul.navbar li:hover ul a{
display: block;
margin-left:-40px;
}
Position absolute places the element at 0,0 in it's container, so if you put it on something then don't specify the location, everything ends up on top of eachother.
my problem is that i have styled my navigation bar with a block/button style graphic. that works just fine it's just when i put any tags it resorts to that styling? is there a way on the css style sheet to stop that style and having a different one. i've had this problem on other pages too, but it didnt end up being a problem. can anyone help?
css:
nav {
position:relative;
z-index:3;
position: absolute;
margin-left: 420px;
margin-top: -15px;
float: right;
}
ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
li {
float: left;
margin-top: 0px;
}
a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
html: just an unordered list
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
It's not clear what your question is, but I'm sure what you want to do is easy enough. Sounds like you need to add a class or ID to your elements, or to make your CSS more specific. E.g.
nav ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin-top: 0px;
}
nav a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
Simply make your CSS selector more specific by making it only select <a> elements that are descendants of <nav>:
nav a:link,
nav a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,
nav a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
I'm trying to make my website's menu elements next to each other with the display: inline-block. I've tried it in different parts of my CSS menu, like at the 'cssmenu li' etc, but it doesn't work. Somebody knows how to help me?
The CSS:
#cssmenu {
border: none;
border: 0px;
margin: -17px;
padding: 0px 0px 0;
font-family: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 19px;
font-weight: none;
float: left;
width: 600;
margin-left: 300px;
z-index: 999;
position: fixed;
}
#cssmenu ul {
background: #fff;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
display: block;
float: left;
padding: 0px;
}
#cssmenu li a {
background: #fff url('seperator.png') bottom right no-repeat;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #000;
}
#cssmenu ul ul a {
color: #000;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #fff url('hover.png') bottom center no-repeat;
color: #ddd;
text-decoration: none;
}
#cssmenu li ul {
display: none;
background: #fff;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;*/
/*left:0px;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('sub_sep.png') bottom left no-repeat;
float: auto;
margin: 0px;
display: block;
padding: 0px;
width: 225px;
background: #hhh url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
}
#cssmenu li:hover li a {
background: none;
color: #000;
font: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #fff url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
You can make it with #cssmenu li {display: inline block;} and #cssmenu li a {padding: 0 16px;} but your html is wrong. Check your ul's and li's again. You need:
<div id="cssmenu">
<ul>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
</ul>
</div>
I've created a drop down menu using css where the drop down appears as a horizontal row instead of a vertical list. My only problem is that the drop down menu does not line up with the rest of menu. I want it to be flush with the left side of the navigation bar.
The page is up at this address: http://concept82.com/CBHweb/index2.html
The code for my drop down menu is:
#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
#nav {
margin: 1px;
padding: 0px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
color: #FFFFFF;
font-size: 14px;
text-align: center;
margin-top: 5px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
width: 140px;
}
#nav li a:hover {
color: #201E30;
}
#nav li ul {
display: none;
}
#nav li ul a{
width: auto;
font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-right: 1px solid #594361;
padding: 0px 15px 0px 15px;
margin-top: 3px;
margin-bottom: 3px;
white-space: nowrap;
}
#nav li.first, #nav li.hover li.first {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-left: 1px solid #594361;
padding: 2px 15px 2px 5px;
margin-top: 3px;
white-space: nowrap;
}
#nav li:hover li a, #nav li.hover li a {
color: #201E30;
background-color: #FFFFFF;
}
#nav li li a:hover {
color: #201E30;
}
Thanks ahead of time!
You should change position of #navholder as relative.
#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
When you define the ul when hovering on the list you specify left as 0 px, aligining it to the left of the page, change it to your margin width then it will be in the right place
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
I'm having a weird problem with my navigation in IE 6. Only the first and last links of the navigation bounce when hovered over.
Why would this be happening?
My CSS file:
#navigation {
width: 930px;
height: 30px;
background-color: #f1faff;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 30px;
}
#navigation ul li {
display: inline;
}
#navigation ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #0067b4;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #5e5e5e;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a.first {
padding-left: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
#navigation ul li a.last {
padding-right: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
The site where this is happening is available at http://www.paysonsecure.com/protekskiracing/
I would add this to your global-ie6.css
#navigation ul { display: inline-block; }
Thanks gutierrezalex!! I had the same problem and it works adding {display: inline-block;} at my styles..it works for any browser:
ul.menu li a{
text-decoration:none;
color:black;
display:block;
padding:0;
margin:0;
display:inline-block;
}
ul.menu li a:hover{
background-color:#5cc2ed;
color:#ffffff;
display:inline-block;
}