Jump to content

Image resizing issue


DarkElf

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...