Ohio Chatter DEV

thePITman

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

justincredible

I'm firing up Parallels now so I can take a look at it for you.

justincredible

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.

justincredible

Viewing the source directly, though, looks fine. Did you do any google searches for issues associated with the wordpress theme you are using?

thePITman

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.

justincredible

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.

thePITman

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.

gorocks99

justincredible

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.

Polar Bear 73

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.

justincredible

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.

dlazz

I generally suck with HTML code, I'll have a look at it when I get home.

dlazz

FWIW: It looks right in IE10.

justincredible

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.

said_aouita

thePITman

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.

thePITman

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.

thePITman

ttt

dlazz

Does it still act up if you set the padding to 0px all around?

thePITman

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.

Archive

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