I can't find the error GAH! Frontpage renders header incorrectly..

**behati** · Mar 31, 2012 07:50

Hey guys,

so I said yes to helping out a non-profit concert collecting for a Cancer charity by brushing up their website.. Sadly, the person in charge of the site originally installed a theme, had little clue what to do with it and started editing things by hardcoding them (often incorrectly) into the theme, oi humbug!

I'm working on getting everything fixed up, starting with the header - but on the frontpage something is pushing the header and navigation to the left (as if a parent div is too short, or a padding/margin-left is being applied) and I can't for the life of me figure out what's doing it! I've done a bit of damage control making it render acceptably in FireFox and Chrome, but in Internet Explorer this causes the header content to be pushed into two lines, creating a huge space that shouldn't be there...

Please oh please help me figure out what's causing this.. The header renders fine on all other pages than the frontpage, meaning that it's probably something with the frontpages 2-column layout, but again.. I can't seem to find it!

puppy+eyes.jpg

The website is in danish, but luckely CSS is a universal language <3

http://www.cancerbeat.dk

Would really appreciate some help with this... I can post all the CSS, but since I have little clue as to where the problem is, it would be a LOT of code

Here is the header CSS, but I'm suspecting that the problem may be with the column layout, and not the actual header (seeing as the same header renders fine on the other pages):

HTML Code:

#header {
    height: 33px;
    padding: 1.5em 0 0;
}
#header #logo {
    height: 15px;
}
#header #logo .title {
    color: #000000;
    font: 700 3em/1.2em arial,sans-serif;
    letter-spacing: -0.05em;
    padding: 0.5em 0 0;
}
#header #logo .title .site-title {
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,sans-serif;
    font-size: 1em;
}
#header #logo .title .desc {
    color: #666666;
    font: 400 0.25em arial,sans-serif;
    letter-spacing: 0.2em;
    margin: -10px 0 0;
    padding: 0 0 20px;
    text-align: right;
    text-transform: uppercase;
}
#header #logo .title a {
    color: #000000;
    text-decoration: none;
}
#header #logo .title a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
}
#header #logo a.sitelogo {
    background: url("images/bg/sitelogo.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 25px;
    width: 400px;
}
#header #search_menu {
    height: 15px;
}
#header #search_menu #search {
    padding: 0 0 0 5px;
}

**Ferron** · Mar 31, 2012 11:08

I played with the CSS a bit and couldn't figure anything out but I did notice that the page doesn't have a doctype. Add "<!doctype html>" to the very top of the HTML. I can't guarantee the doctype will fix this specific problem but it will prevent future headaches.

**RyanReese** · Mar 31, 2012 13:25

Originally Posted by behati

I'm working on getting everything fixed up, starting with the header - but on the frontpage something is pushing the header and navigation to the left (as if a parent div is too short, or a padding/margin-left is being applied) and I can't for the life of me figure out what's doing it! I've done a bit of damage control making it render acceptably in FireFox and Chrome, but in Internet Explorer this causes the header content to be pushed into two lines, creating a huge space that shouldn't be there...

What IE version? I have 6/7/8 (9 crashes on me in IEtester consistantly. Should check that out). I'm not seeing any difference in the header from those browsers/chrome/FF. Could you show screenshots?

Please oh please help me figure out what's causing this.. The header renders fine on all other pages than the frontpage, meaning that it's probably something with the frontpages 2-column layout, but again.. I can't seem to find it!

puppy+eyes.jpg

Same as above. If it is IE9 problem then something is causing the page to crash for me.

The website is in danish, but luckely CSS is a universal language <3

http://www.cancerbeat.dk

Would really appreciate some help with this... I can post all the CSS, but since I have little clue as to where the problem is, it would be a LOT of code

Here is the header CSS, but I'm suspecting that the problem may be with the column layout, and not the actual header (seeing as the same header renders fine on the other pages):

HTML Code:

#header {
    height: 33px;
    padding: 1.5em 0 0;
}
#header #logo {
    height: 15px;
}
#header #logo .title {
    color: #000000;
    font: 700 3em/1.2em arial,sans-serif;
    letter-spacing: -0.05em;
    padding: 0.5em 0 0;
}
#header #logo .title .site-title {
    font-family: Helvetica,Arial,"Lucida Grande",Verdana,sans-serif;
    font-size: 1em;
}
#header #logo .title .desc {
    color: #666666;
    font: 400 0.25em arial,sans-serif;
    letter-spacing: 0.2em;
    margin: -10px 0 0;
    padding: 0 0 20px;
    text-align: right;
    text-transform: uppercase;
}
#header #logo .title a {
    color: #000000;
    text-decoration: none;
}
#header #logo .title a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
}
#header #logo a.sitelogo {
    background: url("images/bg/sitelogo.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 25px;
    width: 400px;
}
#header #search_menu {
    height: 15px;
}
#header #search_menu #search {
    padding: 0 0 0 5px;
}

**ralph.m** · Mar 31, 2012 16:34

Originally Posted by Ferron

I did notice that the page doesn't have a doctype.

There is a doctype, but there is a <script> above it. That's not allowed. Place that <script> just before the closing </body> tag.

**Ferron** · Mar 31, 2012 20:22

Originally Posted by ralph.m

There is a doctype, but there is a <script> above it. That's not allowed. Place that <script> just before the closing </body> tag.

Ah, I see it now, you're right. I saw IE rendered it in Quirks mode so I assumed there wasn't a doctype.

And to behati, take raplh's advice for the script tag

**Black Max** · Mar 31, 2012 22:56

First advice: uninstall FrontPage ASAP and pretend you never saw it. That one program is responsible for a huge percentage of the badly coded sites on the Internetz. Not busting you for using it, Microsoft marketed it like SpaghettiOs and a tremendous amount of people bought it (or found it on their Windows install), but regardless, it's never too soon to get rid of it and do your site building and coding the right way.

**behati** · Apr 1, 2012 02:36

You guys are damn awesome!

That was indeed the problem, the script code being above everything else.. When I was looking through the code I just saw the script, saw it was Google Analytics and therefore thought there can't be anything wrong with that. Turns out there can be if it's used at the wrong place

As for Frontpage, I have never used it, I've just started patching up this site yesterday and there's still loads to be done... But this fix brings me one step closer to free time this weekend!

Thanks a million guys <3

**Ferron** · Apr 1, 2012 09:00

Glad you got it fixed

User Tag List

Thread: I can't find the error GAH! Frontpage renders header incorrectly..

Thread Tools

Display

I can't find the error GAH! Frontpage renders header incorrectly..

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions