Ohio Chatter
Ohio Chatter

Forums

All Threads Serious Business Sports Politics Archive Pick 'ems
Log In Create Account

CSS/HTML/DIV gurus - I'm stumped! Internet Explorer display issue

Home ▸ Archive ▸ Serious Business ▸ CSS/HTML/DIV gurus - I'm stumped! Internet Explorer display issue
thePITman's avatar

thePITman

Senior Member

3,867 posts
Nov 12, 2012 7:51 PM
My page displays perfectly fine in Chrome and Firefox, but it's all screwed up in Internet Explorer. Can you please take a look at the HTML and see what IE might be interpreting incorrectly? Is it missing an "end" DIV tag or something?

I am using IE9. Is it failing in other verisons, too?

http://d2canton.pitmanstats.com
Nov 12, 2012 7:51pm
justincredible's avatar

justincredible

Nick Mangold

32,056 posts
Nov 12, 2012 8:37 PM
I'm firing up Parallels now so I can take a look at it for you.
Nov 12, 2012 8:37pm
justincredible's avatar

justincredible

Nick Mangold

32,056 posts
Nov 12, 2012 8:53 PM
It does look the same in IE7 and IE8 as it does in IE9.

One weird thing I noticed using the HTML inspector in IE was that your first <section> and <aside> inside your #main-fullwidth div had weird closing tags. They were showing as </section/> and </aside/> which was breaking the nesting in the HTML inspector. Not sure if that is the issue or not but it was odd.

Here's a screen grab.

Nov 12, 2012 8:53pm
justincredible's avatar

justincredible

Nick Mangold

32,056 posts
Nov 12, 2012 8:55 PM
Viewing the source directly, though, looks fine. Did you do any google searches for issues associated with the wordpress theme you are using?
Nov 12, 2012 8:55pm
thePITman's avatar

thePITman

Senior Member

3,867 posts
Nov 12, 2012 8:55 PM
I was using IE inspector, too. It's like the DIV"main-fullwidth" (which should start BELOW "clearfix") is starting at the same spot (just under "header"). Since "clearfix" and "main-fullwidth" have the same top/starting spot, that's why the advertisement is trying to align=left immediately to the right of the nav bar.
justincredible;1318771 wrote:Viewing the source directly, though, looks fine. Did you do any google searches for issues associated with the wordpress theme you are using?
I've never had any issues until today, that I've noticed. I've tried backtracking but can't seem to find the issue.
Nov 12, 2012 8:55pm
justincredible's avatar

justincredible

Nick Mangold

32,056 posts
Nov 12, 2012 9:03 PM
Shit like this is why I wish Microsoft would get out of the browser business. Really frustrating issues seem to popup all the time. I never run in to issues with other browsers, just IE.
Nov 12, 2012 9:03pm
thePITman's avatar

thePITman

Senior Member

3,867 posts
Nov 12, 2012 9:12 PM
What is the ".clearfix:after" CSS for? I'm seeing ".. :after" on all classes. It's all crossed out:

.clearfix:after
-- height: 0px;
-- overflow: hidden;
-- clear: both;
-- display: block;
-- visibility: hidden;

All those are crossed out in "clearfix" in the IE developer tool. Would any of those force the next DIV ("main-fullwidth") to start below "clearfix"? Cuz that seems to be the problem, as I stated above.
Nov 12, 2012 9:12pm
gorocks99's avatar

gorocks99

Senior Member

10,760 posts
Nov 12, 2012 9:41 PM
Nov 12, 2012 9:41pm
justincredible's avatar

justincredible

Nick Mangold

32,056 posts
Nov 12, 2012 9:45 PM
thePITman;1318788 wrote:What is the ".clearfix:after" CSS for? I'm seeing ".. :after" on all classes. It's all crossed out:

.clearfix:after
-- height: 0px;
-- overflow: hidden;
-- clear: both;
-- display: block;
-- visibility: hidden;

All those are crossed out in "clearfix" in the IE developer tool. Would any of those force the next DIV ("main-fullwidth") to start below "clearfix"? Cuz that seems to be the problem, as I stated above.
Yeah, without the clearfix applying it would cause weird behavior below. Not sure why it would be working in every browser but IE, though.
Nov 12, 2012 9:45pm
P

Polar Bear 73

Senior Member

216 posts
Nov 13, 2012 6:21 AM
Another related question (probably much simpler though). Since I loaded IE9 it won't save any of my passwords. I have selected "Remember my password" on 4 or 5 sites that I use regularly (including this one), but every time I go to those sites I have to reenter my user name and password. I never had to do that before I loaded IE9. Just a small inconvenience, but one I would just as soon not have to deal with.
Nov 13, 2012 6:21am
justincredible's avatar

justincredible

Nick Mangold

32,056 posts
Nov 13, 2012 9:00 AM
Did you make some changes last night pittman? It looks a little different this morning but still off.

Anyway, now that I'm sitting at my desk I am going to look a little more at it. Things like these bug me enough that I get annoyed if I can't find the solution.
Nov 13, 2012 9:00am
M

MontyBrunswick

Nov 13, 2012 10:13 AM
I generally suck with HTML code, I'll have a look at it when I get home.
Nov 13, 2012 10:13am
M

MontyBrunswick

Nov 13, 2012 10:17 AM
FWIW: It looks right in IE10.
Nov 13, 2012 10:17am
justincredible's avatar

justincredible

Nick Mangold

32,056 posts
Nov 13, 2012 10:29 AM
Alright, I just noticed my "Document Mode" was set to Quirks mode. When I changed it to IE9/8/7 standards the site looks just fine.
Nov 13, 2012 10:29am
said_aouita's avatar

said_aouita

Banned

8,532 posts
Nov 13, 2012 10:56 AM
Nov 13, 2012 10:56am
thePITman's avatar

thePITman

Senior Member

3,867 posts
Nov 13, 2012 1:44 PM
After further research (talking with a CSS guru co-worker), it sounds like "CSS3" tags such as ASIDE and SECTION, and even styles such as ":after" are not supported in IE9 and below, which would explain why IE10 works fine. One of the styles being applied inherently to my "main-fullwidth" DIV was "clear:both;". But since that attribute was in the ":after" style, it was not being applied in IE.

So, I added "clear:both;" as an inline style to the "main-fullwidth" DIV, and now it begins after/below the "clearfix" as opposed to overlaying it. In addition, I replaced my ASIDE's with DIV's, even though it didn't directly fix it.

This resolves the question at hand. Chrome/Firefox can read "CSS3" stuff such as the ":after" style, but in IE9(-) I had to apply the ":after" directly using inline styling for it to work.

I'm still having other issues with applying styles (such as hover links displaying way too much padding) that works in Chrome but not IE, but it is not related to this particular question.

I'm also seeing that on my main blog page (www.pitmanstats.com) the main section is centered on the page, but on http://d2canton.pitmanstats.com it is all flush to the left of the browser window. I can live with this, but I'd like to be as consistent as possible. Maybe I have to go through all ":after" styles and manually apply them? (Wordpress theme is automatically applied in my main domain page, but I copied/pasted much of it for my d2canton stuff.
Nov 13, 2012 1:44pm
thePITman's avatar

thePITman

Senior Member

3,867 posts
Nov 13, 2012 9:15 PM
Okay, so my previous issue has been resolved. Now I have a new problem, ALSO only in Internet Explorer:

When I hover over my upper navigation menu, it pushes the content down a few pixels.
When I hover over the inner navigation menu, it moves the content up to where it should be.

I have narrowed the root cause down to the inner navigation menu (Home, Teams, Tournament, etc.)
The DIV for the inner navigation is the following:
div id="nav"
  a href=".."
  a href=".."
  a href=".."
/div
The style for #nav is: 
#nav {height:40px;
padding-top:10px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
word-spacing:8px;
}

#nav a {
display:inline;
padding:10px;
text-decoration:none;
color:#000000;
font-weight:bold;
background-color:#f1f1f1;
}

#nav a:hover {
display:inline;
[COLOR=#0000cd][B]background-color:#e1771e;[/B][/COLOR]
color:#ffffff;
font-weight:bold;
}
I have proven that if I comment out ONLY the "a:hover { background-color:#e1771e; }", it works fine. So it's obviously a bug with changing the background-color when hovering over the link. If I comment out that line only, the page doesn't move or shift at all when I move my mouse over any menu.

Any idea what might be causing this? Again, it's only in IE.
Nov 13, 2012 9:15pm
thePITman's avatar

thePITman

Senior Member

3,867 posts
Nov 14, 2012 10:01 PM
ttt
Nov 14, 2012 10:01pm
M

MontyBrunswick

Nov 14, 2012 10:19 PM
Does it still act up if you set the padding to 0px all around?
Nov 14, 2012 10:19pm
thePITman's avatar

thePITman

Senior Member

3,867 posts
Nov 15, 2012 8:21 AM
dlazz;1320583 wrote:Does it still act up if you set the padding to 0px all around?
Yes. I tried that. It seems only to be an issue with changing the background-color when hovering over it. I've noticed there are similar bugs reported all over the internet, but have tried many of the proposed solutions, and none seem to work for me.
Nov 15, 2012 8:21am