Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I am re-doing a nav in CSS and having issues with IE. It's working in FF 1.5 on PC.
The issue with IE is that it shows up vertically rahter than horizontally.
http://mattbillings.com/nav/nav2.html
Anyone know what could be going on?
Side note:
The code is heavily based on an artice from a list apart here:
http://www.alistapart.com/articles/horizdropdowns -
ul li a {
display: block;
border-left:1px solid #C3C3C3;
border-right:2px solid #777B7F;
z-index:1000;
background:#8B8B8B;
color:#FFFFFF;
font-family:arial;
font-size:12px;
text-align:center;
height:21px;
line-height:21px;
padding: 2px 5px;
text-decoration:none;
float: left;
}
That fixed the issue. -
You can also remove the float from
ul li { }
not necessary. -
thanks.
totally missd that.
Why wouldn't the ul li lfat left cascade down?
Is it because the display:block on the ul li a ? -
I don't think floats are inherited... Could be because of the display: block.
-
whoa, familiar faces starting to crop up everywhere nowadays. hi easement.
-
Alright, another question. This one should be easier and more straightforward.
So, I realized that by putting this page in another page, it was going to bork all my other unordered lists, so I wrapped it all in a div with an id of nav . the page is located at: http://mattbillings.com/nav/nav2.html
Now, I'm having issues declaring the styles.
I thought it would simpy be:
#nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 900px; /* Width of Menu Items */
}
#nav ul li {
position: relative;
float:left;
}
However, that doens't work out. Any idea?
yo nifkin: good to see ya. much more signal to noise on this board. we still need to hook up a D.C. meetup. -
I don't see that your css has changed, it is not targeting that specific ID.
-
That's right. when I threw it in there it messes up. So I took it out since it didn't work.
Just realized it help to see the bad code so you can help out. I just put it back in.
The issue, is that I can't align the 2nd tier to the left.
http://mattbillings.com/nav/nav2.html -
#nav li ul {
position: absolute;
top: 25px;
display: none;
left: 0;
} -
Thanks.
So what happened when I put nav in?
Was nave a block element and then each li ul was set relative to to it's parent ul? -
- CommentAuthorNick Presta
- CommentTimeJan 9th 2006
By setting your parent UL (the displayed navigation without the hover) toposition: relative;you then give any child elements a new point of reference, being from the UL itself instead of the body or parent container - which is usually the window. -
we still need to hook up a D.C. meetup.
i was thinking the other night that DC was in serious need of some nerdherd action. have to see who all i can still find contact infoz for... -
Almost there. I need to put a selected state on the top tier when clicked. Basically, I need to change the blackground and font colors.
I tried to specify a new class at the bottom called .nav selected with the changes. However, this didn't work. I tried the actual LI item and then I tried the A tag. However, nothing seems to work.
I think it has something to do with the floats. I tried messing around there and trying some display stuff, but nothing seemes to work.
Here's what ihave now. Click on a top tier item. (I specified a height so you can better see what's going on).
http://mattbillings.com/nav/nav2.html#
I also tried to put the style on the list item as well as on the anchor tag, but that didn't work out either:
linky for the list and anchor with the red border removed. -
Your style for ".nav_selected" isn't specific enough to override the "#nav ul li a" style. Change your css to
#nav ul li a.nav_selected { background-color:#FFF; color:#393939; }and you should be good.
More info on the topic over at CSS: Specificity Wars
-
JohnRiv: Thanks. that worked like a champ.
-
I got a new issue now:
I went to pop it into the existing site and thing went a bit weird. The alignment with the leftmost item went away. Also, in windows the nav items don't all fit on one line and the images pop down even further.
Also, I can't seem to get the menu_bg_bar to show up. The #nav must have some conflicting code, but I can't fid it for the life of me.
http://mattbillings.com/nav/nav5.html# -
- CommentAuthorNick Presta
- CommentTimeJan 10th 2006
You're floating your list items. This is what is causing your background to not appear. To fix this, set the height of the first unordered list and/or add clearing after the last element. -
I gave that a go and the background is not showing up being the Nav. In addition, it's still breaking lines in IE.
I added the folllowing after the UL and before the logout/help page
In addition, i hardcoded the style for the main UL in the ul tag because i wasn't sure how to list in the style sheet due to teh specificity: would it be:
#nav #nav_items{height:25px;}
-or-
#nav_items{height:25px;}
neither worked for me so that's why i hard coded it in.
http://mattbillings.com/nav/nav5.html# -
Alright, I got the bg bapr to pop behind the navigation, but I'm still having the following isues:
1) the logout and help buttons aren't on the same line and i tried clearing and all that good stuff. I moved clear around a bunch of places starting with the last item in the 2nd tier nav and going all the way past the logout buttons. nothing seemd to work. I also tried to float the logout/help right, but that didn't work. moved it up top and then down below. (this is in both FF and IE).
2) the menu items don't fit on one line in IE. They break after reports.
3) the 2nd-tier menu items don't align to the first item like they used to.
same page: http://mattbillings.com/nav/nav5.html# -
getting closer.
lists don't line up and IE is still popping reports down one line.
new page: http://mattbillings.com/nav/nav6.html#
1 to 21 of 21