Safari CSS issue

Okay, what did I miss?

[djsailorc]

So, I'm working on a website for a friend of mine, and it displays BEAUTIFULLY in Firefox and IE, but Safari won't display it...

The issue: I have a background-image in my floating left nav bar. It shows up in all browsers BUT Safari.

Have I missed something?

Code:

body{
background-color: #ffccff;
background-attachment: fixed;
background-image: url(images/test.gif);
background-repeat: no-repeat;
background-position: left top;
border: thin none;
height: 100%;
width: 100%;
}
.header{
height: auto;
width: 100%
}
.clear{
clear: both;
}
.leftnav{
height: 300px;
width: 150px;
background-image: url(images/leftbar.gif);
float: left;
}

Also, how do I set a Div (or table) to scroll instead of expand vertically? Fixed Heights seem to not wanna work...

[brodyh]

I do something similar on my websites. I want to have a header that is made up of an image for the site title, but for screen-readers and related technologies I would like to provide text instead of an image (screen-readers don't always use the "alt" attribute on images. SO.. I use a background on a div tag and throw the text 5000 pixels off the screen so it doesn't show up. However, screen-readers will see the text in the source code and still read it. This is my code:

#header h1 {
 background: url("../images/logo-top.png") center no-repeat;
 text-indent: -5000px;
 min-width: 179px;
 min-height: 32px;
}

It works in all browsers, including Safari. I think you are looking for something like this:

.leftnav{ 
min-height: 300px; 
min-width: 150px; 
background-image: url(images/leftbar.gif); 
float: left; 
}

Just set 'min-height' and 'min-width' to the dimensions of the image, and it should work.

[djsailorc]

Thanks, do you by chance know how I can set it to not expand, but scroll when it reaches 300px tall?

[brodyh]

Try using .overflow:scroll' ...

.leftnav{ 
min-height: 300px; 
min-width: 150px; 
background-image: url(images/leftbar.gif); 
float: left;
overflow: scroll; 
}

I believe this is the proper way to do this... though I'm not sure if 'overflow' would require an actual 'height'. I would try out that and 'max-height' and see what happens.

Best wishes!

[brodyh]

I'm guessing that 'overflow' only works when there is too much stuff inside the tag (I'm assuming your .leftnav gets applied to a div box?). So I'm not sure how to just make it scroll when there is more than 300px of content.. maybe that's where you could use 'max-height' with 'overflow'.

[djsailorc]

Actually, I found a great tutorial here: [dreamweaverresources.com...]

Worked GREAT!