SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE window resize problem

    Hi all,

    I've created a css 2 column layout that will contain 1 table of pre-designed content. This is a temporary layout until we can redesign the entire site in css. The problem I'm facing is when an IE window is resized under 800px or so the table which is in the 2 column drops down to the bottom of the 1st column and does not allow the user to scroll horizontally. This only happens in IE.

    I've tried applying the overflow property to the 2nd column with limited success. After a little more work I did find an ugly fix by wrapping both columns in a fixed width container div. However, I'm wondering if there may be another solution.

    Please take a look at the following code. Any insight is appreciated. Thanks.



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body { 
    	margin-left: 0px; 
    	margin-top: 0px; 
    	margin-right: 0px; 
    	margin-bottom: 0px; 
    	/* background-color: #666666; 
    	background-image:url(../images/back01.gif); */
    	}
    #textonlytop img {
    	border: 0px;
    	}
    #textonlycontainer {
    	width: 100%;
    	background-color: #fff;
    	color: #333;
    	border: 5px solid gray;
    	line-height: 130%;
    	}
    #textonlytop {
    	padding: 2em 1em 2em 0em;
    	background-color: #831818;
    	}	
    #textonlytop h1 {
    	padding: 0;
    	margin: 0;
    	}	
    #leftrightcontainer {
    	width: 1024px;
    	}
    #textonlyleftnav {
    	float: left;
    	height: 100%;
    	width: 225px;
    	margin: 8px 0 0 0;
    	padding: 0 0 0 0;
    	}
    #textonlycontent {
    	margin-left: 235px;
    	margin-top: 35px;
    	margin-right: 0px;
    	border-left: 1px solid #cccccc;
    	border-right: 0px solid #cccccc;
    	padding: 0;
    	vertical-align: top;
    	}
    #textonlyfooter {
    	clear: both;
    	margin: 0;
    	padding: .5em;
    	padding-top: 35px;
    	padding-bottom: 35px;
    	color: #333;
    	background-color: #fff;
    	}
    #textonlyfooter img {
    	display: block;
    	border: none;
    	float: left;
    	clear: none;
    	}
    
    /* text only - main navigation */
    
    #textonlymainnav {
    	margin: 0px 0px 0px 0px;
    	padding: 0px;
    	height: 26px;
    	width: 100%;
    	min-width: 800px;
    	background-color:#000;
    	}
    #textonlymainnav ul {
    	border: 0px;
    	width: 800px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    	text-align: center;
    	}
    #textonlymainnav ul li {
    	display: block;
    	float: left;
    	text-align: center;
    	padding: 0px;
    	margin: 0px;
    	}
    #textonlymainnav ul li a, #textonlymainnav ul li a:visited {
    	background: #000;
    	width: 85px;
    	height: 26px;
    	border: 0px;
    	border-right: 1px solid #444;
    	padding: 0px;
    	margin: 0px 0px 0px 0px;
    	color: #B5B5B5;
    	text-decoration: none;
    	display: block;
    	text-align: center;
    	font: bold 10px/24px Verdana, Arial, Helvetica, sans-serif;
    	}
    #textonlymainnav ul li a:hover, #textonlymainnav ul li a:active {
    	color: #fff;
    	background: #666666;
    	}
    #textonlymainnav ul li a.currentpage {
    	color: #fff;
    	background: #4E0D0D;
    	}
    
    /* text only - sidelinks */
    
    #textonlysidelinks {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	}
    #textonlysidelinks h4 {
    	font: 9px Verdana, Arial, Helvetica, sans-serif;
    	color: #333333;
    	background-color: #E7E7E7;
    	margin: 0;
    	padding: 5px 0 5px 15px;
    	}	
    #textonlysidelinks ul {
    	float: left;
    	width: 200px;
    	list-style-type: none;
    	margin: 11px 0 0 10px;
    	padding: 0;
    	}
    #textonlysidelinks ul li{
    	float: left;
    	clear: left;
    	width: 100%;
    	}
    #textonlysidelinks ul li a, #textonlysidelinks ul li a:visited {
    	font: 10px Verdana, Arial, Helvetica, sans-serif;
    	text-decoration: none;
    	color: #333333;
    	display: block;
        background-color: #ffffff;
    	padding: 6px 10px 6px 0px;
    	border: 0px;
    	border-bottom: 1px solid #dddddd;
    	vertical-align: top;
    	}
    #textonlysidelinks ul li a:hover, #textonlysidelinks ul li a:active {
        background-color: #F5F5F5;
    	color: #990000;
    	}
    #textonlysidelinks ul li a.currentpage {
    	font-weight: bold;
    	}	
    #textonlysidelinks ul li ul {
    	list-style-type: none;
    	padding: 0px;
    	margin: 0px;
    	padding-bottom: 10px;
    	background-color: #E7E7E7;
    	}	
    #textonlysidelinks ul li ul li {
    	border: 0px;
    	background-image: url(dot.gif);
    	background-position: left;
    	background-repeat: no-repeat;
    	}
    #textonlysidelinks ul li ul li a, #textonlysidelinks ul li ul li a:visited {
    	font: 10px Verdana, Arial, Helvetica, sans-serif;
    	border: 0px;
    	padding: 3px 10px 3px 32px;
    	background-image: url(../text/dot.gif);
    	background-position: top;
    	background-repeat: no-repeat;
    	background-color: #E7E7E7;
    	}
    #textonlysidelinks ul li ul li a:hover, #textonlysidelinks ul li ul li a:active {
    	background-image: url(../text/dot2.gif);
    	background-color: #F5F5F5;
    	}
    #textonlysidelinks ul li ul li a.currentpage {
    	font-weight: bold;
    	}
    	
    /* text only - functionlinks */
    
    div#textonlyfunctionlinks {
    	width: 180px !important;
      	width /**/:200px;
    	border: 1px solid #dddddd;
    	margin: 25px 25px 0px 10px;
    	padding: 10px;
    	}	
    div#textonlyfunctionlinks ul {
    	padding: 0px;
    	margin: 0px;
    	list-style-type: none;
    	}
    div#textonlyfunctionlinks ul li {
    	display: block;
    	}
    div#textonlyfunctionlinks ul li a{
    	display: block;
    	font-size: 9px;
    	background-image: url(../text/toarrow.gif);
    	background-position: top;
    	background-repeat: no-repeat;
    	padding-left: 25px;
    	padding-bottom: 5px;
    	}
    p.break {
    	font: 11px/16px verdana, geneva, arial, sans-serif; 
    	text-decoration: none; 
    	color: #333333;
    	}
    </style>
    </head>
    <body>
     <div id="textonlycontainer">
    <div id="textonlytop">
    </div>
    <div id="textonlymainnav">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Publications</a></li>
    <li><a href="#">Press Room</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Site Map</a></li>
    </ul>
    </div>
    <div id="textonlyleftnav">
     <div id="textonlysidelinks">
                <ul>
                  <li><a href="#">Applied Social Science Research &amp; Evaluation</a></li>
                      <li><h4>AREAS OF EXPERTISE </h4>
                      <ul>
                        <li><a href="#">Program Evaluation</a></li>
                        <li><a href="#">Survey Research</a></li>
                        <li><a href="#">Needs Assesment &amp; Market Research Services</a></li>
                        <li><a href="#">Policy Research</a></li>
                        <li><a href="#">Organizational Assessment</a></li>
                      </ul></li>
                      <li><h4>RELATED LINKS </h4>
                      <ul>
                        <li><a href="#">Staff Profiles</a></li>
                        <li><a href="#">Sample Projects</a></li>
                        <li><a href="#">Customer List</a></li>
                        <li><a href="#">Highlight Archive</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Consulting</a></li>
                  <li><a href="#">Democracy Education</a></li>
                  <li><a href="#">Early Childhood Development</a></li>
                  <li><a href="#">Economic & Public Policy Research</a></li>
                  <li><a href="#">Training</a></li>
                  <li><a href="#">Workforce Development</a></li>
                </ul>
    </div> 
             
    </div>
    <div id="textonlycontent">
    <table border="1" cellpadding="0" cellspacing="0" width="560">
              <tr>
                <td class="maintext" align="left" bgcolor="#ffffff" valign="top">              
                            
                <p class="break">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elementum sem ac nisi. Nunc vestibulum nisi sed nulla. Cras lacus augue, malesuada at, nonummy mollis, euismod non, quam. Sed auctor lectus ut nulla. Aliquam fermentum neque in sem. Aliquam arcu. Nullam pede massa, imperdiet eget, egestas non, sollicitudin in, ipsum. Morbi mollis, risus sit amet tristique ornare, lorem mi ornare neque, a mattis lectus magna in pede. In hac habitasse platea dictumst. Pellentesque consequat risus sit amet justo. Ut non augue. Donec lectus. Morbi faucibus nisl et risus.
    
    Morbi sit amet nulla. Curabitur non arcu. </p>
                <p class="break">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam hendrerit, elit non bibendum luctus, enim velit feugiat lacus, in convallis dolor mi venenatis massa. Nulla facilisis ligula vel purus. Donec laoreet, purus ut faucibus condimentum, justo elit lacinia dui, ac cursus nisl sapien ac dui. Nunc euismod sapien quis sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum, enim nec mollis sollicitudin, nisl nisl tincidunt ligula, vitae eleifend sem arcu aliquam urna. Pellentesque imperdiet interdum sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec magna. Curabitur mi.
      
    Sed non purus sit amet sem hendrerit rutrum. Sed sit amet arcu. Proin volutpat pede vitae augue. Mauris non nisi. Donec sapien. Nunc venenatis lobortis tellus. Sed feugiat vulputate orci. Donec et magna. Praesent aliquet, ligula ultricies cursus faucibus, diam velit fringilla arcu, vel viverra ipsum orci at pede. Pellentesque consectetuer posuere pede. Nulla nulla tellus, consectetuer eu, accumsan ut, commodo a, purus.
    </p>
                <p class="break">Sed sit amet metus. Proin nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo, dui ac cursus tincidunt, enim sapien ornare turpis, et facilisis neque sem quis magna. Duis in est id arcu cursus ultricies. Mauris sapien. Aenean mollis ligula eget orci. Nam sollicitudin metus sit amet nulla. Sed ut dolor mollis eros laoreet dapibus. Ut et metus. Morbi quis quam ut arcu tempus sodales. Donec iaculis. Nullam aliquet sem sed diam. Morbi vitae lacus. Etiam varius risus nec nulla. Integer quis velit. Mauris dapibus. </p>
                <p class="break">Nunc quis mi non pede accumsan bibendum. Integer quis turpis. Quisque pellentesque nulla ut lacus.
          
    Curabitur gravida ullamcorper ligula. Etiam malesuada arcu vitae purus. Aenean massa. Suspendisse viverra pulvinar tortor. Nunc hendrerit erat vitae augue. Integer vitae purus. Vestibulum luctus convallis tortor. Fusce eget nulla quis purus ornare sollicitudin. Aliquam consectetuer pede sit amet arcu. In non massa. Vestibulum quis purus vulputate nulla varius imperdiet. Duis pulvinar. Aliquam tristique accumsan risus. Phasellus porta, odio non luctus imperdiet, nulla nunc sollicitudin urna, id nonummy neque dolor ut nulla. Praesent tempus. Integer mattis, dui a tincidunt gravida, justo pede eleifend arcu, vitae posuere tortor sapien et urna.
    </p>
                <p class="break">In neque nisl, molestie id, pulvinar vitae, dictum ut, mi. Nulla est ligula, accumsan vitae, elementum id, viverra vitae, ligula. Ut mollis augue eu dui. Suspendisse turpis magna, pellentesque et, dapibus id, pulvinar ut, nunc. Aenean a mi. Aliquam iaculis. In purus. Ut nec felis. Suspendisse eleifend, urna sit amet semper nonummy, neque sem hendrerit augue, eu feugiat sem turpis quis neque. Duis sodales dapibus ipsum. Nulla pharetra pharetra nunc. Proin eget risus sit amet dolor gravida nonummy. </p>
                <p class="break">Etiam vestibulum orci interdum turpis. Nam tincidunt neque nec ligula. Mauris tortor. Integer ligula. Praesent ornare dignissim magna. Proin mauris orci, ornare sed, convallis a, tincidunt eu, ipsum. Vivamus quis justo posuere felis rutrum rutrum. Suspendisse bibendum scelerisque arcu.
              
    Morbi egestas. Cras rhoncus. Integer id neque. Nulla vitae enim. In erat ligula, accumsan non, condimentum eu, malesuada ut, nisl. Aliquam erat volutpat. Nunc suscipit rutrum ligula. Duis et diam eget mauris auctor accumsan. Vestibulum dictum cursus pede. Fusce pulvinar mollis orci. Sed velit pede, varius ac, viverra eget, ultrices et, justo. </p>
                <p class="break">Morbi bibendum arcu. Etiam nulla purus, dignissim quis, facilisis sit amet, dignissim eu, elit. Fusce lacinia tincidunt eros. Mauris rhoncus, arcu id commodo aliquam, elit velit varius elit, a tincidunt dui risus eu felis. In dictum aliquet eros.
                
    Donec vel eros. Nam egestas augue id risus. Nulla lobortis metus venenatis ipsum. Aenean et erat. Sed convallis. Nam adipiscing. Nunc vulputate massa sit amet orci molestie mollis. Integer cursus massa nec nisi. Fusce dolor orci, auctor at, egestas non, mattis molestie, risus. Pellentesque non mauris. In a libero eu leo molestie congue. Sed cursus nulla. Curabitur condimentum aliquet quam. Pellentesque porta imperdiet nisi. In mi. </p></td>
              </tr>
    </table>
    </div>
    <div id="textonlyfooter">
    </div>
    </div>
    </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think you'll need the class="break" on your paragraphs, since you can target them directly via their parent (class="maintext") instead. But for your particular situation, I'd go with a minimum width instead of an explicit width. There are two ways you can do this to make it work in IE 6 (which doesn't understand min-width). Scripting via a proprietary expression, or some additional CSS code.

    http://friendlybit.com/css/min-width...idth-template/ (uses an expression)
    http://www.pmob.co.uk/temp/min-width-ie.htm (uses extra HTML and CSS)

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again, thank you Dan. I'll look into both and figure out which one is the best for this project.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If you don't mind changing the html a little bit you can use negative margins to cure the float drop.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body { 
    margin:0;
    padding:0;
        /* background-color: #666666; 
        background-image:url(../images/back01.gif); */
        }
    #textonlytop img {
        border: 0px;
        }
    #textonlycontainer {
        background-color: #fff;
        color: #333;
        border: 5px solid gray;
        line-height: 130&#37;;
        }
    #textonlytop {
        padding: 2em 1em 2em 0em;
        background-color: #831818;
        }    
    #textonlytop h1 {
        padding: 0;
        margin: 0;
        }    
    #leftrightcontainer {
        width: 1024px;
        }
    #textonlyleftnav {
        float: left;
        height: 100%;
        width: 225px;
        margin: 8px -225px 0 -235px;
        padding: 0 0 0 0;
        display:inline;
        position:relative;
    }
    #textonlycontent {
        margin-left: 235px;
        margin-top: 35px;
        margin-right: 0px;
        border-left: 1px solid #cccccc;
        border-right: 0px solid #cccccc;
        padding: 0;
    }
    * html #textonlycontent{height:1%;position:relative}
    #textonlycontent #inner{float:left;width:100%}
    
    
    #textonlyfooter {
        clear: both;
        margin: 0;
        padding: .5em;
        padding-top: 35px;
        padding-bottom: 35px;
        color: #333;
        background-color: #fff;
        }
    #textonlyfooter img {
        display: block;
        border: none;
        float: left;
        clear: none;
        }
    
    /* text only - main navigation */
    
    #textonlymainnav {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        height: 26px;
        width: 100%;
        min-width: 800px;
        background-color:#000;
        }
    #textonlymainnav ul {
        border: 0px;
        width: 800px;
        float: left;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        text-align: center;
        }
    #textonlymainnav ul li {
        display: block;
        float: left;
        text-align: center;
        padding: 0px;
        margin: 0px;
        }
    #textonlymainnav ul li a, #textonlymainnav ul li a:visited {
        background: #000;
        width: 85px;
        height: 26px;
        border: 0px;
        border-right: 1px solid #444;
        padding: 0px;
        margin: 0px 0px 0px 0px;
        color: #B5B5B5;
        text-decoration: none;
        display: block;
        text-align: center;
        font: bold 10px/24px Verdana, Arial, Helvetica, sans-serif;
        }
    #textonlymainnav ul li a:hover, #textonlymainnav ul li a:active {
        color: #fff;
        background: #666666;
        }
    #textonlymainnav ul li a.currentpage {
        color: #fff;
        background: #4E0D0D;
        }
    
    /* text only - sidelinks */
    
    #textonlysidelinks {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        }
    #textonlysidelinks h4 {
        font: 9px Verdana, Arial, Helvetica, sans-serif;
        color: #333333;
        background-color: #E7E7E7;
        margin: 0;
        padding: 5px 0 5px 15px;
        }    
    #textonlysidelinks ul {
        float: left;
        width: 200px;
        list-style-type: none;
        margin: 11px 0 0 10px;
        padding: 0;
        }
    #textonlysidelinks ul li{
        float: left;
        clear: left;
        width: 100%;
        }
    #textonlysidelinks ul li a, #textonlysidelinks ul li a:visited {
        font: 10px Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: #333333;
        display: block;
        background-color: #ffffff;
        padding: 6px 10px 6px 0px;
        border: 0px;
        border-bottom: 1px solid #dddddd;
        vertical-align: top;
        }
    #textonlysidelinks ul li a:hover, #textonlysidelinks ul li a:active {
        background-color: #F5F5F5;
        color: #990000;
        }
    #textonlysidelinks ul li a.currentpage {
        font-weight: bold;
        }    
    #textonlysidelinks ul li ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
        padding-bottom: 10px;
        background-color: #E7E7E7;
        }    
    #textonlysidelinks ul li ul li {
        border: 0px;
        background-image: url(dot.gif);
        background-position: left;
        background-repeat: no-repeat;
        }
    #textonlysidelinks ul li ul li a, #textonlysidelinks ul li ul li a:visited {
        font: 10px Verdana, Arial, Helvetica, sans-serif;
        border: 0px;
        padding: 3px 10px 3px 32px;
        background-image: url(../text/dot.gif);
        background-position: top;
        background-repeat: no-repeat;
        background-color: #E7E7E7;
        }
    #textonlysidelinks ul li ul li a:hover, #textonlysidelinks ul li ul li a:active {
        background-image: url(../text/dot2.gif);
        background-color: #F5F5F5;
        }
    #textonlysidelinks ul li ul li a.currentpage {
        font-weight: bold;
        }
        
    /* text only - functionlinks */
    
    div#textonlyfunctionlinks {
        width: 180px !important;
          width /**/:200px;
        border: 1px solid #dddddd;
        margin: 25px 25px 0px 10px;
        padding: 10px;
        }    
    div#textonlyfunctionlinks ul {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        }
    div#textonlyfunctionlinks ul li {
        display: block;
        }
    div#textonlyfunctionlinks ul li a{
        display: block;
        font-size: 9px;
        background-image: url(../text/toarrow.gif);
        background-position: top;
        background-repeat: no-repeat;
        padding-left: 25px;
        padding-bottom: 5px;
        }
    p.break {
        font: 11px/16px verdana, geneva, arial, sans-serif; 
        text-decoration: none; 
        color: #333333;
        }
    </style>
    </head>
    <body>
    <div id="textonlycontainer">
        <div id="textonlytop"> </div>
        <div id="textonlymainnav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Publications</a></li>
                <li><a href="#">Press Room</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Site Map</a></li>
            </ul>
        </div>
        <div id="textonlycontent">
            <div id="textonlyleftnav">
                <div id="textonlysidelinks">
                    <ul>
                        <li><a href="#">Applied Social Science Research &amp; Evaluation</a></li>
                        <li>
                            <h4>AREAS OF EXPERTISE </h4>
                            <ul>
                                <li><a href="#">Program Evaluation</a></li>
                                <li><a href="#">Survey Research</a></li>
                                <li><a href="#">Needs Assesment &amp; Market Research Services</a></li>
                                <li><a href="#">Policy Research</a></li>
                                <li><a href="#">Organizational Assessment</a></li>
                            </ul>
                        </li>
                        <li>
                            <h4>RELATED LINKS </h4>
                            <ul>
                                <li><a href="#">Staff Profiles</a></li>
                                <li><a href="#">Sample Projects</a></li>
                                <li><a href="#">Customer List</a></li>
                                <li><a href="#">Highlight Archive</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Consulting</a></li>
                        <li><a href="#">Democracy Education</a></li>
                        <li><a href="#">Early Childhood Development</a></li>
                        <li><a href="#">Economic & Public Policy Research</a></li>
                        <li><a href="#">Training</a></li>
                        <li><a href="#">Workforce Development</a></li>
                    </ul>
                </div>
            </div>
            <div id="inner">
                <table border="1" cellpadding="0" cellspacing="0" width="560">
                    <tr>
                        <td class="maintext"  valign="top"><p class="break">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elementum sem ac nisi. Nunc vestibulum nisi sed nulla. Cras lacus augue, malesuada at, nonummy mollis, euismod non, quam. Sed auctor lectus ut nulla. Aliquam fermentum neque in sem. Aliquam arcu. Nullam pede massa, imperdiet eget, egestas non, sollicitudin in, ipsum. Morbi mollis, risus sit amet tristique ornare, lorem mi ornare neque, a mattis lectus magna in pede. In hac habitasse platea dictumst. Pellentesque consequat risus sit amet justo. Ut non augue. Donec lectus. Morbi faucibus nisl et risus.
                                
                                Morbi sit amet nulla. Curabitur non arcu. </p>
                            <p class="break">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam hendrerit, elit non bibendum luctus, enim velit feugiat lacus, in convallis dolor mi venenatis massa. Nulla facilisis ligula vel purus. Donec laoreet, purus ut faucibus condimentum, justo elit lacinia dui, ac cursus nisl sapien ac dui. Nunc euismod sapien quis sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum, enim nec mollis sollicitudin, nisl nisl tincidunt ligula, vitae eleifend sem arcu aliquam urna. Pellentesque imperdiet interdum sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec magna. Curabitur mi.
                                
                                Sed non purus sit amet sem hendrerit rutrum. Sed sit amet arcu. Proin volutpat pede vitae augue. Mauris non nisi. Donec sapien. Nunc venenatis lobortis tellus. Sed feugiat vulputate orci. Donec et magna. Praesent aliquet, ligula ultricies cursus faucibus, diam velit fringilla arcu, vel viverra ipsum orci at pede. Pellentesque consectetuer posuere pede. Nulla nulla tellus, consectetuer eu, accumsan ut, commodo a, purus. </p>
                            <p class="break">Sed sit amet metus. Proin nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo, dui ac cursus tincidunt, enim sapien ornare turpis, et facilisis neque sem quis magna. Duis in est id arcu cursus ultricies. Mauris sapien. Aenean mollis ligula eget orci. Nam sollicitudin metus sit amet nulla. Sed ut dolor mollis eros laoreet dapibus. Ut et metus. Morbi quis quam ut arcu tempus sodales. Donec iaculis. Nullam aliquet sem sed diam. Morbi vitae lacus. Etiam varius risus nec nulla. Integer quis velit. Mauris dapibus. </p>
                            <p class="break">Nunc quis mi non pede accumsan bibendum. Integer quis turpis. Quisque pellentesque nulla ut lacus.
                                
                                Curabitur gravida ullamcorper ligula. Etiam malesuada arcu vitae purus. Aenean massa. Suspendisse viverra pulvinar tortor. Nunc hendrerit erat vitae augue. Integer vitae purus. Vestibulum luctus convallis tortor. Fusce eget nulla quis purus ornare sollicitudin. Aliquam consectetuer pede sit amet arcu. In non massa. Vestibulum quis purus vulputate nulla varius imperdiet. Duis pulvinar. Aliquam tristique accumsan risus. Phasellus porta, odio non luctus imperdiet, nulla nunc sollicitudin urna, id nonummy neque dolor ut nulla. Praesent tempus. Integer mattis, dui a tincidunt gravida, justo pede eleifend arcu, vitae posuere tortor sapien et urna. </p>
                            <p class="break">In neque nisl, molestie id, pulvinar vitae, dictum ut, mi. Nulla est ligula, accumsan vitae, elementum id, viverra vitae, ligula. Ut mollis augue eu dui. Suspendisse turpis magna, pellentesque et, dapibus id, pulvinar ut, nunc. Aenean a mi. Aliquam iaculis. In purus. Ut nec felis. Suspendisse eleifend, urna sit amet semper nonummy, neque sem hendrerit augue, eu feugiat sem turpis quis neque. Duis sodales dapibus ipsum. Nulla pharetra pharetra nunc. Proin eget risus sit amet dolor gravida nonummy. </p>
                            <p class="break">Etiam vestibulum orci interdum turpis. Nam tincidunt neque nec ligula. Mauris tortor. Integer ligula. Praesent ornare dignissim magna. Proin mauris orci, ornare sed, convallis a, tincidunt eu, ipsum. Vivamus quis justo posuere felis rutrum rutrum. Suspendisse bibendum scelerisque arcu.
                                
                                Morbi egestas. Cras rhoncus. Integer id neque. Nulla vitae enim. In erat ligula, accumsan non, condimentum eu, malesuada ut, nisl. Aliquam erat volutpat. Nunc suscipit rutrum ligula. Duis et diam eget mauris auctor accumsan. Vestibulum dictum cursus pede. Fusce pulvinar mollis orci. Sed velit pede, varius ac, viverra eget, ultrices et, justo. </p>
                            <p class="break">Morbi bibendum arcu. Etiam nulla purus, dignissim quis, facilisis sit amet, dignissim eu, elit. Fusce lacinia tincidunt eros. Mauris rhoncus, arcu id commodo aliquam, elit velit varius elit, a tincidunt dui risus eu felis. In dictum aliquet eros.
                                
                                Donec vel eros. Nam egestas augue id risus. Nulla lobortis metus venenatis ipsum. Aenean et erat. Sed convallis. Nam adipiscing. Nunc vulputate massa sit amet orci molestie mollis. Integer cursus massa nec nisi. Fusce dolor orci, auctor at, egestas non, mattis molestie, risus. Pellentesque non mauris. In a libero eu leo molestie congue. Sed cursus nulla. Curabitur condimentum aliquet quam. Pellentesque porta imperdiet nisi. In mi. </p></td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="textonlyfooter"> </div>
    </div>
    </body>
    </html>
    I'm not sure why you are using a table for all that text anyway as it is rather unnecessary

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. I will explore that technique as well.

    And let me try to explain why I'm using tables in the design. When I originally designed the site that this template is for I was still learning css. I had a handle on using it it to style text, but not for positioning, layout or creating multiple versions of the same content. The layout for the site is table based and the content in the CMS is already tagged with styles that are pretty inconsistent across the board with several <td> classes. I am creating this template as a more accessible option in lieu of retagging all of the content in the CMS. Since I designed the site two years ago I've learned so much more about css (thanks to everyone here) and in retrospect would have approached the project differently. So, eventually I will go into the CMS and rework all of the content with new css and make it clean and standards compliant. For now though I only have time to work with what has already been done.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    For now though I only have time to work with what has already been done.
    ok


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
  •