Wickham's XHTML & CSS tutorial
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems warning: works in some situations or some browsers or needs care to display as you wish OK in Firefox, Safari, Opera, Google Chrome and IE
Scolling divs in isolation are simple and reliable but the following examples show that when adjacent to other divs with scroll attributes there can be problems. Either Firefox and IE6 displays in an undesirable way or both have problems.
The overflow properties are: visible, hidden, scroll or auto. See w3schools.
There are usually no problems if you have an overflow property in an isolated div but problems do arise if you have divs with an overflow property next to each other, as shown below.
1 Safari and Chrome do not render the top right div with margin-left as they should. If the overflow: auto is removed, as in the lower example, they render it as expected.
IE takes the margin-left from the containing div whether or not the div has overflow: auto.
2 The top right div is is the same as above but does not have margin-left: 178px; and all browsers render it correctly. The bottom right div has height: 230px and overflow: scroll.
3 These examples have float: left and float: right divs but Firefox and IE have different problems. These examples are wrongly coded whether or not there is overflow stated.
Margin-left with float-right will always cause problems. If the margin-left is removed, Firefox will extend full width of the containing div under the left div while IE6 shows the div nearly against the left div which is almost what is expected.
4 These examples have float: left and float: right divs. The right divs have a width: 544px. The lower azure div is identical to the upper one except for a different height.
5 Various ways of dealing with an image which is wider than its containing element.
5a If you put an oversize image in an element like a div, table or p tag the containing element will normally expand to show the whole image even if the element has a stated width that is less. The following div is 150px wide but the image still shows its basic width of 200px (note that in Firefox and IE7 the margin: auto is based on the smaller div width rather than the final width including the larger image while IE6 calculates the margins from the larger width):-
<div class="noborder" style="width: 150px; margin: auto;">
<img src="images/horses200x50.jpg" alt="horses"/>
</div>
5b If you have an containing element with a fixed width and you give a larger image the same width, it will have its width reduced and also its height in proportion if no height is stated, like the following example. The code is:-
<div class="noborder" style="width: 150px; margin: auto;">
<img style="width: 150px;" src="images/horses200x50.jpg" alt="horses"/>
</div>
5c If you add overflow: scroll or overflow: auto attributes to an element with a fixed width, then you will see the horizontal scrollbar when a larger image is inserted.
However, if you add overflow: hidden to the containing element an image which is larger than the containing element will have its right side cut off and the height will not be adjusted. If you are creating a template where someone else might inadvertently insert an image larger than the containing element, this attribute would be a safety measure to stop the containing element expanding and wrecking the layout. Smaller images will not fill the width but this is usually less of a problem.
The following div is 150px wide with an image 200px wide and has this code:-
<div class="noborder" style="width: 150px; overflow: hidden; margin: auto;">
<img src="images/horses200x50.jpg" alt="horses"/>
</div>
5d If you don't want to see the scrollbar when an image larger than the containing element is inserted in a div with overflow: scroll or overflow: auto attributes but you do want to see the whole of a larger image even if it is reduced in width and its height is reduced in proportion, then you can use max-width code as shown on Maximum and minimum width. This will reduce the width of an image that is larger than the containing element without enlarging an image which is smaller as would happen in item 5b.
6 The clip property enables you to clip the side, top or bottom of an image in different amounts to make it fit in an element of a certain size, and show the important part of the image without cutting off everything from one side or the same amount from all sides.
See w3schools for details.
See also item 5c which can cut off the side of an image using overflow: hidden without reducing the overall size of the image to fit an element size.
Notes
View/Source or View/Page Source in browser menu to see all xhtml code.
The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.
The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.
A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.
Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.
If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]>
<style type="text/css"> div { margin-top: 30px; } </style>
<![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]>
<link rel="stylesheet" href="ie6.css" type="text/css"/>
<![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).
When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.
© Wickham 2006