Layout works in all except IE7 (browser view in IE tools) - why?

HTML & CSS
1

Hi all,

Here is an issue I’m struggling with:

Problem: The home page with slide show & content renders properly in Firefox, Chrome, IE8-9…but not IE7 (I’m using the compatibility browser view in IE9 instead of an actual IE7 and I assume it’s the same) - why?
My guess: IE7 is handling the float property differently…For some reason

<div id=“front-page-content-wrapper”><div id=“content2-head”>What I Do…<div id=“content3-head”>My clients…</div>
and their inner div blocks are floating up past the slideshow in IE7.
Site link showing the problem in IE7 (use IE7 browser to view problem): http://www.binarywebpark.com/

Summary code snippet: Because the site is built in drupal (and there are divs within divs within divs…), I thought it might be easier if I post a simplified version of the code…Essentially:

<div id="page-wrapper"><div id="page">

  <div id="main-wrapper"><div id="main" class="clearfix<?php if ($main_menu || $page['navigation']) { print ' with-navigation'; } ?>">

  <!--BEGIN custom trim -->
     <div id="border-trim"></div>
     <!--END custom trim -->

    <div id="content" class="column"><div class="section">

      
      <a id="main-content"></a>
    

       <!--BEGIN print slide show on front page, 10/6/11 Thurs -->
        <div id="slide_show">
        <?php print render($page['slide_show']); ?>
        </div>
      
      <!--END print slide show on front page, 10/6/11 Thurs -->
    
    </div></div><!-- /.section, /#content -->
  
  
 <!--BEGIN custom content if front page, 10/4/11 Tues -->

     <div id="simpleclearblock"></div>
    <!--BEGIN custom trim -->
     <div id="border-trim"></div>
     <!--END custom trim -->

   <div id="front-page-content-wrapper">
    [B]<div id="content2-head">[/B]
    What I Do
    [B]<div id="content2">[/B]
      <?php print render($page['content2']); ?>
    </div>
    </div> <!-- /.section, /#content2 -->
    [B]<div id="content3-head">[/B]
     My Clients
    [B]<div id="content3">[/B]
      <?php print render($page['content3']); ?>
    </div>
    </div><!-- /.section, /#content3 -->
    <?php endif; ?>
   <!--END custom content if front page, 10/4/11 Tues -->

        <?php print render($page['navigation']); ?>

      </div></div><!-- /.section, /#navigation -->
    <?php endif; ?>
   
  </div></div><!-- /#main, /#main-wrapper -->

</div></div><!-- /#page, /#page-wrapper -->

Thanks in advance for any help.

2

The IE7 option isn’t very reliable and misses most actual bugs but can be used as a rough guide only.

IE7 is handling the float property differently…For some reason and their inner div blocks are floating up past the slideshow in IE7.
Site link showing the problem in IE7 (use IE7 browser to view problem): http://www.binarywebpark.com/

The problem seems to be cause by this rule:


#content, .no-sidebars #content {
	float:left;
	width:960px;
	margin-left:0;
	margin-right:-960px;
	padding:0;
}

A width of 960px and a negative margin of -960px effectively mean the element has zero width and IE7 duly ignores it because it isn’t really there at all. It’s a technique usually used to move columns around without changing the source order of the html but you have to many divs and too many rules for me to debug easily.

If you remove the negative margin from Content then IE7 will work as expected:


#content{margin-right:0!important}

However I don’t know what implications that will have on other pages where you may be utilising the column swapping texhniques. Maybe for now just give that rule to IE7 and under.

3

If it was after me, i would restrict peoples using ie versions lower than 8.

It is only an extra effort to make an website render properly in ie (lower than 8)

Cheers

4

Thank you Paul, this worked (although I think you need a semicolon after the “!important” to ensure the CSS gets applied properly??)…You’re right about too many divs/rules, part of the problem is I didn’t create the original markup template, I’m simply adapting the code for use as a “sub-theme”.

It is only an extra effort to make an website render properly in ie (lower than 8)

  • radyb, good point, I agree whole-heartedly. Since this was going to be used as a site to showcase portfolio work, I wanted to try and make it as cross-browser compatible as possible. If it were up to me, I’d never have to code for IE again :slight_smile: Actually, reading the browser stats for Sep 2011 (http://www.w3schools.com/browsers/browsers_explorer.asp), it’s interesting to note 22.9% of the market still uses IE, and of that 22.9%, 3.9% use IE7. If I did the math right, then that means roughly 17% of IE users are using IE7. But fortunately, the trend points downward in its usage.
5

No you don’t actually need the trailing semi-colon on the last item as its optional. The semi colon is there to tell the browser there are more rules to come but f there is only one rule or the rules is the last in the list then its not needed. I always omit it for one line rules like that but always add it for two or more rules.:slight_smile:

6

great, thank you for that tip!