Hello everyone Ive been trying to get this new site im making for my art working, and up until now things were going fine.

First take a peek at the design which i just finished last night in photoshop:
http://ersp.in/random/overspin_design.jpg

And here is where the code is sitting right now:
http://ov.ersp.in/template/default/

I was lacking creativity so my design is based off of one i found at free css templates (i bring this up to give credit where its due):
http://www.freecsstemplates.org/temp...iews/deserted/

Okie dokie, on to the problem. Ive been working on getting the basic css coding done for the design, so i can move on to the php backend im going to be building for this thing. But ive hit a few minor, and a good major snag.

First one is in IE6 everything goes all haywire. I know i probably did something rather retarded to cause it, happens all the time. but then theres the navigation menu. I want to have a .png semi transparent bg pop up underneath the list items as you roll your mouse over them. I know basically how to do it, but i can't get the list items wide enough to fit the bg image.

I know a basic way of doing it, but the only way i know how would mean making a separate class for each link. Im just not talented enough to figure these two small things out.

Any help would seriously rock. And thank you ahead of time in case i forget to say that later

Hi,

To make your items wide enough :
- use no margins/paddings on your ul, nor on your li's
- display : block; and padding on your links. Display block will make them all the width available, and padding (not margin) in order to push their content away from the left side.

Oh, and a "conditionnal comment" css file for ie6 (if still needed) with * {zoom : 1;} could do the trick.

Hi Corey -

First... great visual design. When you get it going, I am sure it will serve you well. Marvin gave you some recommendations... did you try them yet?

I have a couple of questions:

• The original free template uses a stylesheet (default.css), but in your new design you are linking to a new sheet (close_the_door.css), PLUS the old one (default.css). Why do you want to link to both?
• About the transparent bg on the nav. links -- did you mean you want them like on the original template, or another way (is there an example you can point to)?

I'll take another look later.

Yours -
Scott

Thanks marvin ill try that here in a minute (finshing up the first of the php scripts right this second).

and OSweb, while im using the original deserted template as a base, all of the design and coding are being created by my hands. I remade my version in photoshop, and now im doing all my own coding by hand.

And the reason for the two style sheets is that i am working on a php script that will change which of those extra style sheets (close_the_door.css) is displayed depending on what time it is. This way the photo of mine used to created the bg of the design changes over time, instead of staying as one photo. Kind of a way to show off some of my work in the design of my site along with the gallery script im making.

As for the transparent part of the nav links, yea how the original deserted site has it where when you hover over the links the bg appears, but mine are semi-transparent .png files.

Ummm, the navigation doesn't go well especially the rollover background. Make it something that will stand out.

Good luck.

ok got the rollover working and changed the bg for the rollover a bit as well. Also got some of the main content area done, and also got secondary styles for IE for the png files.

Still have that problem in IE6 though where theres a small amount of space between the header and the lower area. Still can't figure out why its doing that.

Oh and thanks a whole lot to everyone who helped

Well, for one thing IE does NOT support the XHTML 1.1 Doctype, drop it back to 1.0.

2 - take the *html hacks for IE OUT of the main CSS file because IE7 will choke on them. Use conditional comments to call a separate IE 'fixes' only css file.

3 - that 'mysterious' space is coming from the font sizing on the H1 in the header. If you adjust that to something smaller, you'll see the gap disappear. You shouldn't use pt for font sizing anyway, pt is for PRINT, better to use em or %.
You'll probably have to play with the sizing, margins and padding to get what you want and avoid that gap.