PDA

View Full Version : No Layer Overflow Scrollbar in Safari


pinksparklegirl
07-04-2009, 02:46 PM
I have created a scrollable layer with a table of thumbnail images inside it. It works perfectly in IE and FireFox, but in Safari there are no scrollbars at all. I have the layer overflow set to auto, so that I only get a scrollbar along the bottom of the thumbnails.

Here's a link so you can see what I have done:
http://www.furnitureonthemove.co.uk/Con_BarStools/00597.htm

I can't get any of the overflow settings but hidden to work properly in Safari: when layer overflow is set to visible the layer shows in completely the wrong place ignoring where I have set it to be altogether, with scroll the scrollbars are greyed out and un-usable and when set to auto it is just the same as hidden (no scrollbars at all).

Is this a bug within Safari which I can do nothing about or is there some nifty script I can add to get layer overflow-auto to work?

Thanks, Sarah

DWcourse
07-04-2009, 05:49 PM
Remove the width=100% from the table inside your #Layer1 div.

Also, a few other points:

As people here keep saying, designing with tables is no longer considered a good practice.
Using HTML attributes rather than CSS is no longer considered a good practice.
Using inline CSS styles is generally (you guessed it) not a good practice.
When using CSS styles for heights and widths you need to include a unit of measurement (such as px for pixels).
And, finally, if you're not very careful, using an absolutely positioned div (#Layer1) will cause you trouble down the road.

pinksparklegirl
07-04-2009, 06:24 PM
I removed the 100% width from the table within the layer but there is no change to how Safari shows the overflow.

Any other suggestions?

Cary
07-04-2009, 10:30 PM
First thing you need to do is make sure your doctype is not only valid, but complete, so you need this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Then replace your layer div code and the table it contains with the following. I would use a more meaningful name than the default "Layer1", but the following html and css reflect the current name.
<div id="Layer1">
<div>
<a href="../Con_BarStools/00596.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/596.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00599.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/599.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00597.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/597.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00600.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/600.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00598.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/598.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00601.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/601.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00116.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/HGL001.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00122.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/HGL019.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00117.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/HGL002.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00074.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw362c.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00006.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/1000-102328.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00008.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/1000-102510.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00553.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw456c.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00552.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw456b.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00551.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw320.jpg" width="100" height="100" alt=""></a>
</div>
</div>

Now all you need is the CSS:
#Layer1 {
position:absolute;
width:392px;
height:130px;
z-index:1;
left: 600px;
top: 430px;
overflow:auto;
}
#Layer1 div {
width:1533px;
height:102px;
float:left;
}
#Layer1 a {
float:left;
}
#Layer1 a img {
border:1px solid black;
}

pinksparklegirl
07-05-2009, 12:55 PM
Hi Cary, thanks for your advice. I tried it and it worked! Thanks very much. I'm self taught, and it looks like I've got a whole new way of desiging to learn now. Just a hundred or so pages to update!

Thanks again,
Sarah

pinksparklegirl
07-05-2009, 02:27 PM
I've updated a few of the many pages with the css and have a query about this part:

#Layer1 div {
width:1533px;
height:102px;
float:left;
}

I have placed the CSS into my template page so all pages use the same sizing.

My thumbnails images range from 5 to over 30 depending on image grouping, so have upped the width to 2600px to accommodate this, otherwise the images start lining up below the first line. However on all other scrolling thumbnails I now have a huge black space at the end of the images.

Taking out the above info doesn't work, neither does changing it to 100% width. What else can I do to make the scrollbar only as long as needed? It worked like that when I placed a table withing the layer but not now I am placing the images directly into the layer itself.

I have found if I use this:

#ThumbnailLayer1 {
position:absolute;
width:325px;
height:101px;
z-index:1;
left: 600px;
top: 432px;
overflow:auto;
}
#ThumbnailLayer1 div {
width:auto;
height:auto;
float:left;
}
#ThumbnailLayer1 a {
float:left;
}
#ThumbnailLayer1 a img {
border:1px solid black;
}

I can get the thumbnails to line up in threes scrolling downwards only taking up as much space as needed, but can find no way of making the images line up from left to right and scrolling across without specifying a width in pixels.

Thanks,
Sarah

Cary
07-06-2009, 01:44 AM
Okay, try this html. Notice, I removed the extra div you had with the align attribute. It wasn't necessary. I also put in comments an empty link which needs an image. I also removed border="0" as the styling takes care of that.

<div id="ThumbnailLayer1">
<div>
<a href="../Con_BarStools/00596.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/596.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00599.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/599.jpg" width="100" height="100" alt=""></a>
<!-- <a href="../Con_BarStools/00596.htm"></a> -->
<a href="../Con_BarStools/00597.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/597.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00600.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/600.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00598.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/598.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00601.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/601.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00116.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/HGL001.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00122.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/HGL019.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00117.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/HGL002.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00074.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw362c.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00006.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/1000-102328.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00008.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/1000-102510.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00553.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw456c.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00552.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw456b.jpg" width="100" height="100" alt=""></a>
<a href="../Con_BarStools/00551.htm"><img src="../Images/Furniture/Contemporary/Thumbnails/fw320.jpg" width="100" height="100" alt=""></a>
</div>
</div>

Here's the styling which doesn't require a specific width:
#ThumbnailLayer1 {
position:absolute;
width:325px;
height:120px;
z-index:1;
left: 600px;
top: 432px;
overflow:auto;
}
#ThumbnailLayer1 div {
white-space:nowrap;
float:left;
}
#ThumbnailLayer1 a { /* really no reason to have this selector any more */
}
#ThumbnailLayer1 a img {
border:none;
}

EDIT: Looks like the empty link is just a repeat of the first link.

pinksparklegirl
07-06-2009, 09:43 AM
Hi Cary, that works perfectly. Thanks for all your help. Now I just have to teach myself CSS!

Sarah