Browsers and scroll bar issues...

[RIRedinPA]

I'm laying out a grid using <ul> and <li> encased in a <div> so I can vertically scroll (overflow-y) it but I am running into problems with Safari...in FF and IE7 the scroll bar appears outside the div, in Safari it appears inside and screws up my grid layout, pushing the last li down to the next row and subsequently everything that follows...

 

FF/IE grid:

 

R1C1

R1C2

R1C3

R1C4

 

R2C1

R2C2

R2C3

R2C4

 

Safari grid:

 

R1C1

R1C2

R1C3

 

R1C4

R2C1

R2C2

 

This is the relevant css

 

//container for grid
#content { 
position: absolute; 
top: 75px;
left: 100px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden; 
}

#content ul { 
list-style-type: none;
}

#content li {
float: left; 
width: 120px;
height: 60px;
border: 1px solid #eee; 
padding: 2px;
font:normal 300 .85em "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
background-color: #ffffff; 
}

 

I can't set a width for the content div as the number of cols is dynamic. I don't want to set it to 100% either as I need to keep this site narrow for users who still view their screens at 640...old peeps who like to edit their documents one letter at a time...

 

Anyone have a solution where the scrollbar in safari won't pinch the content?