Browser default styles
Eric Meyer browser reset - set all browser margins, padding, borders, font sizes, etc. to zero or off so that you control all styles specifically for your web site design.
OR set all html elements to zero margin and padding with universal element: zero margin css
Vertical Margin collapse: Part of the CSS Specifications
You should note that vertical margins are collapsed in the normal flow. That is, instead of adding the bottom margin of a box to the top margin of the one immediately below it, only the larger of the two values is used.
FOUC: Flash of Unstyled Content (John Gallant , Holly Bergevin)
Internet Explorer for Windows will sometimes display a page momentarily without the styles applied. Then suddenly, the styles pop into view. This is caused when the styles are linked to the page using the @import method. When this is done, it appears that IE/Win does not wait until the styles arrive from their @imported location, but displays the HTML immediately without the styles. Once the styles finally do load, they are applied to the page.
The way to prevent this is by having at least one <link> element in the head element of the page. When IE sees a <link> element, it waits until all remote files arrive before rendering the page. It's not necessary for the <link> to have a target file. Just the presence of the <link> element is enough. A <script> element in the document head will also eliminate the problem.This problem does not occur when the styles are embedded in the source.
Opera 7+ always shows the Flash Of Unstyled Content for every page that has remote styles. Nothing can be done about this, but no doubt the Opera team will eventually get tired of hearing complaints and do something to fix it. Until then we just have to live with the problem in Opera.
White Space in your Code
In general, browsers are supposed to ignore any "white space" that falls between elements, but occasionally such normally harmless spaces produce bugs. If mysterious gaps or openings show up in your page and there seems to be no apparent cause, try eliminating the white space in your code and have all your tags "butt" up against each other for the section that has a problem. These types of bugs are found mostly in Internet Explorer, but not always.
Floats and Containing divs or other containing elements
Floats can extend outside containing elements and are not wrapped by background images or colors where there is not enough content to clear the floated element: part of CSS specifications
Background not showing or not complete. Floats may need to be cleared in order for the background to fill the div. Below is the preferred clearing fix. Basically content of a period with no visibility or height is added after the floats forcing the container to clear the floated elements. The extra rules are browser hacks.
Place this in your css style sheet:
.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%; }
/* End hide from IE-mac */
And then use the class "clearfix" on your div that needs to be fixed.
<div id="yourid" class="clearfix">
Sometimes adding the psuedo element :after to create content does not work. Then use an empty div with a class having a rule clear:both to force the parent div to clear the floats. This is the same code provided in the Dreamweaver css layout samples. The other rules are there for browser bugs. The empty div is placed just before the closing </div> tag of the wrapper or div that need to be forced to contain the floated elements.
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
And your empty div with the class clearfloat is added just before the ending tag of the container.
<div class="clearfloat"></div><!-- end of #something --></div>
Internet Explorer currently has a double-margin on floats bug. This affects the side of the div that you're floating toward. For a right float, adding a right margin will be doubled; for a left float, it's the left margin. For this reason, I always zero that margin. If I need to create space, I use padding (remember that padding is inside the div and margin is outside the div). You can use the padding either inside that floated div or on the div's parent container, depending on the effect you want.
Float drop. If an element is placed inside that is wider than the allotted area, the div will simply drop down and go left until there is enough room for it. Make sure your measurements for width take into account the border, padding and margin of the elements or divs.
Series of floats in parent with no widths extend beyound width of container. If a series of floats are placed inside a container with no specified width or height- and the floats' width exceeds the natural width of the container, the container will not expand vertically to fit the floats— and the floats will extend outside the container.
A non-floated block with a width property that follows one or more left-floated blocks may incorrectly appear to the right of the floated blocks instead of below them. Essentially, IE 5-6 Windows does not calculate the position of floats correctly. In this case, it would appear the left edge of the content is calculated before the width is applied- when as per specs the width should be applied before the edge position of the float should be calculated and rendered. Fix: no workaround identified yet.
Margins
In some browsers, you will run into the escaping-margin bug. This is caused by the outer margin on an element inside the div. So you can zero the margin and padding of the div and it won't do any good. But remove the margin of the element inside the div and you're fixed. IE will sometimes doubles the margin on the same side of a float. See above.
Margins collapse between two vertical elements when there is a bottom margin on one followed by a top margin on the other. Choose one or the other to space the items ( I usually prefer adding bottom margins and leave the top at zero).
Absolute Positioning
Absolutely-positioned children of a relatively-positioned table will be positioned relative to the window, not the table. A relatively positioned table with an absolutely positioned element placed inside of it will not calculate the correct position - relative to it's parent - but instead render the absolutely-positioned element in relation to the browser window itself. Gecko 1.x browsers (Mozilla, Firefox), no fix.
Stacking Order
Positioned containers define a new stacking order in IE, even when the computed z-index of the container is auto. Fix: No standard method, outside explicitly-setting z-index properties on all positioned elements.
List Links
If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser. Fix: In some cases IE will treat whitespace (hard returns in your HTML's text) between an ending </li> and the next opening <li> tag as literal linefeeds- adding unwanted whitespace in the rendered HTML page between your list items. Although an easy workaround is to remove all space between closing and the next subsequent opening <li> tags, it isn't optimal for code readability. Turn on hasLayout, then revert the rule without turning hasLayout back off. For example:
a { display: inline-block; }
a { display: block; }
The first rule turns on hasLayout in IE, while the second rule will override the first for all intents and purposes- without turning off hasLayout.
Min-height and min-width
IE 6 ignores min-height and min-width.
Min-height: If you set height in IE 6 it will treat this rule in the same way as min-height. If there is more content than the minimum the container will grow to the necessary height. So use the IE Conditional styles (see IE conditionals below) to set the height in an alternate style sheet for just this purpose. Only IE 6 and below will get the special rule. <!--[if lte IE 7]>
Min-width or max-width: use IE Dynamic Expression to set the width on the selector with an IE Conditional comment linked style sheet. Set in a IE Conditional style declaration (see IE conditionals below) with the proprietary IE dynamic expression to do the same thing:<!--[if lte IE 7]><![if gte IE 5]>
yourselector {
width:expression(document.body.clientWidth < 760? "760px": "auto" );}
Min-width in pixels. Creates a horizontal scroll if viewport is less than 760px instead of letting content get smaller and stack up vertically. If the client viewport is less than 760px, then size the container to 760px otherwise let it be automatic width of the container.
yourselector {
width:expression(document.body.clientWidth > 800? "800px": "100%" );}
Max-width in pixels. Limits the content from expanding to fill the available space. If the client viewport is greater than 800px, then size the element to 800px otherwise let it be 100% of available container width.
yourselector {
width:expression(document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?"30em":
"auto" );}
Max-width in ems. Limits the content from expanding to fill the available space. If the client viewport is greater than 500px, then limit the element to 30em otherwise let it be the container width. 30ems at 12pt is approximately
Media Type
<style type="text/css">
@import url(screen.css) screen;
/* "screen" defines the medium that gets these styles, this does not work with IE 6 and earlier*/
@media print {
/* style sheet for print goes here. This works with IE6*/
}
</style>
The other way is to use the media attribute within the <link> element.
<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
/*This works with IE6*/
IE6 and earlier fail to recognize a media value when it is used within an @import rule. However, IE6 does work fine with the @media rule, and a media attribute in a <style> element embedded within the document head section also causes no problems for IE6.
IE Conditionals
Create another style sheet just for IE to satisfy all that needs to be done slightly differently to make it happy. Call it something like ie-fix.css and put it with your other style sheets. In the head, below your last linked style sheet, imported or embedded styles, type the conditional IE statement (or copy paste this text) to link to a special style sheet:
<!--[if lte IE 6]>
<style type="text/css">
@import url(css/ie-fix.css);
</style>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/ie-fix.css" type="text/css" />
<![endif]-->
Only IE browsers will actully read this commented code and will get this style sheet. All other browsers will properly treat it as a comment to ignore. Put all your IE hacks, adjustments for IE in the new ie-fix.css style sheet. You must have the conditional in every page of your site, but once the import is there, you can continue to modify the external ie-fix.css as needed. NOTE: If you are using a Dreamweaver template, you must put this code in the editable head area of the style sheet. And Dreamweaver templates will not update this path to the stylesheet when new pages are made (it is a comment after all!), so you will need to manually make sure the path is right for each page if you have nested folders.