Clear your floats. It took me over 2 hours of random googling to finally get my first full css-layout working in all major browsers. Was a heck of a first project. Example: Say you're splitting a piece of your site up into 2 sections. Left and Right. The left side is floated to the left, and the right side is floated to the right. Toss in a: <div style="clear:both;"></div> after it and watch your site magically work.
You could also use: CSS: .clear { clear:both; margin:0; line-height:0.0; font-size:0; height:0; } Code (markup): then <br class="clear" /> or <div class="clear"></div> Code (markup): This usually works well for me across browsers. I've had an experience though that the br clear didn't work for IE 7. A Great Article would also be How To Clear Floats Without Structural Markup
Hmm using that method mangled my layout in every browser except IE6. Tried using both BR or DIV. I'll read the article in depth though. It's definitely possible I'm doing something else wrong that's causing this to break.
I'm not sure what's causing the layout to break, but I've continually used that type of clearing in every layout I code. There are also other codes for clear, I'm sure you'll find the right one that works best. Also, I would recommend to have this piece of code in your css file: * { margin:0; padding:0; } Code (markup): It removes default browser padding and margin on every element (because browsers have different default padding and margin settings, this code will make coding a whole lot easier for different browsers)
That is a very nice tip. So if I drop that in I can remove all the margin/padding: 0s I manually added to each element? Then if I want to set a specific margin or padding, just put in whatever I want (in a specific element) and it'll override it?
No one method of clearing or enclosing floats works in all cases. I have made a demo page on enclosing float elements, which shows several methods, and the caveats concerning IE's stupidity. Floats are critical to modern layouts. It is well worth the effort to become familiar with how they're supposed to work, how IE's faulty float model screws things up and the gotchas in general. cheers, gary
Yes you can just remove all margin/padding: 0s on elements. Once you declare a certain margin or padding for an element, it will automatically override the zero (and you wouldn't have to worry about having different effects across browsers)
Just use tables instead j/k - please don't assassinate me for using the "t" word. Cross browser compatibility with css can be a major pain in the bottom! It doesn't look like it will be going away anytime soon, either. I'd kinda hoped IE7 would make the big difference but was sadly disappointed.
Only for the first few months though, once you know all/most tricks and things that one should know about tableless designs it becomes breeze to code them. Unless of course you go and try to code experimental layouts, at which point it can turn into a nightmare.
Blasphemer! That's blasphemy, I say, blasphemy! All modern browsers have css support and implementation oddities, but they're seldom much of an issue. IE, on the other hand, is not a modern browser, and is just plain buggy. On the bright side, its bugs are well known, as are the fixes. IE7 may cause some degree of cursing until we know it as well as we do IE6. MSFT says they fixed a lot of bugs, and that they added support for several selectors. The downside is they don't actually extend css support[1], and the bugs they "fixed" are rather easy to hack around, anyway. We habitually dumb down our designs for IE, to the point we forget about the many things we could be doing with css. As they described one bug fix, it's simply that they apply our hack automatically—not that they fixed the actual bug. Most of the bugs they "fixed" use the same hack, so I suspect they built the hack into those, too. At best, IE7 is a minor bug-fix/marketing upgrade. We really only need to work our cross-browser css magic on the one browser. Tables are an entirely different story. The recommendations allow a pot load of leeway in how the manufacturers implement tables. Even a simple table can have different renderings by Firefox, IE, Opera, Safari and Konqueror. No, no table layouts for me. I'll take the beauty, simplicity and logic of css any day. The things we're not doing with css due to IE can't be done with tables either. Dealing with the craptitude of IE is a small price to pay for all the benefits css brings to the table (so to speak ). cheers, gary [1] As you can see from this web browser standards support chart, IE7 has only a small (can you say teensy-weensy?) increase in css support over IE6's. It is still less than 50% compliant.
Gary, your enclosing floats page is awesome. Regularly come back to it. How's your training going? I haven't had to use float clearing like that in a long time. A good trick is to sneak it into the proceeding element. In essence it's the same thing. Here's an example taken from some work I was doing today; </div><!--Close Floated content--> <div id="clear"></div><!--This isn't floated--> <ul id="footer"><!-- This list is floated--> <li>© Copyright |</li> <li><a href="#" accesskey="3">Site map</a> |</li> <li><a href="#" accesskey="0">Accessiblity</a> |</li> <li><a href="#">Privacy Policy</a> |</li> <li><a href="#" accesskey="8">Terms & Conditions</a></li> </ul> Code (markup): </div><!--Close Floated content--> <div id="footer"><!--Footer isn't floated, this is to allow the faux column to extend to the base of the page without adding and extra wrapper div--> <ul><!-- This list is floated--> <li>© Copyright |</li> <li><a href="#" accesskey="3">Site map</a> |</li> <li><a href="#" accesskey="0">Accessiblity</a> |</li> <li><a href="#">Privacy Policy</a> |</li> <li><a href="#" accesskey="8">Terms & Conditions</a></li> </ul> </div><!--Close footer--> Code (markup): Which one should you use? The second one. The first; while the code for the footer is very tight, it adds the unsemantic 'clear class'. The second; Has an extra div. While isn't needed in this particular situation, it provides room for expansion at a later stage and makes clearing seamless.
I was having a serious problem with a site... When viewed in FF my site would sit on the left side of the window, but in IE7 it would be off on the right side and i would have to scroll to see all of it! Could that be a float problem?
Thanks, Adam. The page was a result of bumping into problems with clearing floats. Working with each of the various methods goes a long way toward making floats an easy to use property. As to the training, I guess you're talking about the LAMP stack program. The first section was MySQL and Linux administration. That was an intense 20 hours per week for eight weeks. The Apache class in section two was canceled, which may have been a Good Thing. The PHP class is tough enough without having another concentrated course to keep up with. Thursday, 14 Dec. is the last night. The MySQL and PHP were taught by Stan Guillory, and he really force fed us a lot. I expect to still be learning things from the notes and text for quite a while yet. The first four weeks were spent working with native PHP and html. These last four weeks have been spent putting PHP, the PEAR libraries, the Smarty templating engine and, of course, MySQL all together into a real world type web application. I'm no PHP guru (yet ), but I feel confident I could manage to build some pretty useful back end applications. I'd be slow, but I'd get there. cheers, gary
Jesse, that's very vague as you haven't linked to the site. Sounds like an awesome course Gary! I guess you're a bit of a self-teacher most of the time, as am I. But the value of talking to professionals - awesome. It's like us teaching someone CSS, they'd have a repository of knowledge rather than them searching for everything. Love to get myself on a course like that, especially one that teaches using frameworks, good architecture and best practices. Although, that ruby on rails malarkey has got me hooked!