Question on CSS

**cgoodman381** · 12-19-2004, 12:53 AM

Iv been trying to use code in my site for people to easily scroll around.

http://www.geocities.com/simpledevicesite/index.htm

But theres one thing im confused on. Iv taken many looks at my code, but i cant seen to find anything wrong... The problem is that there should be text showing up in the left scroller box and well, its not. Although there is a little but of white on the left and when i copy and paste it its the text that should fill the box.

**Mooofasa** · 12-19-2004, 02:42 AM

Get rid of scrolling boxes. They are terrible and not every browser can handle them. You don't see the great sites using them. They are not necessary.

**cgoodman381** · 12-19-2004, 05:40 AM

and use what instead?

**theshiznit** · 12-19-2004, 08:07 AM

are you using frames?

**Rincewind** · 12-19-2004, 09:37 AM

I like the scrolling boxes. I think that they work in this design. I'd like to see them used more as there are very usable and save scrolling the whole page. So allowing navigation etc to remain in view while reading some text. I wouldn't use them everywhere, but in the right place they work well.

Browser Support: This effect is supported in the following.
IE 5.x win
IE 6 win
Opera (all)
Mozilla/Firefox (all)
Netscape (v6 and above)
Safari

Non supporting browsers:
IE 5.x on the mac only has partial support. But then Ie5 for the mac is famous for it's bugs.

theshiznit - no this is not frames. He's using the overflow:scroll; style in his css to control some div tags.

cgoodman381 - You may want to consider trying auto rather than scroll. The effect is the same but you don't get the horizontal scroll bar in auto (unless there is horizontal overflow).

**cgoodman381** · 12-19-2004, 06:23 PM

Thanks Ricewind that looks a lot better without those horizontal scrollbars. But im Still getting that problem where the text isnt showing up

**Rincewind** · 12-19-2004, 08:39 PM

Well a start would be to run your site through a vilidator like http://validator.w3.org and get rid of those <font color="white"> tags. Put all style and appearance stuff such as size and colour into your CSS.

Code:

div
{
position: absolute;
top: 413px;
left: 58px
}

Code:

<table width="888" border="0" height="506" background="Images/testbottom2.jpg">
  <tr>
    <td>
      <div style="left: 57px; top: 413px">

Since the div is absolutly positioned, you don't have to nest it inside a table. Doing so can confuse some browsers. Also, shift the left and to values into the header css. You should name the div rather than using a generic style. Lastly, and this should solve the problem, put a z-index value onto the div. Z-index is like the layers order in photoshop. It tell the browser what to do should elements overlap. I think in this case, IE is rendering your div underneith/behind the table so you can't see it. So you code should look like

Code:

#lefthand
{
position: absolute;
top: 413px;
left: 58px;
left: 57px;
top: 413px;
color:#FFFFFF;
background-color:transparent;
overflow:auto;
z-index:10;
}

and

Code:

<body bgcolor="#FFFFFF" text="#000000">
<div id="lefthand">Simple Device Mission Statement: <br>
        A simple device is a basic tool that can be used as an inducing or compelling 
        force. Staying true to this concept, we are much more than just a clothing 
        company. We want to challenge people to think and react. Our motivation 
        is to create a brand that will have a positive impact on the world around 
        us. Rooted in art and design, we view our product as a wearable canvas. 
        We strive to set trends not follow them. The Simple Device motto is &quot;break 
        the pattern&quot; and that's exactly what we do… </div>
<table width="62%" border="0" height="65">
  <tr> 
    <td height="13"><img src="Images/Linkhome.jpg" width="177" height="60"><img src="Images/Linkart.jpg" width="196" height="60"><img src="Images/music.jpg" width="172" height="60"><img src="Images/locator.jpg" width="166" height="60"><img src="Images/contact.jpg" width="185" height="60"> 
...
...
...

Likewise, instead of using a <dir> tag for the right hand box (whatever a dir tag is) you should use another div with a different id. You should also try to keep all the css in one place so you don't mix stuff up. You may not have noticed, but you deffined the size and position of the dir element twice with different settings each time. So the css, tidied up, would be

Code:

#rigthhand {
left: 451px; 
top: 106px; 
width: 426px; 
height: 480px;
position: absolute;
overflow: auto;
z-index:10;
}

And this would go in imediatly after the lefthand div and before the talbes.

Code:

<div id="righthand"> BLAH 
        BLAH BLAHBLAHBLAH BLAHBLAHBLAH BLAHBLAHBLAH BLAHBLAHBLAH BLAHBLAHBLAH
...
</div>

**cgoodman381** · 12-19-2004, 09:27 PM

Rincewind, hey man. Thanks a lot. Everything works perfectly, looks great. Now i just have some little things to do and its almost ready.

Thanks a lot rince

**Mooofasa** · 12-20-2004, 03:54 AM

Sorry about what i said yesterday, I was having a tantrum b/c everyone seems to start using scrolling things again.

A good site allows the user to interact, but when that interaction envolves boring scrolling, the user can be put off.

It is not always necessary to use scrollbars, unless the design of the site deems it necessay.