Jump to content

Image resizing issue

Recommended Posts

To see the page I'm having trouble with visit Sounds of Salvationthe css for the page is:

/* This is the style sheet for www.soundsofsalvation.co.uk *//* Note that I've used comments to divide the page into sections, these correspond to similarly marked sections on the html page. *//* Body */body {background-color: #FDF3F0;margin: 0%;padding: 0%;}/* Banner */.banner {background-color: #FF6F21;padding: 0;width: 100%;border-bottom: 1px solid black;}.banner-text {position:absolute;right:0px;top:0px;z-index:1;}/* Page */.page-table {margin: 8px;border: 0px solid black;width: 98%;}/* Menu */a.menu {font-family: arial;color: black;text-decoration: none;background-color: #F08A38;padding: 2px 8px;width: 100%;float: left;}a.menu:hover {background-color: #FAAA50;}.border {border: 1px solid black; background-color: #F08A38;margin: 0px;padding: 0px;}/* Content */h1 {margin-left: 15px;font-family: arial;font-weight: normal;font-size: x-large;}p {font-family: arial;font-size: small;padding: 0px 8px;}p.main {margin-left: 15px;}p.bold-highlight {font-weight: bold;background-color: #FAAA50;}p.bold {font-weight: bold;}.content-table {margin: 8px;border: 0px solid black;width: 100%;}.background {background-color: #F08A38;}/* Footer */.footer {font-family: arial;font-size: x-small;text-align: center;background-color: #FF6F21;padding: 8px; border-top: 1px solid black; border-bottom: 1px solid black;}

Basically the problem is with the banner across the top.I've used width:100% on the banner image to make sure it spans the whole of the browser window, no matter what the resolution. Originally the text on the right was part of the image, unfortunately this had some bizzare effects on the way the text looked for certain resolutions/window sizes.To get round that I've now used a different image for the text which displays in front of the banner image using z-index, this image does not resize so there are never any problems with the text looking odd.The problem now is that when the browser window shrinks to less than approximately 600px wide the height of the text image becomes greater than the height of the banner image, with disasterous effects (try it and see for yourself).I had forseen this and intended on getting around it by using the min-width attribute on the banner image so that it stops resizing when it gets sufficiently small enough for there to be a problem. What I had not considered was that IE does not support the min-width attribute.Does anyone have any suggestions?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...