I’ve been working on the same problem for about 4 hours: I’m trying to get some <a href>'s to line up with some <img> tags in an inline menu. I’m going nuts and would love a fresh pair of eyes to help me see the problem.
Thank you very, very much in advance. I will name my first born after you, or give you a kidney. Which ever occurs first. But please don’t be named Francis. And I hope you don’t mind a moderately-taxed organ. j/k
I’d still cut that CSS down further since as a quick test it completely screws up in IE7. (staircase as always)… much less the list-style is on a tag that doesn’t even have that property, redundant declarations, etc, etc.
Though I’m stuck asking just what the devil height is it supposed to be? 28? 34? Make up your mind… NOT that there is any reason it should even be needing a negative margin given the simplicty of the layout. I’d pretend the outer div doesn’t even EXIST and apply everything directly to the UL since all those extra tags aren’t even needed - if you can’t change them in the markup, then pretend they don’t exist!
Also, by not padding #nav on the left the first one ends up 2px narrower on one side, just as the other side padding shouldn’t line up either… Well, you’re using collapse and his .gif, which I’d abandon for a solid full width image for full on hover states, and probably background-colors for images off viewers.
#nav {
list-style:none;
overflow:hidden;
width:958px;
margin:0 auto;
padding:0 0 0 2px; /* separator width !! */
background:url('../images/navigation_separator.gif') no-repeat;
}
#nav li {
display:inline; /* don't even TRY to style these! */
}
#nav a {
float:left;
padding:5px 10px 5px 8px;
font:16px/18px Arial, Helvetica, sans-serif;
text-decoration: none;
color:#797979;
background:url('../images/navigation_separator.gif') top right no-repeat;
}
Something like that… though again I wouldn’t be declaring widths and margin on every blasted element when you’ve got (or should have) a perfectly good outer container to do that ONCE with.
Hi,
What you did with the “p” tags is invalid code. You nested them inside the anchors. An anchor is an “inline” element and a “p” tag is a “block” level. You can’t nest block level elements inside inline elements.
All you had to do was set a line-height on the anchor. That is how I had the text centered in my example.
Just make these tweaks to your css and REMOVE the “p” tags from the html.
I will assume that you are talking to me since that post came right after mine. I missed the fact that the OP moved the list-style to the LI so just relax, I did not have it there in my code from post#6. That is what happens when people pick and pull bits of code and try to piece something together. And besides that it will work either way, whether it is on the UL or the LI. But like you I always prefer to set it on the UL where it technically belongs.
Now, about the staircase bug!
You need to come to terms with it once and for all. Your always crying “Staircase Bug” around here everytime I float an LI. It just so happens that floating the LI is one of the fixes along with display:inline;
The bug is triggered when the LI is left as default (display:list-item) That is what causes the floats to wrap. The staircase effect is triggered when there is a font-size on the “a” larger than the default or inherited font-size of the LI.
Obviously widths on the LI or the “a” can complicate things but they have nothing to do with the bug nor did I use them anywhere in this thread.
>>completely screws up in IE7
There must have been something else going on because this test case of the OP’s current html structure with those fixes I gave does not show anything completely screwed up in IE7.
Though I’m stuck asking just what the devil height is it supposed to be? 28? 34? Make up your mind… NOT that there is any reason it should even be needing a negative margin given the simplicty of the layout. I’d pretend the outer div doesn’t even EXIST and apply everything directly to the UL since all those extra tags aren’t even needed - if you can’t change them in the markup, then pretend they don’t exist!
Jason, Do you not understand that I gave an example of the way I would do it back in post#6. The OP is the one that says he can’t change the html for whatever reason that is I don’t know. The 34 px height on the #topnav div and the UL was set their by the OP. It looks like it was to help him keep the following content out of the bottom 4px worth of shadow on that main BG image.
I would style everything on the UL too, just like I did in post#6. You have to pay attention and realize that every bit of code I post around here is not necessarily the way I would do it. A lot of the time it is a fix that works with the code people are using. I always try to encourage them to eliminate unnecessary elements just as we have both tried to do in this thread. Stop harping on me everytime you see something you don’t agree with, it does not mean that I agree with it either when working with other peoples code.
Also, by not padding #nav on the left the first one ends up 2px narrower on one side, just as the other side padding shouldn’t line up either… Well, you’re using collapse and his .gif, which I’d abandon for a solid full width image for full on hover states, and probably background-colors for images off viewers.
Yeah, I see the padding errors now and I agree.
Thank you for your contributions to this thread. I think I know how to progress now.
Part of the problem, as noted in several posts, is that the HTML is over-engineered. I can’t argue against that. It was designed before I started freelancing for this new client and the programmer/DBA tried to create a one-size fits all layout. I have no control over it. I am literally stuck with the HTML as is.
So this thread is welcome to devolve into poking fun at what I get to work with. I totally get it.
So who gets to have my first born named after him or her? Or was the kidney needed more?
For example, on the menu - you don’t even need that .last class, or position:relative on it, or the negative margin, or a margin at all since what you are doing on the #wrap should be on BODY, etc, etc, etc… I mean the problems even run deeper like a line-height taller than the height, etc, etc…
I agree that the #wrap div was serving no purpose as it was, I was not doing a complete rebuild of the OP’s code at the time. The page just needs two blocks stacked above the main content div, the header and the nav.
As far as the line-height being a little taller than the ul, I think I was just doing some cheating to center the text. That can be fixed by setting a proper height on the header and moving the header/nav BG image to the body as you stated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Demo</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
background:#D0E7F7 url(images/hdr-nav.png) repeat-x;
}
#header {
position:relative; /*containing block if needed*/
width:100%;
min-width:960px;/*same as #nav width*/
height:165px; /*(198px/image)-(28px/ul) keep 3px bottom shadow showing*/
overflow:hidden;/*contain floats and uncollapse child margins*/
}
#nav {
width:960px;
height:28px;
margin:0 auto 3px;/*3px allows the bottom shadow to be visible*/
padding:0;
list-style:none;
background: url(images/divider.gif) no-repeat;
}
#nav li, #nav a {
float:left;
height:28px;/*same as line-height*/
font:16px/28px Arial, Helvetica, sans-serif;
}
#nav a {
padding:0 12px;
color:#797979;
text-decoration: none;
background:url(images/divider.gif) no-repeat 100% 0;
}
#nav a:hover {color:#000}
#content {
width:100%;
min-width:960px;/*same as #nav width*/
overflow:hidden;/*contain floats and uncollapse child margins*/
}
h1 {font-size:1.5em; margin:.75em}
p {margin:1em;}
</style>
</head>
<body>
<div id="header">
<p>All header content nested here, 165px tall</p>
</div>
<ul id="nav">
<li><a href="default.asp">Home</a></li>
<li><a href="bestvalue.asp">Best Values</a></li>
<li><a href="topdestinations.asp">Top Destinations</a></li>
<li><a href="allinclusive.asp">All-Inclusive</a></li>
<li><a href="faq.asp">FAQ</a></li>
<li><a href="myaccount.asp">My Account</a></li>
<li class="last"><a href="contactus.asp">Contact Us</a></li>
</ul>
<div id="content">
<h1>Page Title</h1>
<p>Filler text to hold div open</p>
<p>Filler text to hold div open</p>
<p>Filler text to hold div open</p>
<p>Filler text to hold div open</p>
<p>Filler text to hold div open</p>
<p>Filler text to hold div open</p>
<p>Filler text to hold div open</p>
<p>Filler text to hold div open</p>
</div>
</body>
</html>
is unlocked so you can grab the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a couple of -moz workarounds for gecko STILL being a dumbass about inline-block (even when it claims to now support it), and tested working IE 5.5, 6, 7 & 8, Opera 9.6 and 10.63, FF 2, 3.54 and 3.6, (a lot of people are rolling back to 3.5.4 becuase the web developer toolbar is broken in 3.6), and the latest flavors each of Saffy and Chrome.
If I have time later in the afternoon (company came over) I’ll do a line-by-line breakdown of the decisions I made in rewriting the template. OH, you’ll notice I skipped the content since I assumed that broken mess that didn’t display the same in any browser was VERY WIP.
Oh - and I also made it a 100% min-height layout so the footer will stay stuck at the bottom if the content is shorter than the display, and opened it up to be a semi-fluid layout instead of crappy fixed width. (Not a fan of the fixed width)
I agree with rayzur that yours is quite over-thought out, but his isn’t much better (sorry to say it man) – and the entire page suffers from too many div, too many classes, and generally more markup than you need.
For example, on the menu - you don’t even need that .last class, or position:relative on it, or the negative margin, or a margin at all since what you are doing on the #wrap should be on BODY, etc, etc, etc… I mean the problems even run deeper like a line-height taller than the hieght, etc, etc…
#nav {
list-style:none;
padding-left:2px; /* divider width */
background:url(images/divider.gif) top left no-repeat;
}
#nav li {
display:inline;
}
#nav a {
float:left;
padding:5px 12px 5px 10px;
font:16px/18px arial,helvetica,sans-serif;
color:#797979;
text-decoration: none;
background:url(images/divider.gif) top right no-repeat;
}
Though to use that you’d have to pitch a lot of the existing markup and CSS since it’s knee deep in overthought methodology. Lemme get some lunch in my gullet, and I’ll toss together a rewrite for you to show you what I mean.
Hi,
Your html is way overcooked! Besides all those navid2-6 divs that you have set at visibility:hidden, I see no need for the other two divs wrapping around a UL that could have those styles set on it.
The divider images need to be set as BG images on the LI or the anchors, they are decoration therefore they should be moved to the CSS.
It looks the main BG image is tied into your header so that is what is giving you the 100% width appearance on the UL. One more reason that the ULwrappng divs are not needed.
Your LIs’ are left aligned so there is no need for any inline-blocks in this menu. Just float your LI and anchors left and set a height and line-height on the anchor.
You could set the dividers as BG images on the left side of the anchors and then set that same divider image as a BG image on the right side of the last LI. Just give that last LI an id or a class and that will take care of everything.
Looking at the html of the link you posted it looks like you may have been attempting to build a dropdown menu. I’m not sure what you had in mind for all those other #navid2-6 divs. If you were trying to do a dropdown you just need to nest the sub UL within an LI.
Hope that helps for now
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Demo</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
background:#D0E7F7;
}
#wrap {
width:100%;
}
#topsection {/* Wrapper which includes Main Header Area */
position:relative;
width:100%;
height:198px;
margin:0;
padding:0;
background:url(images/hdr-nav.png) repeat-x;
}
#nav {
position:relative;
width:960px;
height:28px;
margin:-34px auto 0;
padding:0;
list-style:none;
}
#nav li, #nav li a {
float:left;
height:28px;
font:16px/30px Arial, Helvetica, sans-serif; /*30px visible space on hdr-nav.png*/
}
#nav li a {
padding:0 10px;
color:#797979;
text-decoration: none;
background:url(images/divider.gif) no-repeat 0 0;
}
#nav li.last {
background:url(images/divider.gif) no-repeat 100% 0;
}
#content {
width:960px;
min-height:400px;
margin: 0 auto;
background:#FFF;
}
</style>
</head>
<body>
<div id="wrap">
<div id="topsection"></div>
<ul id="nav">
<li><a href="default.asp">Home</a></li>
<li><a href="bestvalue.asp">Best Values</a></li>
<li><a href="topdestinations.asp">Top Destinations</a></li>
<li><a href="allinclusive.asp">All-Inclusive</a></li>
<li><a href="faq.asp">FAQ</a></li>
<li><a href="myaccount.asp">My Account</a></li>
<li class="last"><a href="contactus.asp">Contact Us</a></li>
</ul>
<div id="content">
</div>
</div>
</body>
</html>
I followed your example, tweaked it slightly and in the end, had to wrap paragraph tags around the menu items, then add a margin-top tag to toss them down slightly (they were still floating to the top).
