can I "cheat" with multiple code for width and height in CSS?

[Susan]

I have resolved (I think) my no-show image problem by using % for widths and
heights. However, that only works for some browsers and not others. So I have
also used pixels, which again, only works for some browsers and not others.
Is this a potential problem? I can see all pictures now with IE 6.0, IE 5.2,
Firefox, or Safari.

Can anyone else check out www.windyridgenursery.biz and see if you can see 2
top images, and the OAN logo in bottom left and see it looks right?

Here is my CSS "cheat" code:
#topbarleft{
float: left;
width: 28%;
width: 288 px;
height: 25%;
height: 162 px;
background: url('images/windycolorlogo2.jpg') no-repeat;
background-color: #fff;
border: 5px solid white;
}

#topbarright{
float: rightclear;
margin-left: 28%;
margin-left: 288 px;
height: 25%;
height: 162 px;
background: url('images/topcenterphoto.jpg') no-repeat left;
background-color: #fff;
border: 5px solid white;
}

#sidebar{
float:left;
width: 15%;
height: 100%;
background: url('images/oanlogo.gif') no-repeat center bottom;
background-color: #fff;
border-right: 5px solid white;
border-bottom: 5px solid white;
}

#content{
float: leftclear;
margin-top: 13 px;
margin-left: 18%;
}

 

[Susan]

Also, I set the body to 100%:
body
{

font-family: Garamond, Arial, Helvetica, Times;
font-weight: bold;
color: #FFFbf0;
background-color: rgb(00,66,00);
height: 100%;
width: 100%;

}

 

[Bob Lehmann]

In FireFox, NS6.2 and Mozilla1.4 your page looks drastically different than
it does in IE. Resizing the window, even just the height causes your banner
to move.

Also, the images ae too wide for an 8x6 window.

I really don't understand why you are using CSS to display the images.

Bob Lehmann

 

[E. T. Culling]

This page just doesn't work in Firefox ... elements of the page pile up upon
each other ... not a good thing. How about putting the various 'parts in a
table with cells. don't use absolute positioning!! Why not make your own
buttons rather that the 'theme' ones. FrontPage buttons are a bit
amateurish. Your page is way tooo wide. Find some helpful articles here:

http://www.eleanorstravels.com/suggestedresources.htm

I also suggest that you NOT use the photogallery component. Try JAlbum
instead:

http://www.eleanorstravels.com/PhotoGalleryPrograms/index.htm

The width of your background image is 1000 px. 750 should be max for both it
and the logo.

Otherwise you'll never get the width of the page down to the correct size
for those that set their browsers at 800 x 600.

Eleanor

 

[Stefan B Rusynko]

CSS cascades
That means the last css style rules over any previously declared styles
So to most browsers, they ignore your 1st declaration of width or height
- some browsers just choke on it as invalid css




|I have resolved (I think) my no-show image problem by using % for widths and
| heights. However, that only works for some browsers and not others. So I have
| also used pixels, which again, only works for some browsers and not others.
| Is this a potential problem? I can see all pictures now with IE 6.0, IE 5.2,
| Firefox, or Safari.
|
| Can anyone else check out www.windyridgenursery.biz and see if you can see 2
| top images, and the OAN logo in bottom left and see it looks right?
|
| Here is my CSS "cheat" code:
| #topbarleft{
| float: left;
| width: 28%;
| width: 288 px;
| height: 25%;
| height: 162 px;
| background: url('images/windycolorlogo2.jpg') no-repeat;
| background-color: #fff;
| border: 5px solid white;
| }
|
| #topbarright{
| float: rightclear;
| margin-left: 28%;
| margin-left: 288 px;
| height: 25%;
| height: 162 px;
| background: url('images/topcenterphoto.jpg') no-repeat left;
| background-color: #fff;
| border: 5px solid white;
| }
|
| #sidebar{
| float:left;
| width: 15%;
| height: 100%;
| background: url('images/oanlogo.gif') no-repeat center bottom;
| background-color: #fff;
| border-right: 5px solid white;
| border-bottom: 5px solid white;
| }
|
| #content{
| float: leftclear;
| margin-top: 13 px;
| margin-left: 18%;
| }