Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I’m having a double footer border problem

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #44026
    muco
    Member

    Hello,

    I was cross browser testing the site I am building; http://bit.ly/10MJLoB, and then I found out my footer shows a double dashed border in IE 9 and below, only on my home page. This does not happen in chrome, firefox or IE 10. where it shows a single dashed border (what I want). It also does not happen on other pages.

    Can you can you assist me in figuring out why it shows the double footer border in IE 9. I attached photos of what it looks like, and I’ve spent hours changing css codes one at a time. This has not worked. I suspect it has something to do with my margin settings on the home page.

    Photos–In IE 10, chrome, firefox -desired single footer border
    http://bit.ly/Xt4YVy

    –In IE 9 and below. Double footer border
    http://bit.ly/Xt4OxF

    Thanks in advance

    #131341
    Senff
    Participant

    There’s a typo in here:

    Should be:

    Not sure if that’s the root cause (the HTML tag is missing, so who knows what else might be missing or mistyped) but give it a try.

    #131342
    ElijahFowler
    Participant

    OK, how to say this, your markup is all jacked up. I figured that your problem was caused by that, but when I ran it through a validator I found it was worse off then I thought. [Here’s the results.](http://html5.validator.nu/?doc=http%3A%2F%2Fcameliabold.bigcartel.com%2F&showimagereport=yes&showsource=yes “Validator Results”) I’m guessing that this is a static website, so that means you just need to go through your .html page and fix the issues the validator brings up and that you don’t have a server side problem.

    Good Luck,

    -Elijah

    #131343
    Senff
    Participant

    The markup is all jacked up only because of that wrong closing tag. Goes to show that a validator can show many errors when in fact, there is only one.

    #131344
    muco
    Member

    Thank you, Senff. I did not close the tags correctly. I fixed it.

    #131346
    ElijahFowler
    Participant

    There is also missing closing tags on the menu UL and several other issues, I opened the file and went through it myself. Also, there is no HTML opening tag. Goes to show there’s a few more than just one error. ;)

    -Elijah

    #131347
    Senff
    Participant

    My mistake, those other errors indeed showed.

    Still, the missing A tag resulted in no less than 6 validation errors. I prefer to use validation tools as guidelines only but this kind of stuff just annoys me ;)

    #131348
    muco
    Member

    Windows has about 50,000 bugs. If they waited to fix all of them before launching , they would never launch. Launch first, then fix later is my motive Elijah. I’m happy as long as the site looks good and functions well. However, you raised some good points. I will take them into consideration when I move to the validate code phase.

    Peace

    #131349
    ElijahFowler
    Participant

    Hey guys,

    Validators can be a big pain in the butt sometimes, I know that quite well. lol I ran it through the validator because I saw a few and took the lazy way out instead of trying to find all the bugs myself. lol But I’ve spent the time and went through the entire html document and found everything that was breaking the page. Here’s the Codepen link with the cleaned up code.

    Here’s a list of what I found:


    Missing HTML opening tag on line 2
    There was content (logo and navagation) outside of the body tag
    The logo's anchor tag was like this (<a href="/"</a>), should be this (<a href="/">)
    Navagation UL was missing ending tag
    The Cover anchor opening tag was like this (<a href="/"</a>), should be this (<a href="/">)
    All three footer link anchor where like this (<a href="/"</a>), should be this (<a href="/">)
    There was a rouge DIV ending tag right after the footer

    I cleaned up the head a bit and re-ordered that meta tag and stuff to make it run smoother.

    I hope this helps,

    -Elijah

    EDIT: Link Removed

    #131350
    muco
    Member

    Thank you.

    #131352
    muco
    Member

    Kindly take down the Pen. I feel weird having all my code and my site open on some other site. It feels like an invitation for some script kiddie to hack it.

    I’m sure you understand. I’ve saved the code, and will study it to perfect my code.

    #131355
    muco
    Member

    Elijah, when you say you “cleaned up the head a bit and re-ordered that meta tag and stuff to make it run smoother”. Could you explain a bit more?

    P.S I’m not trying to be a smartass. I’m want to learn.

    #131362
    ElijahFowler
    Participant

    Sure, Muco, I’ll try to be concise and informative and if you learn something I would be happy that I could help.

    OK, for starters here’s a clip from the HTML5 Boilerplate‘s documentation on the structure of a HTML5 document:

    “As recommended by the HTML5 spec add your charset declaration early (before any ASCII art ;) to avoid a potential encoding-related security issue in IE. It should come in the first 1024 bytes. The charset should also come before the TITLE tag, due to potential XSS vectors.”

    So I placed the <META charset=”utf-8″ /> string right underneath the HEAD tag.

    Next is something I added, the <META http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> string. Now, as per HTML5 Boilerplate‘s documentation:

    “This makes sure the latest version of IE is used in versions of IE that contain multiple rendering engines. Even if a site visitor is using IE8 or IE9, it’s possible that they’re not using the latest rendering engine their browser contains. The META tag tells the IE rendering engine two things:

    1. It should use the latest, or edge, version of the IE rendering environment
    2. If already installed, it should use the Google Chrome Frame rendering engine

    This META tag ensures that anyone browsing your site in IE is treated to the best possible user experience that their browser can offer. The META tag for compatibility mode needs to be before all elements except TITLE and META. And that same META tag can only be invoked for Google Chrome Frame if it is within the first 1024 bytes.”

    Now, to keep the rest of the META tags grouped, and because to some extent META tags give crawlers and search engines some info that is needed, put them underneath the compatibility tag.

    Next I placed the style sheets right underneath the META tags. The higher up the style sheets are the less the chance you’ll get the FOUC (Flash Of Unstyled content) and it makes sure that when your JavaScript loads the correct styling is in place. It helps to avoid bugs. I also placed the IE conditional comments there to keep grouping uniform. To be honest if I were you I would take a different approach than having all that CSS in the head of your document. Here’s some reading on that subject.

    The JavaScript is placed at the bottom of the HEAD. Often it’s advised to place most JavaScript near the bottom of the BODY tag, but it’s more of a per basis – preference thing. I figured that they were OK where they are. Here’s a clip from the HTML5 Boilerplate documentation:

    “In general, in order to keep page load times to a minimum, it’s best to call any JavaScript at the end of the page because if a script is slow to load from an external server it may cause the whole page to hang.”

    And here’s more reading on that subject.

    That’s pretty much all I did. I cleaned it up a bit and grouped it. If you’re interested in learning more about semantics and markup elements I would suggest reading stuff on the HTML5 Doctor, while some of the articles are a little old most of the information posted there is right on

    I hope that you understood my ramblings, if not ask and I’ll try again. xD

    The best,

    -Elijah

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.