- This topic is empty.
April 10, 2013 at 7:29 pm #44026
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
–In IE 9 and below. Double footer border
Thanks in advanceApril 10, 2013 at 8:20 pm #131341April 10, 2013 at 8:22 pm #131342
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.
-ElijahApril 10, 2013 at 8:25 pm #131343
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.April 10, 2013 at 8:29 pm #131344
Thank you, Senff. I did not close the tags correctly. I fixed it.April 10, 2013 at 8:40 pm #131346
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. ;)
-ElijahApril 10, 2013 at 9:00 pm #131347
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 ;)April 10, 2013 at 9:09 pm #131348
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.
PeaceApril 10, 2013 at 9:32 pm #131349
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’sthe 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,
EDIT: Link RemovedApril 10, 2013 at 9:38 pm #131350
Thank you.April 10, 2013 at 10:00 pm #131352
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.April 10, 2013 at 10:24 pm #131355
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.April 10, 2013 at 11:42 pm #131362
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:
- It should use the latest, or edge, version of the IE rendering environment
- 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.
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 forum ‘CSS’ is closed to new topics and replies.