SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Maryland
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS height problem, and extra letters showing up

    http://www.mallowweb.com/dev/

    In IE, the left/right columns in my main content section are followed by a "st" causing them not to fill up all the space, and add that white line you see, also note that the border surrounding everything shows fine in IE. In Firefox, the border stops almost at the bottom of the content section, and doesn't go to the bottom of the footer like in IE. I would like the border to surround everything. Note, the border is only set to that thickness to see it easier, and the color backgrounds in the left/right columns are there only to see the columns and where they start/stop.

    Does anyone have any idea why I'm having the few little bugs that I am still?

    Thanks for all your help.

  2. #2
    SitePoint Member reh3363's Avatar
    Join Date
    Aug 2004
    Location
    Las Vegas, NV
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    this should help some

    First remove the height attribute from #content. This will allow the div to adjust to the amount of content. Next replace float: left; in #footer with clear: both;. By doing this your footer will clear everything above it. This clearing method works in most browsers except some versions of IE mac it doesn't clear. You may want to check out this article at Position Is Everything on how to clear floats. By using a little javascript you will be able to clear in every standards compliant browser.

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

    If as I suspect you are trying to get equalising columns then this cannot be achieved by the method you have chosen. The simplest way to mimic 2 equalising columns is to use a background gif on the outer and repeat it down the side.

    Heres an example that should be explanatory.

    http://www.pmob.co.uk/temp/2coltest.htm

    If you want to give an initial height to your containers then you can use min-height for good browers and height for ie.

    e.g.
    Code:
    #test {
    width:300px;
    float:left;
    min-height:405px;
    }
    * html #test {height:405px}
    This will allow the container to start at a certain height and then expand if necessary as ie treats height like min-height anyway.

    If you want 100% height then look at the FAQ that explains 100% height and also how to put a footer at the bottom of the window. Be aware that all browsers will not obey though (also have a look at the FAQ on floats as there are some important points to note especially clearing as mentioned by reh3363 and the p.i.e. link)

    Hope that helps.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Heres a quick demo using your code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Welcome to MallowWeb.com!</title>
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    
    /*group=Global Attributes*/
    body {
     background : #FFFFFF;
     margin: 0px;
    }
    #global-wrap {
     width: 775px;
     height: auto;
     border-style: solid;
     border-width: 4px;
    }
     
    /*/group*/
    /*group=Wrapper Elements*/
    #navigation {
     background: url(http://www.mallowweb.com/images/nav-bg.gif) repeat-x;
     width: 100%;
     height: 33px;
     float: left;
     margin: 0px;
     padding: 0px;
    } 
    #navigation li {
     display: inline;
     list-style-type: none;
    }
    #logo {
     background: no-repeat url(http://www.mallowweb.com/images/logo.jpg);
     width: 100%;
     height: 104px;
     margin: 0px;
    }
    #content {
     width: 100%;
     min-height: 405px;
     background: blue url(images/leftbg.gif) repeat-y right top;
    }
    * html #content {height:405px}
    #column-left {
     width: 622px;
     float: left;
    }
    #column-right {
     width: 153px;
     float: left;
    }
    #footer {
     background: url(http://www.mallowweb.com/images/bg4.gif) repeat-x;
     width: 100%;
     height: 40px;
     clear:both;
    }
     
    /*/group*/
    /*group=Right Column*/
    .sidebar-h {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px; 
     text-align: left;
     color: #0D4E95;
     padding: 15px
    }
    .sidebar-h a:link {
     color: #0D4E95;
     text-decoration: none;
     border-bottom: 1px dotted #12293C;
    }
    .sidebar-h a:visited {
     color: #0D4E95;
     text-decoration: none;
     border-bottom: 1px dotted #12293C;
    }
    .sidebar-h a:hover {
     color: #0D4E95;
     text-decoration: none;
     border-bottom: 1px dotted #1B3E5C;
    }
    .sidebar-h a:active {
     color: #0D4E95;
     text-decoration: none;
     border-bottom: 1px dotted #1B3E5C;
    }
    .sidebar {
     font-size: 11px; 
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #333333;
    }
    .sidebar a:link {
     color: #12293C;
     text-decoration: none;
     border-bottom: 1px dotted #12293C;
    }
    .sidebar a:visited {
     color: #12293C;
     text-decoration: none;
     border-bottom: 1px dotted #12293C;
    }
    .sidebar a:hover {
     color: #1B3E5C;
     text-decoration: none;
     border-bottom: 1px dotted #1B3E5C;
    }
    .sidebar a:active {
     color: #1B3E5C;
     text-decoration: none;
     border-bottom: 1px dotted #1B3E5C;
    }
     
    /*/group*/
     
    /*group=Wrapper Styles*/
    .navigation {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
     font-weight: bold;
     padding-top: 5px;
     text-decoration:none;
     text-align: center;
    }
    .navigation a:link, a:visited {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
     font-weight: bold;
     text-decoration:none;
    }
    .navigation a:hover, a:active {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
     font-weight: bold;
     text-decoration:underline;
    }
    .footer-txt {
     font: 10px Verdana, Arial, Helvetica, sans-serif;
     color: #333333;
     text-align: left;
     padding-top: 15px;
     margin-left: 28px;
    }
    .footer-txt a:link, a:visited {
     color: #333333;
     text-decoration: none;
     border-bottom: 1px dotted #DCDCDC;
    }
    .footer-txt a:hover, a:active {
     color: #333333;
     text-decoration: none;
     border-bottom: 1px dotted #ECD492;
    }
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    ul {margin:0;padding:0}
    /*/group*/
    </style>
    </head>
    <body>
    <div align="center"> 
      <div id="global-wrap"> 
    	<!-- START Logo -->
    	<div id="logo"></div>
    	<!-- END Logo -->
    	<!-- START Navigation -->
    	<div id="navigation"> 
    	  <div class="navigation"> 
    		<ul>
    		  <li><a href="<A href="http://www.mallowweb.com/">Home</a>&nbsp;</li">http://www.mallowweb.com/">Home</a>&nbsp;</li>
    		  <li><a href="<A href="http://www.mallowweb.com/">Contact">http://www.mallowweb.com/">Contact Us</a>&nbsp;</li>
    		</ul>
    	  </div>
    	</div>
    	<!-- END Navigation -->
    	<!-- START Content -->
    	<div id="content"> 
    	  <!-- START Left Column -->
    	  <div id="column-left"> 
    		<p> John Kerry and John Edwards will stand up for America's values and 
    		  have a plan to build an America that is strong at home and respected 
    		  in the world. They believe we can have a strong economy focused on good-paying 
    		  jobs, a health care plan that reduces costs, an energy plan that frees 
    		  us from Mideast oil, and they believe we can strengthen our military 
    		  and lead strong alliances that keep America safe and secure </p>
    	  </div>
    	  <!-- END Left Column -->
    	  <!-- START Right Column -->
    	  <div id="column-right"> 
    		<div class="sidebar-h"><b>Latest News</b><br />
    		  11-18-2004</div>
    		<div class="sidebar">New website design with no tables, using CSS.<br />
    		  test test test<br />
    		  test test test</div>
    	  </div>
    	  <br class="clearer" />
    	</div>
    	<!-- END Content -->
    	<!-- START Footer -->
    	<div id="footer"> 
    	  <div class="footer-txt"> &copy; Copyright 2004 Joshua Mallow, MallowWeb.com, 
    		CanonCams.com. All Rights Reserved. </div>
    	</div>
    	<!-- END Footer -->
      </div>
    </div>
    </body>
    </html>
    make yourself an image that is 153px wide and about 5px high and link it to the content style in place of the image I have used.

    Code:
    #content {
     width: 100%;
     min-height: 405px;
     background: blue url(images/leftbg.gif) repeat-y right top;
    }

    That should go some way to achieving what you want (with any luck)

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Maryland
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help! It's a pleasure to read these forums, everyone is so helpful!

    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
  •