View Full Version : Drooping header...

Sep 21st, 2009, 02:07 AM
Hi all..

Been working on this website, and today it's driving me batty, so I'll see if someone out there can help.....
web page is at
css is at
I removed one of the buttons next to "portrait gallery" and also changed the stationary photo that was there into a flash/swish animation....one of those maneuvers caused the header to drop over the top of the animation...
any thoughts on what I did and how to fix it?

thanks tons


Sep 21st, 2009, 03:16 AM
nav-b is set to 510px. Your image is 419px wide. That's 929px in a div that you have set to 800px wide.

change the positioning of the image to absolute:
#header img {

Sep 21st, 2009, 03:48 AM
oops..that tossed my tagline up over my main logo graphic....got it off the top of the animation tho! should i change the pixel size of nav-b?


Sep 21st, 2009, 04:04 AM
I'm looking at your code, and I don't understand why I see "life transformed into ART" twice? Where is the 2nd instance coming from?

You need to validate your code too:validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.monarchcottages.com%2Fevans%2Ftest7%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)

EDIT: okay, after viewing the image in IE, I see it is part of your logo. I couldn't see that in firefox.
You don't need both. If you want to keep the h1 tag for seo purposes, then apply a negative margin to it so that it is off the page.

Sep 22nd, 2009, 02:11 AM
sorry it took me forever to get back to you - been buried!

I have run the webpage through the validator, and near as I can tell it really hates the flash I have in there, but will have to work on changing that code another day. =)

the header life transformed into ART isn't part of the logo...the logo.png itself is just Evans with the big E in the background....

I've played around with it a bit, and in firefox atm it displays perfectly, in explorer the tagline drops now behind the flash and the Evans logo has dropped down from the top of the page quite a bit..any thoughts on what's causing the discrepancy between browsers?

thanks in advance!


Sep 22nd, 2009, 02:39 AM
the header life transformed into ART isn't part of the logo...the logo.png itself is just Evans with the big E in the background....

No, no, no.... you will not play with my mind! :) It is definitely part of the image. In fact I downloaded a copy of it to open it in fireworks.
That phrase is written in white letters below the logo.


Like I said, in my opinion you don't need it twice. This shot is from Firefox 3.5.

Sep 22nd, 2009, 03:01 AM
omg....lmao...i am SO sorry...lol.....that's the stupidest thing I've done in...well not so very long...thanks for being a good sport about it and not yelling at me for being an idiot even though i was...
sorry, i accidentally uploaded the wrong logo....
it's all better now - your mind is as stable as it ever was....:D
ok, all idiocy aside and back to the other issue.....can you help me with the IE issue? even after all I've done?

sorry, that just cracks me up.....lol


Sep 22nd, 2009, 03:17 AM
Okay, since my mind is (relatively) okay: I only have IE6 on my machine and it actually looks the same as it does in Firefox except for the gray background of the png image.

You do have 3 things you need to change in your CSS that might fix your problem though:

There's an extra comma at the end here:
body#home a#homenav, body#artist a#artistnav, body#contact a#contactnav, body#faq a#faqnav, body#experience a#expnav, body#portait a#portraitnav, body#grad a#gradnav, {
color: #ccc;

You also have 2 instances of margin_top, where it should be margin-top. Notice it should be a dash where you have an underscore.

Sep 22nd, 2009, 03:38 AM
ok..made those changes, didn't help...bugger...i have ie8 (ugh)
I'll keep playing with it, something's not working right, unless it's just some ie8 bug (again)

thanks for your help!


Sep 22nd, 2009, 03:45 AM
I looked in browser shots and saw that nothing had changed.

I would try switching over to swfobject (http://code.google.com/p/swfobject/) for your flash. This will help make your page valid.

Also, perhaps look into the 5 CSS warnings (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.monarchcottages.com%2Fevans%2Ftest7%2F&profile=css21&usermedium=all&warning=1&lang=en). Maybe fixing those will help.