www.webdeveloper.com
Results 1 to 7 of 7

Thread: IE 6&7 messing with layout

  1. #1
    Join Date
    Apr 2011
    Posts
    10

    IE 6&7 messing with layout

    Hey,

    I am currently working on this site http://www.happyandhealthy.ca.
    It displays properly on all browsers except IE 6 & 7, for some reason the middle content div is being pushed down to the bottom of the page, not sure why this is happening.
    I tried to attach a picture of how it renders in IE 6 & 7, not sure if it worked.

    Below is the template file code i am working from:

    HTML Code:
    <?php
      // Start the session
      require_once('startsession.php');
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>Happy and Healthy - Personal Trainer</title>
        <link rel="stylesheet" type="text/css" href="happy.css" />
    	<!--[if IE]><link rel="stylesheet" type="text/css" href="happyIE.css" /><![endif]-->
    </head>
    <body>
        <div class="border">
            <div class="header">
                <?php require_once('headimg.php'); ?>
            </div><!--end header-->
            <!-- <hr class="headerhr" />-->
            
            <div class="tempnav">
                <?php require_once('nav.php');?>        
            </div><!--end nav-->
                      
            <div class="content">
               <div class="contop">
                   <h2>Calander</h2>
               </div> 
               
               <div class="tempconmid">
               <?php
                   require_once('logincheck.php');
                   require_once('connectvars.php');
                   
               ?>
               </div>
               
               <div class="conbot">
                   <textarea style="display:none" cols="20" rows="5" wrap="hard">
               </div>
            </div><!--end content-->
           <!-- <hr class="headerhr" />-->      
           
            <div class="footer">
               
            </div>
        </div><!--end border-->
    </body>
    </html>
    and this is the CSS code used to style it:
    Code:
    .conmid {
        background-image: url("conmid.png");
        background-repeat: repeat-y;
        margin-left: 23px;
        margin-right: auto;
        margin-top: -3%;
            }
    any help would be great,

    thanks.
    Attached Images Attached Images

  2. #2
    Join Date
    Feb 2011
    Posts
    11
    You can't expect the browser to correctly display a page made up with crappy html...

    First of all, make sure your page validates in the w3 validator: http://validator.w3.org/check?uri=ht...Inline&group=0

    When that's done, try it again, and it'll possibly look a lot better.

    When it doesn't look like you want, come back here, and post it again, then I'll have a look.

  3. #3
    Join Date
    Apr 2011
    Posts
    10
    Hey SanderDeclerck,

    Thanks for the reply. I ran both my php and css files through the vaildator's and made the corrections they suggested, but nothing chnaged with IE 6 & 7. Most of the errors(11) where caused by the go daddy adverts, which i cannot fix. They are not causing the break in layout.

    Would really appreciate the help,

    Thanks.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there Aslan00,

    the best way to treat those two dinosaurs, IE6 and IE7, is to simply serve them with plain HTML.

    To achieve peace of mind, remove this code....
    Code:
    
    <!--[if IE]><link rel="stylesheet" type="text/css" href="happyIE.css" /><![endif]-->
    
    ...and use this instead...
    Code:
    
    <!--[if !lt IE 8]><!-->
    <link rel="stylesheet" type="text/css" href="happy.css" />
    <!--<![endif]-->
    
    For complete contentment, you might even consider using...
    Code:
    
    <!--[if !lt IE 9]><!-->
    Problem over.

    coothead

  5. #5
    Join Date
    Apr 2011
    Posts
    10
    Hey coothead,

    Thanks for the reply. I tried the code you suggested and there has been no change with IE, the middle section of my content still floats down to the bottom left.

    Any other suggestions?

    Thanks.

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there Aslan00,

    did you change this...
    Code:
    
    <!--[if IE]><link rel="stylesheet" type="text/css" href="happyIE.css" /><![endif]-->
    
    ...to this...
    Code:
    
    <!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="happyIE.css" /><![endif]-->
    
    ...or even remove it altogether.

    The whole point of this...
    Code:
    
    <!--[if !lt IE 8]><!-->
    <link rel="stylesheet" type="text/css" href="happy.css" />
    <!--<![endif]-->
    
    ...is to display IE6 and IE7 as plain HTML.

    coothead
    Last edited by coothead; 06-16-2011 at 02:52 PM.

  7. #7
    Join Date
    Jul 2011
    Posts
    1
    I had the same problem , just don't use the include or require ...
    use the original php code from that file and it will work just fine.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles