SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Tulsa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem Clearing Floats in IE

    I have looked through the FAQ's and have tried to emulate the clearer. It has been working fine in Firefox but alas, I can't figure out why it is not working in IE. I have used the same clearer class in two Web sites, and in both the clearer does not work in IE.

    The page where the clearer is located is here at

    http://nafsa.okstate.edu/scholarship.htm

    here is my CSS code:
    Code:
    body {
    	margin: 0px;
    	padding: 0px;
    }
    #wrapper {
    	width: 800px;
    	background-color: #FF6600;
    }
    #header {
    	width: 800px;
    	border-bottom-width: 2px;
    	border-bottom-style: solid;
    	border-bottom-color: #000000;
    }
    #left {
    	width: 130px;
    	float: left;
    	display: inline;
    	padding: 10px;
    	position: relative;
    }
    *html #left {width: 127px;}
    #right {
    	background-color: #FFFFFF;
    	height: 100%;
    	width: 626px;
    	margin-left: 150px;
    	margin-top: 0px;
    	padding: 10px;
    	border-right-width: 2px;
    	border-left-width: 2px;
    	border-right-style: double;
    	border-left-style: solid;
    	border-right-color: #000000;
    	border-left-color: #000000;
    }
    *html #right{ width:623px;}
    
    /* Fix IE. Hide from IE Mac \*/
    *html #right { height: 1%; }
    /* End */
    #left ul {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	border-top-width: 2px;
    	border-top-style: solid;
    	border-top-color: #000000;
    	display: block;
    	height: auto;
    }
    /* Fix IE. Hide from IE Mac \*/
    *html #left ul li a{ height: 1%; }
    /* End */
    
    #left a {
    	color: #000000;
    	background-color: #FFFFFF;
    	display: block;
    	border-right-width: 2px;
    	border-right-style: solid;
    	border-right-color: #000000;
    	border-bottom-width: 2px;
    	border-left-width: 2px;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-bottom-color: #000000;
    	border-left-color: #000000;
    	text-decoration: none;
    	padding: 2px;
    }
    #left a:hover {
    	color: #FFFFFF;
    	background-color: #000000;
    	display: block;
    	border-right-width: 2px;
    	border-right-style: solid;
    	border-right-color: #FFFFFF;
    	border-bottom-width: 2px;
    	border-left-width: 2px;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-bottom-color: #000000;
    	border-left-color: #FFFFFF;
    }
    .bottomlink {
    	margin-top: 25px;
    }
    .clearer {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px; 
    }
    /* Hides from IE-mac \*/
    * html .clearer {height: 1%;}
    /* End hide from IE-mac */
    #footer {
    	clear: both;
    	width: 800px;
    	text-align: center;
    	background-color: #000000;
    	color: white;
    }
    Here is my HTML

    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>Native American Faculty and Staff Association</title>
    <link href="css/nafsa.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header"><img src="images/banner.gif" alt="Native American Faculty and Staff Association" width="800" height="150" /></div>
    <div id="left">
      <ul>
      	<li><a href="index.htm">Home</a></li>
        <li><a href="bylaws.htm">By Laws</a></li>
        <li><a href="contact.htm"> Contact Information</a></li>
        <li><a href="officers.htm"> Officers</a></li>
        <li><a href="membership.htm"> Membership Application</a></li>
        <li> <a href="meetings.htm">Meetings Dates and Times</a></li>
        <li><a href="scholarship.htm"> Scholarship Application</a></li>
    	<li><a href="recipients.htm">Scholarship Recipients</a></li>
        <li> <a href="resources.htm">Resources </a></li>
      </ul>
     <div class="bottomlink">
      <ul>
      <li><a href="announcements.htm">Announcements</a></li>
      <li><a href="donate.htm">How to make a donation to NAFSA </a></li>
      </ul>
      </div>
    </div>
    <div id="right">  
      <p>The NAFSA Scholarship program began in 1995. &nbsp; Since then, NAFSA has awarded thousands of dollars in scholarships to deserving Native American students, both undergraduate and graduate.</p>
      <p><a href="documents/2006-2007%20NAFSA%20Scholarship%20Application.doc">2006-2007 Native American Faculty &amp; Staff Scholarship Application.doc</a></p>
      <p><a href="documents/2006-2007%20NAFSA%20Scholarship%20Application.pdf">2006-2007 Native American Faculty &amp; Staff Scholarship Application.pdf</a></p>
    
      <div class="clearer"></div>
      </div><div id="footer">&copy;Copyright 2006 NAFSA </div>
    </div>
    </body>
    </html>
    If anyone could tell me what it is I am doing wrong I would be very grateful.

    Jordan

  2. #2
    SitePoint Guru Wullie's Avatar
    Join Date
    Oct 2002
    Location
    Greenock, Scotland
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try putting a comment in the clearer div tag

    <div class="clearer"><!-- clear floats --></div>
    ASP.NET Freelance Web Developer
    Bored? Check out my photography folio at Flickr

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Tulsa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put the comment in, but IE still is not forcing it down

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

    When the element has "layout" applied (see faq)t hen it only clears within its own stacking context in ie. You would need to remove the height and width for this to work in IE.

    Code:
     #right {
     background-color: #FFFFFF;
     margin-left: 150px;
     margin-top: 0px;
     padding: 10px;
     border-right-width: 2px;
     border-left-width: 2px;
     border-right-style: double;
     border-left-style: solid;
     border-right-color: #000000;
     border-left-color: #000000;
    }
    /* Fix IE. Hide from IE Mac \*/
    /* End */
    Of course this leaves you open to layout bugs so you should probably nest an inner element now and give it a 100% width to try and regain layout.

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Tulsa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul it looks like the float is clearing now. However, the clearer seems to be splitting the content so when there is no content the div element seems to be split.

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

    This will be the layout issue I talked about earlier. Try adding position:relative here:
    Code:
    #right {
    background-color: #FFFFFF;
    margin-left: 150px;
    margin-top: 0px;
    padding: 10px;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: double;
    border-left-style: solid;
    border-right-color: #000000;
    border-left-color: #000000;
    position:relative;
    }

    If the object of the exercise is to get equal columns then you'd be better off just repeating a background image in the parent (or using the negative margin technique from the 3 cold demo sticky thread)

    Or look at the method from PIE.


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
  •