Current location: Hot Scripts Forums » General Web Coding » CSS » css problem with the scroll bar


css problem with the scroll bar

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 11-04-08, 06:34 PM
crazy.works crazy.works is offline
Newbie Coder
  
Join Date: Sep 2008
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
css problem with the scroll bar
hello guys,
i have problem in the scroll bar on my css code , i am trying to use that css menu from that link http://www.cssplay.co.uk/menus/slide_fly.html

it actually works very good but i want to use it on the right side from my site not in the left side so i edited the ccs code but the scroll bar didnt works really good ,it scroll so much on the left side ,
here is screen shot http://qbael.com/upload/mn/screen.JPG

and here is my full css and html code after the editing.


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Vertical slide </title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">


#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:right; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(slide/slide_0.gif) no-repeat;}

#menu li.sub {background:#fff url(slide/slide_0.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; right:-9999px; width:150px;}

#menu :hover {color:#ff0; background:#fff url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover > a {color:#ff0; background:#fff url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; right:130px; top:0; height:auto; z-index:500; border:1px solid #fff;}

#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:right; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(slide/arrow.gif) no-repeat 20px center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #626262 url(slide/arrow.gif) no-repeat 20px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(slide/arrow.gif) no-repeat 20px center; color:#ff0;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#888;}

#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}

</style>
</head>

<body>
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="#nogo">European</a></li>
                        <li><a href="#nogo">Indian</a></li>
                        <li><a href="#nogo">North Africa</a></li>
                        <li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                        <li><a href="#nogo">South American</a></li>
                                        <li class="fly"><a href="#nogo">North American<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                                        <li><a href="#nogo">Grey tree frog</a></li>
                                                        <li><a href="#nogo">Green tree frog</a></li>
                                                        <li><a href="#nogo">Spring peeper</a></li>
                                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                        </li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li><a href="#nogo">Japanese</a></li>
                        <li><a href="#nogo">Chinese</a></li>
                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                        <li><a href="#nogo">Cyclorana</a></li>
                                        <li><a href="#nogo">Litoria</a></li>
                                        <li><a href="#nogo">Nyctimystes</a></li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                        <li><a href="#nogo">Agalychnis</a></li>
                                        <li><a href="#nogo">Cruziohyla</a></li>
                                        <li><a href="#nogo">Hylomantis</a></li>
                                        <li><a href="#nogo">Pachymedusa</a></li>
                                        <li><a href="#nogo">Phasmahyla</a></li>
                                        <li><a href="#nogo">Phrynomedusa</a></li>
                                        <li><a href="#nogo">Phyllomedusa</a></li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                        <li><a href="#nogo">Cryptobatrachus</a></li>
                                        <li><a href="#nogo">Flectonotus</a></li>
                                        <li><a href="#nogo">Gastrotheca</a></li>
                                        <li><a href="#nogo">Hemiphractus</a></li>
                                        <li><a href="#nogo">Stefania</a></li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                        <li><a href="#nogo">Acris</a></li>
                                        <li><a href="#nogo">Anotheca</a></li>
                                        <li><a href="#nogo">Bokermannohyla</a></li>
                                        <li><a href="#nogo">Corythomantis</a></li>
                                        <li><a href="#nogo">Ecnomiohyla</a></li>
                                        <li><a href="#nogo">Hyloscirtus</a></li>
                                        <li><a href="#nogo">Megastomatohyla</a></li>
                                        <li><a href="#nogo">Osteocephalus</a></li>
                                        <li><a href="#nogo">Pseudacris</a></li>
                                        <li><a href="#nogo">Sphaenorhynchus</a></li>
                                        <li><a href="#nogo">Trachycephalus</a></li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                        <li><a href="#nogo">Boophis</a></li>
                                        <li><a href="#nogo">Callixalus</a></li>
                                        <li><a href="#nogo">Chiromantis</a></li>
                                        <li><a href="#nogo">Cryptothylax</a></li>
                                        <li><a href="#nogo">Mantidactylus</a></li>
                                        <li><a href="#nogo">Rhacophorus</a></li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                        <li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                        <li><a href="#nogo">Buergeria</a></li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        </li>
                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
                        <li><a href="#nogo11">Encyclopedia</a></li>
                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="#nogo">Complete treefrog</a></li>
                        <li><a href="#nogo">Old World treefrogs</a></li>
                        <li><a href="#nogo">Amphibian Species</a></li>
                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</body>
</html>


so please help me to fix it .

thanks
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks

« PHP grief | blue square around images »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] help: IE6 fluid layout problem (hidden left content bar) punjabisingh CSS 1 06-21-08 08:58 PM
Problem with CSS and PHP working together:( cssgopher PHP 7 03-24-08 04:31 AM
i solved the other problem, but now IE says there is an error with scroll bars?? sushi4664 CSS 9 05-07-07 05:09 PM
Scroll Bar danlew CSS 1 02-01-06 02:49 PM
CSS Div problem themanmathias CSS 1 09-29-05 09:05 PM


All times are GMT -5. The time now is 02:36 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.