ansaurus

Question

CSS - Text overlaping in IE. Ok in FF, but IE just doesn't like it.

Answer 1

A:

u can use float instead of inline-block like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt;      
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>work page</title> 
<style type="text/css"> 
<!--
/* --- --- */
#wrapper {
    width:731px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
}
/* --- --- */
#wholepage {
    width: 674px;
    display: inline-table;
    margin-left: 28px;
}
#prefmatchbox {
    width: 600px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}
.titlecenter {
    padding-top: 2px;
    padding-bottom: 3px;
    font-size: 15px;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    width: 100%;
    border: 2px outset #333333;
    display: inline-table;
}
.box {
 padding: 0 25px;
}
.left {
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 200px;
    float:left;
}
.center {
    text-transform: capitalize;
    padding-top: 2px;
    float:left;
    padding-bottom: 2px;
    text-align: center;
    width: 150px;
}
.right {
    text-align: center;
    padding-top: 2px;
    float:right;
    padding-bottom: 2px;
    width: 200px;
}

-->
</style> 
</head> 
<body> 
<div id="wrapper"> 
  <div id="wholepage"> 
    <div id="prefmatchbox"> 
      <div class="titlecenter">food</div> 
      <div class="box"> 
        <div class="left">peaches<br /> </div> 
        <div class="center">fruit</div> 
        <div class="right">plums<br />
        </div> 
        <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">lettuce<br /> 
        </div> 
        <div class="center">vege's</div> 
        <div class="right">carrots<br /> 
        </div>
         <br clear="all" /> 
      </div> 
      <div class="box"> 
        <div class="left">wheat<br /> 
        </div> 
        <div class="center">bread</div> 
        <div class="right">white<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">gum drops<br /> 
        </div> 
        <div class="center">candy</div> 
        <div class="right">chocolate<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">water<br /> 
        </div> 
        <div class="center">drink</div> 
        <div class="right">juice<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="titlecenter">plants</div> 
      <div class="box"> 
        <div class="left">weed grass<br /> 
        </div> 
        <div class="center">weeds</div> 
        <div class="right">some other weed<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">maple<br /> 
        </div> 
        <div class="center">tress</div> 
        <div class="right">fir<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">Rose bud<br /> 
          flourance<br /> 
          galaxy bloom<br /> 
        </div> 
        <div class="center">flowers</div> 
        <div class="right">blah<br /> 
          Rose<br /> 
          Humperdinkle<br /> 
          greedy lane<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="titlecenter">cars</div> 
      <div class="box"> 
        <div class="left">porsche<br /> 
        </div> 
        <div class="center">fast</div> 
        <div class="right">lamborghini<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">explorer<br /> 
        </div> 
        <div class="center">big</div> 
        <div class="right">suburban<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">mercedes<br /> 
        </div> 
        <div class="center">slow</div> 
        <div class="right">honda<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="titlecenter">movies</div> 
      <div class="box"> 
        <div class="left">iron man 2<br /> 
        </div> 
        <div class="center">action</div> 
        <div class="right">kick ass<br /> 
        </div> 
         <br clear="all" />
      </div> 
    </div> 
  </div> 
</div> 
</body> 
</html>

Vaibhav Gupta 2010-08-28 18:41:00

Thanks for all your help! :)MP123

MP123 2010-08-28 19:30:16

Answer 2

A:

It works fine in IE 8. IE 7 and earlier doesn't support display:inline-table.

Guffa 2010-08-28 18:42:26

As simple as that? It doesn't work in my version. Well, that was easy. Now how do I delete this question?

MP123 2010-08-28 18:58:17

ansaurus

tags:

views:

answers:

CSS - Text overlaping in IE. Ok in FF, but IE just doesn't like it.

related questions