SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member JasonHenry's Avatar
    Join Date
    Feb 2010
    Location
    Minnesota, USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6&7 CSS issue

    Hello all. I have been pulling my hair out trying to get my website to display correctly in older IE browsers. It is designed as a 2 column layout with the left column containing 3 columns. In older IE browsers the columns do not set as 3 but ride the left - one below the other. I do not have much experience with CSS.

    Here is my website.
    Here is the style sheet

    I don't expect someone to fix my problem, but if one of you gurus see something obvious I appreciate a few pointers. Thanks.

    ~Jason

  2. #2
    SitePoint Member JasonHenry's Avatar
    Join Date
    Feb 2010
    Location
    Minnesota, USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Snip of code involved:
    PHP Code:
    <div id="left">

    <-----SNIP------->

    <?php echo '<div id="homewrapper"><div id="column1"><div id="home_category_heading">'.$cats[name].'</div>';

        
    $num 0;
        while(
    $games mysql_fetch_array($queryMYSQL_ASSOC)){
            
    //echo $games['title'];
            
    $gameurl $games['title'];
            
    $gameurl str_replace(" ""-"$gameurl);
            
    $gameurl str_replace("'""_"$gameurl);
            
    $gameurl str_replace('"'"_"$gameurl);
            
    $gameurl str_replace('/'"_"$gameurl);
            
    $gameurl str_replace("\\""_"$gameurl);

            
    $gameurl rawurlencode($gameurl);
            
    $games['description'] = stripslashes($games['description']);

            
    $name substr($games['title'], 028);
            if(
    strlen($games['description']) > 45){
                
    $games['description'] = substr($games['description'], 045)."...";
            }
            else {
                
    $games['description'] = $games['description'];
            }

            if(
    $num == 4){
                echo 
    '';
                
    $num 0;

            }
            else {
            }
               if (
    $seo==yes) {
                echo
    '
                    <div id="homepage_games">
                    <a href="' 
    $siteurl 'game/' $games['id'] . '/' $gameurl '.html' '">
                    <img align="absmiddle" src="' 
    $games['thumbnail'] . '" width="60" height="60" />&nbsp;' $name '</a>
                    </div>'
    ;
            }
            elseif (
    $seo==no) {
                echo
    '
                    <div id="homepage_games">
                    <a href="' 
    $siteurl 'index.php?act=game&id=' $games['id'] . '">
                    <img align="absmiddle" src="' 
    $games['thumbnail'] . '" width="50" height="50" />&nbsp;' $name '</a>
                    </div>'
    ;    
            }
                                   
            
    $num++;
        }
        
    ?>


        </div></div>
    CSS involved:
    Code CSS:
    #left {
    position:relative;
    float: left;
    width: 688px;
    color: #784d00;
    padding-top: 10px;
    padding-left: 8px;
    overflow:hidden;
    display: inline-block;
    }
    #homewrapper{
    width:100%;
    position: relative;
    }
    #column1{
    float:left;
    width:32%;
    margin-right:5px;
    margin-top:5px;
    text-align:left;
    }
    #home_category_heading {
    width:100%;
    margin:4px;
    margin-bottom:4px;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    color:#00324c;
    background: #d4e2ec url('images/maincat.gif');
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 5px;
    padding-bottom: 9px;
    font-size:16px;
    font-weight: bold;
    text-align:center;
    }

    By trial and error adding:
    Code CSS:
    display:inline;
    to
    Code CSS:
    #homewrapper{
    width:100%;
    position: relative;
    }
    the columns line up. i really don't know why. I have read beaucoup pages today and have been trying everything. Any ideas?

  3. #3
    SitePoint Member JasonHenry's Avatar
    Join Date
    Feb 2010
    Location
    Minnesota, USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding that did fix my issue. Now I am wondering if someone can explain why that worked. What is different about the way the 2 browsers look at the css, especially IE 6/7, that this was needed. This will help me get a better grip on further enhancements and other future projects. Thanks.


Bookmarks

Posting Permissions

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