SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry problem with firefox? IE ok!

    Hi,
    I'm currenty working on the top part of the site, and naturally doing it with CSS (means no tables used)!
    The problem is with display, Ie is showing it as it is ment, but firefox is not doing so.
    So I've got a <div id = border>, everything that goes inside this div should have been sourronded with borders 4 sides. IE is doing well and inner elements are being bordered, while firefox not, can anyone help?
    HTML
    HTML Code:
    <body>
    	<!-- border of the page, container of everything -->
    	<div id="border">
    	   <div id="topslice"></div>
    	   <div class="head"></div>
    	   <div class="lfthead"></div>
    	</div>
    	<!-- end of the border-->
    </body>
    CSS code:
    Code:
    #border {
    	width: 647px;
    	border : solid #000 1px;
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    #topslice {
    	background-color: #DDD6C6;
    	height: 5px;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	color: #000;
    }
    .head {
    	width: 497px;
    	background-color: #FFCC00;
    	height: 21px;
    	border-top: solid #000 1px;
    	border-bottom: solid #000 1px;
    	border-right: solid #000 1px;
    	float: left;
    	color: #000;
    }
    .lfthead {
    	width: 149px;
    	height: 21px;
    	background-color: #FFCC00;
    	border-top: solid #000 1px;
    	border-bottom: solid #000 1px;
    	float: right;
    	color: #000;
    }

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

    You need to clear the floats otherwise they take up no space in the container.
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #border {
     width: 647px;
     border : solid #000 1px;
     margin: 0;
     padding: 0;
     height: 100%;
    }
    #topslice {
     background-color: #DDD6C6;
     height: 5px;
     width: 100%;
     margin: 0;
     padding: 0;
     color: #000;
    }
    .head {
     width: 497px;
     background-color: #FFCC00;
     height: 21px;
     border-top: solid #000 1px;
     border-bottom: solid #000 1px;
     border-right: solid #000 1px;
     float: left;
     color: #000;
    }
    .lfthead {
     width: 149px;
     height: 21px;
     background-color: #FFCC00;
     border-top: solid #000 1px;
     border-bottom: solid #000 1px;
     float: right;
     color: #000;
    }
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    </style>
    </head>
    <body>
    <body>
     <!-- border of the page, container of everything -->
     <div id="border">
    	<div id="topslice"></div>
    	<div class="head"></div>
    	<div class="lfthead"></div>
     <div class="clearer"></div>
     </div>
     <!-- end of the border-->
    </body>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx Paul this works , I need to study further the clearer class. I guess I'm always missing it

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I need to study further the clearer class
    http://www.complexspiral.com/publica...aining-floats/


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
  •