SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Problem Clearing Floats in IE
-
Feb 23, 2006, 11:17 #1
- 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; }
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. 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 & Staff Scholarship Application.doc</a></p> <p><a href="documents/2006-2007%20NAFSA%20Scholarship%20Application.pdf">2006-2007 Native American Faculty & Staff Scholarship Application.pdf</a></p> <div class="clearer"></div> </div><div id="footer">©Copyright 2006 NAFSA </div> </div> </body> </html>
Jordan
-
Feb 23, 2006, 12:24 #2
- 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>
-
Feb 23, 2006, 14:55 #3
- 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
-
Feb 23, 2006, 20:02 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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 */
-
Feb 27, 2006, 13:12 #5
- 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.
-
Feb 27, 2006, 13:41 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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