CODEWITHSUNDEEP
cssinternet-explorerhtml
thePITman
thePITman

Reputation: 211

DIV alignment issue with Internet Explorer only

I've searched up and down for this issue, which seems to be a common occurrence, but I have yet to find a solution to my specific issue.

My web page displays perfectly fine in Firefox and Chrome, as well as IE10 on Windows 8. However, any other IE version has my DIV's all messed up.

Web site: http://d2canton.pitmanstats.com

Correct layout: Google advertisement is BELOW the navigation bar, and aligned to the left of the white content section, with the table (list of teams) to the right of the advertisement.

After inspecting the elements and comparing between IE, Chrome, and Firefox, here is what appears to be the issue, but the source looks perfectly fine as far as I can tell: It seems to me that in Internet Explorer, both the "clearfix" and "main-fullwidth" DIV's are starting at the same point (as in, the top of each DIV is even with the other), flush with the bottom of the "header" div.

However, the "main-fullwidth" DIV should start AFTER/BELOW the "clearfix" DIV.

I cannot seem to understand why this is happening.

Here is relevant code from index.php:

<body class="home blog custom-background">
<div id="container">
    <?php include('includes/header.php'); ?>
    <?php include('includes/outer_nav.php'); ?>
    <div id="main-fullwidth">
<section style="display:block; overflow: hidden; border: 0px; padding:0px; ">
    <aside style="display:block; float: left; width: 180px; ">
        <?php include('includes/left_sidebar.php'); ?>
    </aside>
    <div style="margin-left:180px;">
        <?php include('includes/inner_header.php'); ?>
<!-- CONTENT STARTS HERE -->
<!-- CONTENT ENDS HERE -->
    </div>
</section>
    </div><!-- #main-fullwidth -->

Here is outer_nav.php (contains "clearfix"):

<div class="clearfix">
    <div class="menu-primary-container">
        <ul id="menu-custom-primary-menu" class="menus menu-primary">
            <li id="menu-item-241" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-241"><a href="http://www.pitmanstats.com" >Home</a></li>
            <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="http://www.pitmanstats.com/pages/" >My Pages</a>
            <ul class="sub-menu">
                <li id="menu-item-242" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-242"><a>DII Canton District</a></li>
                <li id="menu-item-243" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-243"><a>DIII Wooster District</a></li>
                <li id="menu-item-245" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a>Triway Basketball</a></li>
                <li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-244"><a>Quarter&#8217;s Corner</a></li>
            </ul>
            </li>
            <li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a href="http://www.pitmanstats.com/mobile/" >Mobile Apps</a></li>
            <li id="menu-item-240" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-240"><a>About</a>
            <ul class="sub-menu">
                <li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="http://www.pitmanstats.com/about/about-me/" >About Me</a></li>
                <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="http://www.pitmanstats.com/about/history-of-pitmanstats-com/" >History of PITmanStats.com</a></li>
                <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="http://www.pitmanstats.com/about/contact/" >Contact</a></li>
            </ul>
            </li>
        </ul>
    </div><!--.primary menu-->
    <div id="topsearch">
        <div id="search" title="Type and hit enter">
            <form method="get" id="searchform" action="http://www.pitmanstats.com/"> 
                <input type="text" value="Search" name="s" id="s"  onblur="if (this.value == '')  {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" />
            </form>
        </div><!-- #search -->
    </div><!-- topsearch -->
</div><!-- clearfix -->

Then all "left_sidebar.php" is is a Google advertisement.

Again, it appears to me that it's an issue with "main-fullwidth" not properly starting AFTER "clearfix" in Internet Explorer, and instead it is starting at the same location. This is causing the Advertisement to try to align left, but it's aligning left immediately to the right of the navigation menu.

Please let me know if you have any questions or need any more details. This has worked in the past but recently stopped working. Thank you!

Upvotes: 0

Views: 3582

Answers (2)

thePITman
thePITman

Reputation: 211

After further research (talking with a CSS guru co-worker), it sounds like "CSS3" tags such as 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.

This resolves the question at hand. Chrome/Firefox can read "CSS3" stuff such as the ":after" style, but in IE 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.

Upvotes: 0

andrewk
andrewk

Reputation: 3871

Seems like some of the html5 tags you are using are causing the issue. The aside tag seems to be one of the elements breaking your layout in IE9-. I repalced it with a good old dive and it placed it back in to the <section>. You just gotta make some IF IE conditional css to make it look consistent. Good luck.

Debug it on IE using hitting F12.

Here's a pic.

enter image description here

Upvotes: 1

Related Questions