Wrapping text

HTML & CSS
1

Hi guys, I’ve found that trying to please all the browsers at once is a nightmare. My site looks great in Firefox and chrome but having issues in IE. Having not worked with CSS before i’m just trying to set up a simple site template. code is below

1st - Got a few issues, in IE it some how stretches the text so it fits the full width. how do i get around this?

2nd - The gradient code for the top link bar doesnt work right in IE, it sorta fades into transparent.

Thanks for any help, you can see the uploading file here

http://www.worktopmagic.co.uk/newsite.php



<html>
    <head>
        <style type="text/css">


  p{ padding: 15px;}
  body {
   background-image: url(newBack.gif);
   background-repeat: repeat;
   font-family:"Verdana";
  }
 
  #container{
      width:800px;
      margin:0 auto;
      margin-left: auto ;
      margin-right: auto ;
  }

  div.topbox {
  width: 800px ;
  margin-left: auto ;
  margin-right: auto ;
  background-color: #FFAA00;
  text-decoration: none;
  text-align: center;
  display:inline-block;
  color: white;
  }

  div.topaddbox {
  width: 800px ;
  height: 25px;
  margin-left: auto ;
  margin-right: auto ;
  /*background-color: #A3C2E2;*/
  text-decoration: none;
  text-align: center;
  display:inline-block;
  color: white;
  text-decoration: underline;

      background: #2668B3 ;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #2668B3, #6191C1);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#2668B3), to(#6191C1));
    /* MSIE*/
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#2668B3 ', EndColorStr='#6191C1', GradientType=0);
  
       }

  div.main {
  width: 800px ;
  height: auto;
  margin-left: auto ;
  margin-right: auto ;
  background-color: white;
  text-decoration: none;
  text-align: center;
  display:inline-block;
  color:black;
  text-align: justify;
  text-justify:distribute-all-lines;


  }

  div.addbox {
   padding: 2px;
  width: 336px ;
  height: 280px;
  margin: 4px ;
  background-color: yellow;
  text-decoration: none;
  display:inline-block;
  float: left;
  }




        </style>
    </head>
<body>
<center>
<div class="container">

    <div class="topbox">
        <h1>Page Title</h1>
    </div>
    
    <div class="topaddbox">
        My Main header links
    </div>

    <div class="main">
       
        <div class ="addbox">
        </div>


<p> Random text Random text Random text Random text Random text Random text Random text  Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text</p>

<p>Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text Random text</p>





    </div>

</div>
</center>
</body>
</html>
2

Hi Darren,

You need to get a proper doctype on your page so that IE will be in standard mode. Always need to make sure that there is no comments or whitespace before the doctype or that will throw IE into quirks mode.

Use a strict doctype and get all the deprecated tags out of your html, in your case that is the <center> tag. The reason margin:0 auto; was not working for you was because your container div had an ID on it in the CSS and a class on it in the html.

Just a quick rework of your code produces something like this which works fine in IE:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    background: url(newBack.gif);
    font: 100%/1.4 verdana, arial, helvetica, sans-serif;
}
#container {
    width: 800px;
    margin: 10px auto;
}
#header {
    width: 100%;/*haslayout IE6 = contain floats*/
    overflow:hidden;/*contain floats and un-collapse child margins*/
    background: #FFAA00;
    text-align: center;
    color: #FFF;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
ul#menu {
    margin: 0;
    padding: 2px 0;
    list-style: none;
    text-align: center;
    color: #FFF;
    background: #2668B3;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #2668B3, #6191C1);
    /* Chrome, Safari: */
    background: -webkit-gradient(linear, left top, left bottom, from(#2668B3), to(#6191C1));
    /* MSIE*/
    filter: progid: DXImageTransform.Microsoft.Gradient( StartColorStr='#2668B3 ', EndColorStr='#6191C1', GradientType=0);
}
    #menu li {
        display:inline;    
    }
    #menu li a {
        margin:0 5px;
        padding: 2px;
        color:#FFF;
        text-decoration: underline;
    }
    #menu li a:hover {color:#00F; background:#FFF}

#main {
    width: 100%;/*haslayout IE6 = contain floats*/
    background: #FFF;
    text-align: justify;
    overflow:hidden;/*contain child floats*/
}
    .addbox {
        float: left;
        width: 336px;
        height: 280px;
        margin: 4px;
        padding: 2px;
        background: yellow;
    }
    p {
        margin: 15px;
    }
</style>
</head>
<body>

<div id="container">
    <div id="header">
        <h1>Page Title</h1>
    </div>
    <ul id="menu">
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
    <div id="main">
        <div class ="addbox"></div>
        <p>Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text</p>
        <p>Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text Random text Random text Random text Random text Random text Random 
        text Random text Random text Random text</p>
    </div>
</div>

</body>
</html>
3

Wow, thanks for going to so much trouble I’ll take a look at it all now :slight_smile:

Thanks!