SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: wrapping text

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    wrapping text

    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


    Code:
    <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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <!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. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks for going to so much trouble I'll take a look at it all now

    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
  •