SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    code not working in IE 6

    link for the website is: http://moneyzzsharma.comze.com/

    this is not same in IE6. i.e the 3 orange tables. If i make them float:left then they lose their equal height. should i make a different stylesheet for IE6? Also if possible please tell the reason of the failure of the code in IE 6.


    CSS code is:

    Code:
    .cols{
    width:100%;	
    word-spacing:.3em !important;
    
    z-index:105;
    }
    
    .colscenterbox{
    width:100%;
    display:table;
    
    border-spacing:10px;
    position:relative;
    margin:60px auto 0;
    z-index:105;
    	
    }
    
    
    .colsouterbox{
    	display:table-cell;
    	width:30%;
    	border-radius:8px;
    	background-color:#ff5118;
    	padding-bottom:12px;
    }
    
    .colsinnerbox{
    width:90%;
    max-width:90%;
    text-align:justify;
    margin:auto;
    }
    
    .col1{
    }
    
    .col2{
    margin-left:4%;
    margin-right:4%;
    }
    
    .colsheading{	
    margin-top:0.5em;
    font-size:1.3em;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bolder;
    }
    
    
    .colsimg{
    margin:20px auto;
    max-width:100%;
    width:100%;	
    border:1px solid #C30;
    }
    
    .colspara{
    height:auto;
    margin:0 auto;	
    }

    HTML Code is:

    Code:
    <div class="cols">
    
    <div class="colscenterbox">
    
    
    
    <div class="col1 colsouterbox">
    
    <div class="colsinnerbox">
    
    <h1 class="colsheading">
    Business Plans
    </h1>
    
    <img src="images/col1.jpg" class="colsimg" />
    
    
    <p class="colspara">
    Here you will find free samples of business plans that will help you to run your own business.
    </p>
    
    
    </div><!--colsinnerbox ends-->
    
    
    </div><!--col1 ends-->
    
    <div class="col2 colsouterbox">
    
    <div class="colsinnerbox">
    
    <h1 class="colsheading">About Template</h1>
    
    <img src="images/col1.jpg" class="colsimg" />
    
    <p class="colspara">
    Free Website Template from TemplateMonster.com! We hope that you like this template and will use it for your websites.</p>
    
    </div><!--colsinnerbox ends-->
    
    </div><!--col2 ends-->
    
    
    
    
    
    <div class="col3 colsouterbox">
    
    <div class="colsinnerbox">
    
    <h1 class="colsheading">Useful Information</h1>
    
    <img src="images/col1.jpg" class="colsimg" />
    
    <p class="colspara">
    Read this sample article and learn more about the strategic business planning.
    </p>
    
    
    </div><!--colsinnerbox ends-->
    
    </div><!--colscenterbox ends-->
    
    </div><!--col3 ends-->
    
    <div class="fake_float">
    </div>
    
    </div><!--cols ends-->

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I explained in the other thread that display:table is IE8 plus only. I also mentioned that you should just float them and lose the equal height for IE6 and 7 as they are very low usage these days and you shouldn't spend too much time on them. Unequal boxes is no big deal so just float them with a min-height for ie7 and a height for ie6. However most people have dropped support for Ie6 now and only give cursory support for IE7.

    Set up a conditional stylesheet for IE7 and IE6 and apply the floated rules. Or you could use this code in the main stylesheet.

    Code:
    *+html .colsouterbox{float:left;min-height:250px}/* ie7 only*/
    * html .colsouterbox{float:left;height:250px}/* ie6 only*/
    You may have to tweak positions etc.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I explained in the other thread that display:table is IE8 plus only. I also mentioned that you should just float them and lose the equal height for IE6 and 7 as they are very low usage these days and you shouldn't spend too much time on them. Unequal boxes is no big deal so just float them with a min-height for ie7 and a height for ie6. However most people have dropped support for Ie6 now and only give cursory support for IE7.

    Set up a conditional stylesheet for IE7 and IE6 and apply the floated rules. Or you could use this code in the main stylesheet.

    Code:
    *+html .colsouterbox{float:left;min-height:250px}/* ie7 only*/
    * html .colsouterbox{float:left;height:250px}/* ie6 only*/
    You may have to tweak positions etc.
    Thanks again


Tags for this Thread

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
  •