The page displays the way I want it too in IE but not in firefox. The Page (http://www.myerstowing.com/redo/) Only the index and general info pages are working.

Right above the HOME link there should be a space a space as in IE. Is there a way to fix that?


Also I have another question. On the general page where the when I how do I keep the navigation area growing with the context. When I set the height on the context to auto it works fine but if I do that it to the nav area it only puts it around the links. How do I do that without having to set it to a fixed pixel size?

thanks

My first time at coding a full page in css. I like how it turned out.

http://myerstowing.com/redo/general2.html This is what I mean by the heights. My background image doesn't flow all the way down.

damn you are fast pm :)

background: url(http://myerstowing.com/redo/graphics/left_bk.gif) repeat-y;

might help?

Yep, Christina is correct. You need to allow the background to tile. But it seems you've already figured this out.

Now comes the tricky part - making it so that the background tiles gracefully! Actually, yours isn't all that bad, if I do say so myself.

Sorry for the lag on my reply - it looks like we had a threadbomber pop in here - had to go report it. :)

I tried the repeat-y and my background image didn't show at all, I am working on making it tile gracefully. what should I set the height of the nav part too? auto? 100%? not sure what the difference would be.

Ah ok, looking at the general.html page, I think I see what you're talking about. This requires some nesting. Place the nav and the content area inside two divs. For the first div, set the content background to the right side of the container and tile it along the y-axis. For the secoond div, set the nav background and likewise tile it on the y-axis (no need to set it to the left - it will do this by default). Then remove the background settings from the nav and content divs. This will cause both backgrounds to fill all of the space in the content area regardless of how much content you have, but it will allow you to keep the two images separate, so your file sizes are smaller. You could just create one large background too and drop it behind everything using one div to contain it. That wouldn't be so bad

ok I followed you up until "I think I see what you're talking about." then I was lost. I'm just a beginner with using css so I am not too sure what you are saying. Some of it makes sense but overall I don't really know what you are saying. Sorry.

Guide me oh guru :)

Oh no. None of that guru stuff. Then you'll have expectations of me, and that's the last thing I need!

Ok, before I explain my last post further, I have a couple more things for you to do. First, take out that empty line item:

<li>
</li>

You're trying to simulate a margin with it, and that's the wrong way to go about things. Use the technique I showed you above instead. Otherwise, you'll get twice as much space in IE, because IE stupidly accounts for space in that <li> even though it's clearly empty.

Second, remove that <div align="right"> and it's corresponding end tag. Then go into your style sheet and add text-align:right into the style for #nav ul, #nav li

Now to the meat of my recommendations. Based on what I'm seeing on your page, I'll simplify things a bit.

Go into your style sheet, and add

background:url(http://myerstowing.com/redo/graphics/left_bk.gif) repeat-y ;

to #container. But change the URL to fit the right path.

Now, remove background-image:url(http://myerstowing.com/redo/graphics/left_bk.gif) from #nav and see if that doesn't make a difference. :)

that worked WOOHOO. Not to sure as too why it worked how did it know to put it on the left side of the container field?

Thanks a ton the_pm! :)

By default, every browser starts tiling a background image start on the left side of the screen, and I believe they all start at the top too. So when you tell it to repeat-y, it simly tiles in one direction, downward, and since by default it is on the left, it knows to tile it into a column on the left.

Browsers are tricky creatures. You just have to be a little trickier ;)