...

View Full Version : css problem with the scroll bar



crazy.works
11-04-2008, 08:46 AM
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 css code after the editing.




#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;}

.text {float:right; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.text img {display:block;}
.text p {margin:0; padding:5px 10px; line-height:15px;}



so please help me to fix it .

thanks

crazy.works
11-04-2008, 08:50 AM
and that was the code before my edit





#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; 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; left:-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; left: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:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(slide/arrow.gif) no-repeat 120px 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 120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(slide/arrow.gif) no-repeat 120px 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 120px 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 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(slide/arrow.gif) no-repeat 120px 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;}

.text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.text img {display:block;}
.text p {margin:0; padding:5px 10px; line-height:15px;}

effpeetee
11-04-2008, 09:46 AM
We need to see all your code. CSS without the markup is not much use to us. A site URL would be even better.

Frank

stanfordrep
11-04-2008, 09:58 AM
Could it be that while you were trying to align:right the actual menu subcategories, you ended up align:right the entire page by calling the same css div name? Just a thought.

crazy.works
11-04-2008, 10:43 AM
okay here is the full code including the html , the css and please help me to fix





<!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>

crazy.works
11-04-2008, 04:18 PM
please help .any suggestion ???:(

effpeetee
11-05-2008, 09:40 AM
Hi!
I got your PM,

You must realise that it is very difficult to see what is wrong as we do not have your images.

This is what I get (http://exitfegs.co.uk/crazy.html)when I run your code. You see it is not very helpful. Can you send us the images? or a url would be better.

I have tidied up the code a little.

Frank

crazy.works
11-05-2008, 10:06 AM
thanks effpeetee for the reply and here is the full file
http://www.***********/download/50916749588c953c/

effpeetee
11-05-2008, 10:08 AM
I cannot download the file. IE7 won't do it.

Frank

crazy.works
11-05-2008, 10:26 AM
ok i attached it here

effpeetee
11-05-2008, 10:32 AM
Sorry crazy.works but this is what we need.

#menu li.sub {
background: #fff url(slide/slide_0.gif) no-repeat;
and any other gifs or jpegs involved.

Frank

crazy.works
11-05-2008, 10:37 AM
so how gonna we fix it ???

crazy.works
11-05-2008, 10:46 AM
hello ,
well , i got small solution for that .
the menu was working very cool with no problem in the left side and when i edited the ccs to got it work on the right side of my site it didnt work

so my solution is , i attached the main file which works o the left side ,and please can u just make the correct edit to got it works on the right side with no problems ??

thanks a lot

effpeetee
11-05-2008, 11:44 AM
Have a look at this (http://exitfegs.co.uk/crazy.html).

Frank

crazy.works
11-05-2008, 12:01 PM
oh it missed up

effpeetee
11-05-2008, 12:10 PM
What do you get.
I get the menus but they flickker a lot.
I take it that is not normal.:D

Do try again (http://exitfegs.co.uk/crazy.html), I have updated it.

This is an alternative (http://exitfegs.co.uk/crazy2.html).

Frank

crazy.works
11-05-2008, 02:39 PM
so we cant fix that or what ?:(

crazy.works
11-05-2008, 02:48 PM
hello mr frank ,
well i really wanna thank you for your try to help me and iam really thankful for that :)

so with one of my friends help ,he make some change in the code and it make it works

it works very good but i need to use dir="rtl" because it is main thing in my site ,
so if u try to use dir="rtl" on your fixed menu you will got the scroll bar problem again

i attached the file, so please can we fix that ???

effpeetee
11-05-2008, 03:45 PM
Not quite sure what you mean. But I have altered the slide directory to rtl.

If I have mis-understood just reply and tell me.

Frank


<!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" 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">

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/tree_frog_slide.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

#wrapper{width:652px;}
#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(rtl/slide_0.gif) no-repeat;}

#menu li.sub {background:#fff url(rtl/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; left:-9999px; width:150px;}

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

#menu :hover > a {color:#ff0; background:#fff url(rtl/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; left:-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:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(rtl/arrow1.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(rtl/arrow1.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(rtl/arrow1.gif) no-repeat 120px 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(rtl/arrow1.gif) no-repeat 120px 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(rtl/arrow1.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(rtl/arrow1.gif) no-repeat 120px 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;}

.text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.text img {display:block;}
.text p {margin:0; padding:5px 10px; line-height:15px;}

.clearer{clear:both;}

</style>
</head>

<body>
<div id="wrapper">
<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>
<div class="text">
<img src="slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>

<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but terrestrial or aquatic (live on the ground or in the water).</p>

<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>

<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
<div class="clearer"></div>
</body>
</html>

crazy.works
11-05-2008, 03:58 PM
just i want to make my full site dir="rtl" , so in the <html> tag of course it is main thing to make it <html dir="rtl" lang="en">

just edit the html tag and make it like that
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="en">

if you make the <html> tag like that on the menu file u will got the scroll bar problem again

so can we fix that ?

effpeetee
11-05-2008, 04:07 PM
Here it is. crazy.html (http://exitfegs.co.uk/crazy.html)

And it validates.


<!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">

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/tree_frog_slide.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

#wrapper{width:652px;}
#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(rtl/slide_0.gif) no-repeat;}

#menu li.sub {background:#fff url(rtl/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; left:-9999px; width:150px;}

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

#menu :hover > a {color:#ff0; background:#fff url(rtl/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; left:-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:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(rtl/arrow1.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(rtl/arrow1.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(rtl/arrow1.gif) no-repeat 120px 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(rtl/arrow1.gif) no-repeat 120px 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(rtl/arrow1.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(rtl/arrow1.gif) no-repeat 120px 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;}

.text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.text img {display:block;}
.text p {margin:0; padding:5px 10px; line-height:15px;}

.clearer{clear:both;}

</style>
</head>

<body>
<div id="wrapper">
<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>
<div class="text">
<img src="slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>

<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but terrestrial or aquatic (live on the ground or in the water).</p>

<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>

<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
<div class="clearer"></div>
</body>
</html>



Frank

crazy.works
11-05-2008, 04:23 PM
woooow , it really work very good :)

u know mr Frank if i will keep saying thanks from now until the next year it will not be enough to thank you , u saved me :)

thank you very much :)

crazy.works
11-05-2008, 04:24 PM
oh mr frank it doesn't work on the IE6

jerry62704
11-05-2008, 04:35 PM
woooow , it really work very good :)

u know mr Frank if i will keep saying thanks from now until the next year it will not be enough to thank you , u saved me :)

thank you very much :)

You might want to consider clicking the "thanks" button to thank him as well. As one of the unpaid people here, that the only "pay" we get.

effpeetee
11-05-2008, 05:05 PM
I am very sorry, but I do not have IE6. Can you not contact Stu. He has an advice service I believe.

Frank

effpeetee
11-05-2008, 06:25 PM
I have made an ammendment. Try it again. (http://exitfegs.co.uk/crazy.html)

It is an added jscript line.

It's worth a try.

Frank

crazy.works
11-05-2008, 07:52 PM
okay thanks mr frank ,i guess i will take your advise :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum