boscopup
08-19-2006, 08:41 PM
I've been working on a CSS layout, and everytime I fix a problem in one browser, I find a new one in another. :rolleyes:
I've got 2 columns, each with a different sized header image (because the image goes to the side one way and then down on the left column, but I don't want content to have to be beneath the left column portion of the image). Left column contains an image in one div, then the navigation links beneath that. Right column contains the other piece of header image, with a slogan below that, and then the content starts beneath the slogan. I had to do some work to get the images to touch in IE, but finally I got it working, and my slogan is in the right place too (had some issues with that, but they're resolved after doing much research).
So the one remaining problem (that I know of:)), is that when I resize the window in IE, if I shrink it to a width smaller than the sum of the two header images, the entire righthand column (including header image) goes down beneath the left column. In Firefox, you just get a scrollbar, which is exactly what I want to happen.
The layout (with colored boxes to help me figure out where all my divs are) is found here:
http://brightfuturegoats.com/test/brightfuturelayout.php
CSS is found here:
http://brightfuturegoats.com/test/brightfuturelayout.css
Looking at it now, I don't know why I split the image the way I did - probably would have been easier to have one whole piece along the top, then a separate piece down below on the left column... But if I can easily fix it the way I have it now, that'd be easier than redesigning the whole page and re-doing my image split, even if it would be a good exercise in CSS layout. :)
I've got 2 columns, each with a different sized header image (because the image goes to the side one way and then down on the left column, but I don't want content to have to be beneath the left column portion of the image). Left column contains an image in one div, then the navigation links beneath that. Right column contains the other piece of header image, with a slogan below that, and then the content starts beneath the slogan. I had to do some work to get the images to touch in IE, but finally I got it working, and my slogan is in the right place too (had some issues with that, but they're resolved after doing much research).
So the one remaining problem (that I know of:)), is that when I resize the window in IE, if I shrink it to a width smaller than the sum of the two header images, the entire righthand column (including header image) goes down beneath the left column. In Firefox, you just get a scrollbar, which is exactly what I want to happen.
The layout (with colored boxes to help me figure out where all my divs are) is found here:
http://brightfuturegoats.com/test/brightfuturelayout.php
CSS is found here:
http://brightfuturegoats.com/test/brightfuturelayout.css
Looking at it now, I don't know why I split the image the way I did - probably would have been easier to have one whole piece along the top, then a separate piece down below on the left column... But if I can easily fix it the way I have it now, that'd be easier than redesigning the whole page and re-doing my image split, even if it would be a good exercise in CSS layout. :)