Image display situations

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.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Images with flexible height

1 green icon This shows an image that will always be 18% of the available window height. Restore your window down to a smaller size and drag the window height up and down to see the image change height to maintain the 18% height and notice that the width changes in proportion.

This example only has limited applications, just for special circumstances where you want an image to maintain a set percentage height of the viewing window. It could have a use as a header which is required at the top left of a page and is required to change height in relation to the viewing window height.

The image has a containing div which is height: 18% of the viewing window while the image itself inside the div is height: 100%; the div and image cannot be in another containing div; I had to end the main page container before the example and open the main page container again after it. This means that the div and image cannot be given a width because the width changes in proportion to the height and therefore cannot centralise because a width is needed to do this.

The image 435*75 will always be changed to 18% of the window height.

It has to be on a separate page from my other examples because of a change to the html and body relationship in the style tag in the head section.

The code in the head section is:-

The code in the body html is:-

A problem in IE with an image which is just too wide for a screen resolution

2 red icon The example below explains why you can get a problem only in IE with an image in a table which is just a bit wider than the screen resolution. In this case use a resolution of 1024*768 to see the effect with an image 1018 px wide.

The orange image is 1018*90 - just too wide to fit in a 1024px IE window which would be 1024-18 (approx) scrollbar = 1006px (approx) net width. It causes a horizontal scrollbar in IE for about 12px.

The blue table is width="75%" but still extends beyond the right side in IE because it thinks it has an image inside 1018px wide. However, the image has been resized to width="75%" but IE takes no account of this for the table size, only resizing the image.

If you look at the example in Firefox you will see that the blue table has been resized to 75% and the orange image to 75% inside the 75% table and does not cause a horizontal scrollbar in Firefox at 1024*768 screen resolution. Firefox seems to interpret the code more logically than IE. The best way to avoid the problem in IE is to use div boxes instead of a table.

The code in the body html is:-

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises 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:-

or if there are many different styles, create a separate stylesheet:-

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 html code tags which are to be activated.

top | Sitemap | General Advice | Tables