SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    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;
    }

  2. #2
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by behati View Post
    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;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ferron View Post
    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.

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad you got it fixed


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •