Hello!

I am new to this forum. I'm working on my first pure CSS layout and am having a bit of trouble with placing some elements properly.

So far, it's going pretty well. I am stumbling when it comes to one thing. There is a gradient that is supposed to go from the bottom of the area that contains the navigation. It's a very small 36px gradient. For some reason, can't get it to sit in the right place. It's sitting inside the nav div, when it should be below. I'm sure it's something completely simple, but I am stumped.

So you can see what I am talking about, see the link below as I made a screencap video of my issue. On that page is the CSS/HTML... so if anyone has time to look over the files to see where my error is, I'd greatly appreciate it. Or if you want me to post the stuff here, let me know. It's just a bunch of long code and I didn't want to post it direct in the forum to save space.

The link to the video is:
h##p://www.mbstia.com/sbp-alt-menu/sbp-alt-menu.html
Please replace the ## with tt

Thanks so much... I think I'm almost there!

Thanks for all the help and suggestions.

WebGyrl, I'm not sure I understand what you want too achieve...

Do you want to have the menu and the div bg together, but next to the content, or that the menu stays on top, and the bg div goes below the menu, with the main content ?

I see that when I open your file on my comp (linux+firefox)

In #bg section of the css add
clear: both;

If you move it (the background div) into the main content part and add a margin-top or something to it, it displays alright - you just can't see it because it's nearly the same colour as the background #fff!

Originally Posted by webgyrl1

Hello!

I am new to this forum. I'm working on my first pure CSS layout and am having a bit of trouble with placing some elements properly.

First I want to welcome you! I just signed up yesterday myself.

I installed your Gray-sbp-template files on my Localhost Web server, and Firefox with the W3C validation service installed is reporting 5 errors in your markup.

Line 7, required attribute "type" is missing.
Line 103, 2 errors, of which are failure to self-close the input tags (use /> instead of >), and a third error because the validator does not recognize Javascript's onClick.

And finally, you have failed to close a div, resulting in some possible confusion over what the CSS is trying to do. My validator cites line 128 as the point where the div is not closed, with the opening tag on line 10, but that's its interpretation of the markup, and maybe not what you intended. In other words, you may have not closed the last tag, maybe it was a tag in the middle that was not closed.

I see that the site renders in Firefox, Opera and Safari for Windows equally, with MSIE7 not carrying the white background all the way across the menu bar. Looking back at your video, your view is the view I see in MSIE7, which is not the world's best browser for viewing modern web sites.

I would suggest that you develop with Firefox, and then validate both your markup and css, and then work out what you need to add to make MSIE look right without busting the other standards-compliant browsers.

Hope this helps!
Larry