IE Bug Fixes
1- Bug Fix: IE Double Margin Float Bug- It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. The fix is extremely simple. All you have to do is apply a display: inline rule to your floated element. So you simply go from something like this:
<code>#content {<br /> float: left;<br /> width: 500px;<br /> padding: 10px 15px;<br /> margin-left: 20px; }</code></pre> <p>To something like this:</p> <pre><code>#content {<br /> float: left;<br /> width: 500px;<br /> padding: 10px 15px;<br /> margin-left: 20px;<br /> display:inline;<br />}</code></pre> <p class="image-20"><a href="http://www.cssnewbie.com/double-margin-float-bug/"><img src="http://noupe.com/img/cb11.gif" alt="CSS Tips" /></a></p> <hr> <p>2-<strong>Overcoming the Box Model Hack</strong>- If you want to specify a width to any div, do NOT specify padding or margins. Just create an inner div with no width set and specify its padding and margins instead. So instead of doing this:</p> <pre><code>#main-div{<br />width: 150px;<br />border: 5px;<br />padding: 20px;<br />}</code></pre> <p>Do something like this:</p> <pre><code>#main-div{<br />width: 150px;<br />}<br />#main-div div{<br />border: 5px;<br />padding: 20px;<br />}</code></pre> <hr> <p>3-<a href="http://www.cssplay.co.uk/boxes/minheight.html" class="showcase">Min-height attribute ignored in IE</a>- “min-height” attribute works well in Firefox but IE ignores it. IE’s height act as FF’s min-height. Note: in IE 7 problem was fixed.</p> <pre><code>/* for understanding browsers */<br />.container {<br />width:20em;<br />padding:0.5em;<br />border:1px solid #000;<br />min-height:8em;<br />height:auto;<br />}<br />/* for Internet Explorer */<br />/*\*/<br />* html .container {<br />height: 8em;<br />}<br />/**/</code></pre> <p>4- <a href="http://www.cssplay.co.uk/boxes/minwidth.html" class="showcase">Min-Width for IE </a>-A fix for the lack of min-width in Internet Explorer.</p> <hr> <h4 class="title">Centering a Block Element</h4> <p>5-<a href="http://css-discuss.incutio.com/?page=CenteringBlockElement" class="showcase">Centering Block Element</a>- There are multiple techniques for centering a block element; and the choice for the technique depends on whether you have the size set in percentages or in more absolute values.</p> <p>Centering an entire page’s contents:</p> <pre><code>body{<br />text-align: center;<br />}<br />#container<br />{<br />text-align: left;<br />width: 960px;<br />margin: 0 auto;<br />}</code></pre> <hr> <p>6-<a href="http://www.badboy.ro/articles/2005-02-20/vertical_align_with_css/" class="showcase">Vertical Align with CSS</a>- If you want to know how you can achieve vertical-align functionality the right way, simply specify the line-height for your text the same height as that of the container’s.</p> <pre><code>#wrapper {<br /> width:530px;<br /> height:25px;<br /> background:url(container.gif) no-repeat left top;<br /> padding:0px 10px;<br />}<br />#wrapper p {<br /> line-height:25px;<br />}</code></pre> <hr> <h4 class="title">Column Issues</h4> <p>7- <a href="http://warpspire.com/tipsresources/web-production/css-column-tricks/" class="showcase">Top reasons your CSS columns are messed up</a>- An easy-to understand article on how to fix common CSS Column issues with helpful diagrams and code snippets.</p> <p class="image-20"><a href="http://warpspire.com/tipsresources/web-production/css-column-tricks/"><img src="http://noupe.com/img/cb1.gif" alt="CSS Tips" /></a></p> <hr> <p>8-<a href="http://www.positioniseverything.net/explorer/expandingboxbug.html" class="showcase"> The Expanding Box Bug</a>-When you try to create a two-column float layout, IE will create a “float drop”, and it’s caused by having over-sized content in a fixed-width floated div that must fit into a particular spot in the layout. Several possible workarounds are detailed in this post.</p> <p class="image-20"><a href="http://www.positioniseverything.net/explorer/expandingboxbug.html"><img src="http://noupe.com/img/cb12.gif" alt="CSS Tips" /></a></p> <hr> <h4 class="title">CSS Positioning</h4> <p>9- <a href="http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1" class="showcase">Understanding CSS Positioning part 1</a>- An interesting series of articles that doesn’t only cover positioning, but also properties that define layout such as display and float, and a preview of the new CSS3 layout modules. The first part will introduce the positioning and display property. <a href="http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/">Part1</a>, <a href="http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-2/">Part2</a>, <a href="http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-3/">Part3</a> gives you a deep understanding of the possibilities you have in positioning.</p> <p class="image-20"><a href="http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1" class="showcase"><img src="http://noupe.com/img/cb2.gif" alt="CSS Tips" /></a></p> <hr> <p>10- <a href="http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=52" class="showcase">What is the difference between relative and absolute positioning?</a>- Whether to use relative or absolute positioning can be extremely frustrating to people just getting started with CSS. The answer to this question will add a bit of clarity to this confusion.</p> <pre><code>#redSquare<br />{<br />position: relative;<br />bottom: 40px;<br />right: 40px;<br />}<br /></code></pre> <p>To get this:</p> <p class="image-20"><a href="http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=52"><img src="http://noupe.com/img/cb3.gif" alt="CSS Tips" /></a></p> <hr> <p>11-<a href="http://css-tricks.com/hangtab-create-a-sticky-tag-from-the-edge-of-the-browser-window-even-with-centered-content/" class="showcase">HangTab</a>- Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content). Check out <a href="http://www.panic.com/coda/">Panic’s website for their software Coda</a>.</p> <pre><code>#hang_tab {<br />position: absolute;<br />top: 7px;<br />left: 0px;<br />width: 157px;<br />height: 93px;<br />}</code></pre> <p class="image-20"><a href="http://css-tricks.com/examples/HangTab/"><img src="http://noupe.com/img/cb13.jpg" alt="CSS Tips" /></a></p> <hr> <h4 class="title">CSS Float Concept</h4> <p>12- <a href="http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/" class="showcase">CSS Float Theory: Things You Should Know</a>- <a href="http://www.smashingmagazine.com/">SmashingMagazine</a> browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats.</p> <pre><code><div> <!-- float container --><br /><div style="float:left; width:30%;"><p>Some content</p></div><br /><p>Text not inside the float</p><br /><div style="clear:both;"></div><br /></div><br /></code></pre> <hr> <p>13- <a href="http://css.maxdesign.com.au/floatutorial/" class="showcase">Floatutorial: Simple tutorials on CSS Floats</a>- Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.</p> <p class="image-20"><a href="http://css.maxdesign.com.au/floatutorial/"><img src="http://noupe.com/img/cb4.gif" alt="CSS Tips" /></a></p> <hr> <p>14- <a href="http://dtott.com/thoughts/2007/12/10/clear-your-floats-the-right-way/" class="showcase">Clear Your Floats - The Right Way</a>- Float clearing can be one of the most frustrating aspects of CSS development, one of the best ways is to use the <a href="http://dtott.com/thoughts/2007/12/10/clear-your-floats-the-right-way/">EasyClearing</a> on your site.</p> <pre><code>/* EasyClearing http://www.positioniseverything.net/easyclearing.html */<br />#container:after<br />{<br /> content: ".";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> visibility: hidden;<br />}<br /><br />#container<br />{display: inline-block;}<br /><br />/* Hides from IE-mac \*/<br />* html #container<br />{height: 1%;}<br /><br />#container<br />{display: block;}<br />/* End hide from IE-mac */</code></pre> <p class="image-20"><a href="http://dtott.com/thoughts/2007/12/10/clear-your-floats-the-right-way/"><img src="http://noupe.com/img/cb15.gif" alt="CSS Tips" /></a></p> <hr> <h4 class="title">Easier Rounded Corner Solutions</h4> <p>15- <a href="http://www.askthecssguy.com/2007/11/mike_asks_the_css_guy_for_reco_1.html" class="showcase">Mike asks the CSS Guy for recommendations on rounded corners</a>- “Simplest way is to use a giant gif, then I’ll markup my box”</p> <pre><code><div class="roundBox"><br /> <p>beautifully-encapsulated paragraph</p><br /> <div class="boxBottom"></div><br /></div></code></pre> <p>“And give it the background”</p> <pre><code>.roundBox {<br /> background:transparent url(roundBox.gif) no-repeat top left;<br /> width:340px;<br /> padding:20px;<br />}<br />.roundBox .boxBottom {<br /> background:white url(roundBox.gif) no-repeat bottom left;<br /> font-size:1px;<br /> line-height:1px;<br /> height:14px;<br /> margin:0 -20px -20px -20px;<br />}</code></pre> <hr> <p>Also <a href="http://www.askthecssguy.com/">Askthecssguy</a> explains the <a href="http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html">technique used in Google Analytics</a>, which works by leaving a 1px notch in every corner to get the rounded corner effect which is a new way of creating rounded corners without using static images. You can see an example <a href="http://www.askthecssguy.com/examples/notchedcorners/index.html">here</a>.</p> <p class="image-20"><a href="http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html"><img src="http://noupe.com/img/cb81.gif" alt="CSS Tips" /></a></p> <hr> <p>16-<a href="http://cssglobe.com/post/1415/3-simple-steps-in-coding-a-rounded-corners-layout" class="showcase">3 Simple Steps in Coding a Rounded Corners Layout</a>- Alen Grakalic’s approach to coding a fixed width, rounded corners layout in 3 simple steps. He also created a<a href="http://cssglobe.com/articles/3steps/"> demo here</a>. </p> <p class="image-20"><a href="http://cssglobe.com/articles/3steps/"><img src="http://noupe.com/img/cb17.jpg" alt="CSS Tips" /></a></p> <hr> <h4 class="title">CSS Form Issues</h4> <p>17- <a href="http://css-tricks.com/tips-for-creating-great-web-forms/" class="showcase">Tips For Creating Great Web Forms</a>- Cris Coyer shares with us some tips for floating labels, :focus Pseudo Class, using hints and more. He also created the <a href="http://css-tricks.com/examples/NiceSimpleContactForm/">Nice & Simple Contact Form</a>, which he first posted about <a href="http://css-tricks.com/nice-and-simple-contact-form/">here</a>. </p> <pre><code>label {<br /> float: left;<br /> text-align: right;<br /> margin-right: 15px;<br /> width: 100px;<br />}</code></pre> <hr> <p class="image-20"><a href="http://css-tricks.com/examples/NiceSimpleContactForm/"><img src="http://noupe.com/img/cb7.gif" alt="CSS Tips" /></a></p> <hr> <p>18- <a href="http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html" class="showcase">Clean and pure CSS FORM design</a>- For CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables. You can grab the code <a href="http://www.box.net/shared/1zbtouuwws">here</a>. </p> <p class="image-20"><a href="http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html"><img src="http://noupe.com/img/cb9.gif" alt="CSS Tips" /></a></p> <hr> <p>19-<a href="http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/" class="showcase">Autopopulating text input fields with JavaScript</a>- Sometimes we need to explain to users what they are supposed to enter into text input fields. One common workaround when no label can be displayed is to put some placeholder text in the text field and let that act as the label. This tutorial introduces a nice solution, with JavaScript enabled, the label element is hidden and the value of the input element’s title attribute is copied to the value attribute. If JavaScript is disabled, the label is displayed above the text input, which is left empty. A simple demo, where you can see this in action is <a href="http://www.456bereastreet.com/lab/autopopulating-text-input-fields/">here</a>. </p> <p class="image-20"><a href="http://www.456bereastreet.com/lab/autopopulating-text-input-fields/"><img src="http://noupe.com/img/cb8.gif" alt="CSS Tips" /></a></p> <hr> <h4 class="title">Worth checking CSS Tricks</h4> <p>20-<a href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=4361&productId=1&loc=en_US" class="showcase"> Cross browser Horizontal Rule with Background Image</a>- You’d like to create a cross-browser horizontal rule that utilizes a custom image as the content separator. </p> <pre><code>div.hr {<br />background: #fff url(myhrimg.gif) no-repeat scroll center;<br />height: 10px<br />}<br />div.hr hr {<br />display: none<br />}</code></pre> <hr> <p>Your tag should look like this:</p> <pre><code><div class="hr"><hr /></div></code>Technorati Tags: css fix anything
