Fri, 2007-11-16 19:59
I am trying to create a header that is 100% wide with an image on the left(logo) and an image on the right(gradient) on the same line but I cannont get this to work in browsers other than IE7. When I resize the page in Firefox or Opera the left image floats to the next line when the two images come togather during a page resize.
#Header
{
width: 100%;
height: 79px;
max-height: 79px;
background-color: #002D62;
clear:both;
}
.Header_Left
{
background-image: url(images/AIMS_SquareLeft.gif);
width:334px;
height:79px;
float:left;
clear:left;
}
.Header_Right
{
background-image: url(images/AIMS_SquareRight.gif);
width:424px;
height:79px;
float:right;
clear:right;
}
If Anyone can help with this I would really appreciate it.
Try viewing the following page in IE then in Firefox, the problem occurs when the page gets narrow enough for the images on the left and right side of the header to touch.
Fri, 2007-11-16 23:57
#1
when images collide
when images collide ... something has to happen. There is not enough page width for the combined widths of the objects on the line.
What would you LIKE to happen? By default, one or the other will slip to the next line. With a bit of position absolute and z-order you can make things interesting. Check out the resizing at jinotega.com