CSS Scrollbar ???

j4mes_bond25 · #1 May 6th, 2006, 15:43

I'm trying to getting "scrollbar" ONLY at certain parts of my page & after looking into "overflow" element, I'm yet far from getting success.

I'm getting my inspiration from this website:

http://www.tristarwebdesign.co.uk/te...ity/index.html

I've tried the "overflow:auto" in "contentRight" but am ALSO having Internet Explorer's own BOTH right & bottom scrollbar.

What I also want is the image (left hand side's image in "contentLeft") "Visible all the time" EVEN if someone scrolls down (using the "contentRight" scrollbar, which is the ONLY scrollbar I would like to have).

I also wonder why am I getting "space" on the top edge of the window (i.e. top of the banner), which is LESS on my browser window but its appearing MORE over the Internet, on this website.

This website can be seen on: members.fortunecity.com/dars2525/home.html

Presently, I've simply worked on 3 links: home.html, about.html, contact.html

My CSS file presently is:

Code: Select all

/* CSS Document */

body 
{
    background-color:white;
}

#logo
{
width:100%;
height:120px;
float:none;
text-align:center;
overflow:hidden;
}

#topMenu
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:center;
    width:100%;
    float:right;
    background-color:black;
}

#topMenu ul
{
    list-style: none;
    background-color:red;
    font-size:medium;
    float:none;
    position:relative;
    padding: 0;
}

#topMenu ul li 
{
    display:inline;
    width:130px;
    color:#FF00FF;
    float:left;
    position:relative;
}

#topMenu a
{
    display:block;
    text-decoration:none; 
    font-size:larger;
    color:red; 
}

#topMenu a:hover
{
    color:blue;
    background-color:white;
    text-transform:uppercase;
}

#content
{
width:100%;
height:400px;
overflow:auto;
}

#contentLeft 
{
width:300px;
margin-top:100px;
float:left;
}

#contentRight 
{
width:650px;
border-left:5px thin black;
}

#contentRight h1
{
font-family:Geneva, Arial, Helvetica, sans-serif;
color:blue;
font-size:large;
text-align:justify;
margin:30px;
}

#contentRight p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-size:medium;
text-align:justify;
margin-left:30px;
margin-top:10px;
}

#content p.first-letter:first-letter
{
    margin-left:20px;
    font-size:xx-large;
}

#content ul
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    margin-left:50px;
    list-style-image:url(list_icon.gif);
}

#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-size:medium;
margin:30px;
}

#content img.left
{
float:none;
padding:0px;
}

.bold 
{
margin:20px;
font-weight:bold;
}

#bottomMenu
{
border:1px solid red;
height:10px;
background-color:black;
font-family:"Times New Roman", Times, serif;
width:100%;
color:white;
text-align:center;
font-size:medium;
height:20px;
}

ukgeoff · #2 May 10th, 2006, 09:41

First thing first.

Seperate your JavaScript, CSS and xhtml into individual files.

Validate your code. W3C validator currently showing 32 errors.

The bullet list, in Firefox, disappears off to the right outside what graphically appear to be the intended boundaries of your page, and you have to scroll across to see it.

Get rid of the flashing bullets. Users will find this very irritating.

In IE, whilst the bullet list is more where you intended it to be, the layout is still broken.

It was only when I looked at the site with IE that i saw the image of the three telephonists. This image is nowwhere to be seen in Firefox.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need some help with ScrollBar in AS 3	dgstarr	Flash & Multimedia Forum	2	Sep 22nd, 2007 16:30
Scrollbar	menaka	Web Page Design	3	Oct 2nd, 2006 11:39
Scrollbar help?	spartak23	Web Page Design	7	Aug 3rd, 2006 19:03
Scrollbar	jaffa	Web Page Design	2	Sep 2nd, 2005 00:28

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Scrollbar ???