Trouble with drop shadow (not box method)

[qkarmark]

I am traditionally a print designer, but decided to help a client with a website so this is clearly a learning experience. I think I understand CSS well enough to make it do certain things, and I followed several instructions here and elsewhere to achieve what we want.

However, I cannot get my drop shadow (left and right side) to display all the way down the page. According to the code, it’s wrapped around the entire #container div, but it only displays (repeat-y – 811px X 10px) as far as the header div, which clearly is inside the container but maybe I didn’t do that properly. I’ve previewed in Safari, Firefox and Chrome and it fails to display correctly in all instances.

https://www.dropbox.com/s/0vxbz0awye4kf5f/copy-index.html
https://www.dropbox.com/s/icur7abrc5pmxpk/layout.css

Any help for a CSS n00b?

[Historical Forums User]

Non of your images were attached, but I’d give it a shot.

Try removing the ‘float‘ in your #mainContent and #footer.

Tip: There are a lot of unnecessary CSS elements used in your style sheet which can be removed

[qkarmark]

WOW! You’re amazing! it worked thanks very much!

And yes I know I likely included too many CSS elements: I was experimenting / troubleshooting the problem and went in the wrong direction obviously.

Thanks again! I’ll post the live site soon so you can see what I was working on.

[Historical Forums User]

I’ll be glad to see it. Anytime (^_^ )

[qkarmark]

http://north-stream.ca/copy-index.html

I can’t get the menu rollover to work (I tried using https://css-tricks.com/css-menu-with-rollover-images/ to accomplish that. )

[qkarmark]

so now it seems I was able to get the rollovers to work properly (using an adobe.tv tutorial). But now the fourth menu item doesn’t show up (unless viewed using Safari). Any help out there?

http://north-stream.ca/copy-index.html

[qkarmark]

OK – this is totally weird, but I think I figured it out: the menu item (Services) uses a sprite document that had been uploaded to the FTP at a curiously huge file size. I replaced that sprite and it seems to work fine now. (so all I have to figure out is getting the contact page fixed up and we’re all good :P )

[Historical Forums User]

The contact form looks a lot better.

I was going to say something yesterday about this, but I wanted to see what your plans were.

Just a helping hand, to help you avoid future problems with your CSS, you can add/remove the following CSS in your style sheet.

ADD/MERGE

html { background-position:center top; }

body { margin:0; }

#menu ul { margin:0; overflow:hidden; padding:0 39px; }

REMOVE

#menu { position:absolute; top:-16px; }

#menu-left { float:left; width:768px; }

#headerA { float:left; width:768px; }

#headerB { float:left; width:768px; }

[Author]

Posts