View Full Version : My left nav KILLED EVERYTHING

12-22-2009, 09:15 PM
Okay, so . . . my site is http://www.SeraphSwords.com (or the one in question is). We're working on expanding our inventory from about 20 items to about 150 items, and as part of that, we wanted to revamp the design.

We're really happy with how the design looks . . . except there's been a major problem in implementation. Well, lots of problems. We've tried a bunch, and nothing's worked.

The left navigation makes the rest of the site go all skiwampus (sp?). You can see where it's at right now at http://www.seraphswords.com/v4. It's almost exactly where we want it to be, except our footer is now appearing right below the banner, and the content_bg image isn't appearing for most of the text on the site.

It's like it's not recognizing the main content area as being there. I don't know why, and after 14 or so hours of trying to fix it, I definitely need help. Assist?

12-22-2009, 09:20 PM
It's always the simple stuff. Try adding clear:both; to your style for #footer2 and see if that fixes it.

Adding overflow:auto; to #container fixes the BG, but your menu is stuck in the header...

12-22-2009, 09:24 PM

But it's not centered now, and we're still not getting our background image.

Edit: Okay, the background's there too, but my footer isn't centering. It's fixing - as if I'd positioned it absolute. Ideas?

12-22-2009, 09:27 PM

But it's not centered now, and we're still not getting our background image.

Add this to the footer's CSS:


That should center the footer again.

Also, it looks like if you grab all of the HTML for #nav2 and move it to the END of #container you will have everything right where you intended.

12-22-2009, 09:30 PM
Awesome! Now there's only one problem left that I've caught. In IE, the menu goes a little funky with all these fixes. See the attached image for that.

Any addition gems?

Edit: Also, apparently when the page content is too short for the navigation itself, it goes a little trippy. For example: http://www.seraphswords.com/v4/lotr/

Your help has saved me a MASSIVE headache so far. Thanks so much!

12-22-2009, 09:35 PM
Awesome! Now there's only one problem left that I've caught. In IE, the menu goes a little funky with all these fixes. See the attached image for that.

Any addition gems?

Ack! It's the <hr /> tags. Those things are a nightmare. I'd replace those with a bottom border on your <i> tags instead. Use line-height or bottom padding to increase the distance between the text and that bottom border, if you so choose.

#nav2 i {border-bottom:1px solid #fff;padding-bottom:7px;}

The <hr /> tags do not play well cross-browser at all. Most people avoid them like the plague.

Also, there is an empty <li> element in front of the "community" <li> which is forcing that over by 50px or so. You'll need to wipe that out.

12-22-2009, 09:51 PM
Awesome. That fixes that issue. Any idea on the pages like http://www.seraphswords.com/v4/lotr/ ?

12-22-2009, 09:58 PM
Yes, but I'd rather you ask questions to figure them out for yourself. Do you understand how and why everything we have done so far has worked?

If so, then you can figure out this next page. If not, then you should be asking questions. :D

12-22-2009, 10:16 PM
Heh . . . yeah yeah. You wanna teach me to fish. I get it. . . .

I'm really not sure with this one. I'm still in that very "experimental stage" with learning this code - trying things and seeing if they work.

I found A way - but I never know if my ways are good ways. XD

I put the text in a div, and padded it a couple hundred pixels in either direction. If there's another way I should be looking for a better answer, I would love it if you could at least point me to the vicinity. ^_^

12-22-2009, 10:47 PM
Hmm. Well, I will press on then. We are already in the exact vicinity that you need to be in to fix this.

Do you know what floats are (yes, but do you really know) and, more importantly, HOW they work with respect to other elements in the page?

Why did clear:both; help us? Why did overflow:auto; help us? They were both solutions to issues caused by floated elements. Why did we have to move the HTML for the navigation down below the HTML for the content?

If you can get to the core understanding of these principles then the solution to the problem on the lotr page will be well within your reach. Learning about the box model is a pretty good idea at this stage in your web development practice anyway and real-world problems are the best way to practice.

While I won't tell you explicitly how to solve this next page I will add that using enormous amounts of padding and/or negative margins usually indicates a problem with the approach. There are very, very, very (very) few times that using negative margins is really the "right" way to do something. It's not uncommon for newer CSS initiates to use them, but it is bad practice. This is especially true when a developer starts adding unnecessary <div> elements just to meet a display goal (commonly referred to as "divitis" around here). This page in specific can be fixed WITHOUT any funny padding or margins at all. I fixed it up on my local machine and I believe all I had to do was remove one overflow statement and then add an overflow statement or two (and maybe a clear) and the whole thing fell into place. You have seen the tools already - we just need to teach you how, why, and when to use them. But first you have to want to know, so...yeah.

Oh, and three last parting pieces of wisdom for today:

When building a website it's best and easiest by far to create a template. Then all you ever have to do is change the content since the header, footer, and menus are all already standardized. This will be a helpful mindset once you begin to delve into PHP. Making your code modular is the smartest thing you can do in the early stages.
All HTML should be run through the W3C Validator (http://validator.w3.org/) and poked/prodded until clean. This should be done before ironing out any last wrinkles in the CSS since browsers won't always handle CSS the same way AFTER validation as they do beforehand. Validating your HTML first (and validating your CSS next) is essential for consistent display across browsers.
You might already be doing this, but if not, always build, test, and debug in FF then tweak/hack where needed for IE. Download and use the Firebug plugin for FF and live happily ever after.

12-24-2009, 07:47 AM
So, here's what I've figured out.

Overflow is telling the browser how to treat things when the elements don't fit within their containing divs. Scroll means scrollbar, visible is that it'll show anyway, but it'll topple it out of the div. Auto makes it so it fills the area fully, and adds a scrollbar only if it would normally overflow the designated area. Except . . . well, I'm obviously not getting some things. I did a bit of digging, but I still seem to be missing the point.

I added the overflow to the content section. Just overflow:auto; for the sake of getting the content in the content section to fill up the designated area, which should be determined by the length of the navigation if its not determined by the longer content. And this worked on Firefox and Chrome! But IE still adds the scrollbar, and I just don't know why.

Also, I don't know where on earth I'd use clear. Clear is to say "nothing can float to the left or right of this" (or both), and prevent things from trying to float on top of each other, best I can tell. I just don't know how to use that.

And I got rid of all my negative margins for a bit, see if I could tweak those. A lot were present just because I did sucky work and was undoing my own stuff. So most of that got resolved. I also figured out some of why my nav was going screwy - the combined size of it and my content exceeded the size of my container. That's fixed now. But there's an issue I couldn't figure out. At the very top of the site there's this 16 pixels that appear there that I just can't seem to figure out how to get rid of without negative margins, and the <h1> tag defaults to a position that's about 5px lower than I want. I can't think of a solution to this with the tools I know. So here are my remaining questions, to anyone who's got the patience to answer them:

Is there a style that declares positioning, or something in my code that I'm missing which is creating this?

What is it that overflow:auto; does in Firefox and Chrome but not IE that fixed this issue?

What could one use clears for that would solve the problems I created? I don't understand what happened here.

Thanks again for all the help!

12-24-2009, 09:04 AM
What is it that overflow:auto; does in Firefox and Chrome but not IE that fixed this issue?

What could one use clears for that would solve the problems I created? I don't understand what happened here.
We've a good sticky at http://www.codingforums.com/showthread.php?p=617640#post617640, which may help you to understand.

Adding a clear property to an inner element is the right way to clear the float, though overflow:auto; may also work. See http://www.quirksmode.org/css/clearing.html

12-24-2009, 10:00 AM
Awesome. I'll check that out.

Also - I've cleaned all my home page code in the validator, but it's got a problem with my facebook code, which facebook provided (I assume that's not fixable, but if it is, by all means, I'd love to know how), and I have this notice:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include:

putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>), or
forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes), or
using XHTML-style self-closing tags (such as <meta ... />) in HTML 4.01 or earlier. To fix, remove the extra slash ('/') character. For more information about the reasons for this, see Empty elements in SGML, HTML, XML, and XHTML.

I cleaned up all the percentage signs, made sure everything I could catch was inside some sort of tag - <p> tags and whatever - but no go. The notice won't disappear. Before I go duplicating this page as my root page, does anyone have any words of wisdoms, or insights as to what I'm not seeing?

You guys have all been seriously helpful in a very short period of time. It's mucho appreciado. :)

Edit: I'm also still seriously confused about how to use clears or overflows to make it so in IE I don't get the scroll effect on short pages like http://www.seraphswords.com/v4/kill-bill/. I thought I understood after reading what you guys said in that other thread - basically about forcing a div to be as big as the floating divs above it, thus expanding the content/layout appropriately . . . but I still don't see how to use that here. I tried it in a few ways - clears (both, left, right) in multiple positions, and it's not getting me anywhere in IE. Firefox and Chrome are fine with me . . . but IE. I just don't get it.

Edit 2: Just to explain my current understanding, so it can be corrected.

1) We put an overflow inside the container so that it would fill up the space without restricting itself, thus putting in the background picture that I needed.
2) We put a clear:both; in the footer so that the footer wouldn't try to float next to either the left nav or the content of the site, thus expanding the site to its appropriate size.
3) To fix the problem with short pages in IE and Firefox, I stuck an overflow:auto; into the content, so it would expand as needed to the footer, which clearing both sides, and refusing to float/let float to either side, should be below the navigation if the navigation is longer than the content.

But the problem is, in IE, it doesn't seem to be clearing correctly - it's not recognizing the floating element of the left navigation menu, and so it's placing the footer directly below the content - so the overflow is useless, expanding to the bottom of ITSELF. So clearly I've missed something, but I don't know what!

So, my remaining questions:

1. Is there an element (or anything) besides a negative margin to pull my site up those additional 16 pixels?
2. Is there something I can do to get rid of that validation error that says I've got text somewhere I'm not supposed to have it?
3. Is there a way to use clears or overflows, or some other whatever, to make the browsers recognize that I want the height of the site before the footer to be EITHER the navigation OR the content, whichever is longer on a given page? I can't seem to understand how to do this with clears and overflows.

12-24-2009, 11:04 AM
not really sure about the IE issue since i hate opening IE and have not looked to see the problem but i might be able to help with the 16px deal

try adding

* { margin: 0px; padding: 0px; }

just below the body in your css this sets the margin and padding that the browser creates for the page to 0px so it should eliminate that 16px deal

12-24-2009, 06:33 PM
No good on the margin and padding fix - I tried something like that already to no avail - tried it the way you suggested, both integrated into my current container div, and as a separate div, and it didn't work. Thanks, though!