Help needed with CSS sroll box

[Slav2]

everything works, except i cant scroll down and that text isnt going into the scroll box.

Ok, here is all my codes:


CSS DOCUMENT

Code: Select all

#guidetownhall {
	left:284px;
	top:215px;
	width: 550px;
	height: 375px;
	overflow: auto;
	position: absolute;
	z-index:4;	
}

PHP DOCUMENT

Code: Select all

<div id="guidetownhall">
<?php
if(isset($_GET['townhall']))
{
$bypassguides = 1;

print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";

}
?>
</div>

THis is the screen shot: (when i put the cursor over the scroll is not what its supposed to be. it becomes the cursor when you are supposed to type text in.)

http://i820.photobucket.com/albums/zz12 ... tled-1.png

[kaos78414]

Try experimenting with different overflow options - overflow:hidden, overflow:scroll, etc. That's the only thing I can think of. When it comes to CSS sometimes you just gotta experiment. Download web developer toolbar or firebug, that way you can edit CSS on the fly, see the changes, and then apply them when you get something that works.

Also, I would change print to echo in your PHP.

[Slav2]

whts the difference between print n echo?

[Slav2]

and i tried everything i could think of..and nothing is working

[kaos78414]

Print returns a Boolean value, and echo doesn't. This makes echo slightly faster and is the preferred method unless you need the true/false value for something.

Can you post the full style sheet? I'm not sure what's wrong just yet, I'd have to see the rest of the code.

[PaxBritannia]

As for the cursor, there is some info here: http://www.w3schools.com/css/pr_class_cursor.asp

Apart from that, as kaos78414 mentioned, we can't really do much without the CSS stylesheet for that page.

pax.

[Slav2]

well i posted the css up in the top document......here it is again:

Code: Select all

/*                                              guides                                   */

#guidetownhall {
	left:284px;
	top:215px;
	width: 550px;
	height: 375px;
	overflow: auto;
	position: absolute;
	z-index:4;	
}

#guidemainpage {
	position:absolute;
	left:284px;
	top:210px;
	width:650px;
	height:500px;
	z-index:4;
	font-size: 20px;
	font-weight: 500;
    }

and here is my whole php document for that page:

Code: Select all

<?php
include_once 'maintemplate.php';
?>
<link href="maintemplate.css" rel="stylesheet" type="text/css" />

<div id="guidetownhall">
<?php
if(isset($_GET['townhall']))
{
$bypassguides = 1;

print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";

}
?>
</div>

<?php
if(isset($_GET['warehouse']))
{
$bypassguides = 1;

print "Here will be info about the warehouse.";

}
?>

<?php
if(isset($_GET['mill']))
{
$bypassguides = 1;

print "Here will be info about the mill.";

}
?>

<?php
if(isset($_GET['house']))
{
$bypassguides = 1;

print "Here will be info about the house.";

}
?>

<?php
if(isset($_GET['safehouse']))
{
$bypassguides = 1;

print "Here will be info about the safe house.";

}
?>

<?php
if(isset($_GET['church']))
{
$bypassguides = 1;

print "Here will be info about the church.";

}
?>

<?php
if(isset($_GET['settlerscamp']))
{
$bypassguides = 1;

print "Here will be info about the settlers camp.";

}
?>

<?php
if(isset($_GET['acadamy']))
{
$bypassguides = 1;

print "Here will be info about the acadamy.";

}
?>

<?php
if(isset($_GET['market']))
{
$bypassguides = 1;

print "Here will be info about the market.";

}
?>

<?php
if(isset($_GET['barracks']))
{
$bypassguides = 1;

print "Here will be info about the barracks.";

}
?>

<?php
if(isset($_GET['castle']))
{
$bypassguides = 1;

print "Here will be info about the castle.";

}
?>

<?php
if(isset($_GET['embassy']))
{
$bypassguides = 1;

print "Here will be info about the embassy.";

}
?>

<?php
if(isset($_GET['wall']))
{
$bypassguides = 1;

print "Here will be info about the wall.";

}
?>

<?php
if(isset($_GET['tavern']))
{
$bypassguides = 1;

print "Here will be info about the tavern.";

}
?>

<div id="guidemainpage">
<?php
if ($bypassguides != 1)
{
print "    <font color='#FF0000'>Click on the following links to read the different sections</font>";

print "<table><tr><td>              General </td><td> Guides              </td><td>              Building </td><td> Guides              </td><td>              Troop </td><td> Guides              </td></tr>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?townhall'>Town Hall</a></td><td><A href='guides.php?acadamy'>Acadamy</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?warehouse'>Warehouse</a></td><td><A href='guides.php?market'>Market</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?mill'>Mill</a></td><td><A href='guides.php?barracks'>Barracks</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?house'>House</a></td><td><A href='guides.php?castle'>Castle</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?safehouse'>Safe House</a></td><td><A href='guides.php?embassy'>Embassy</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?church'>Church</a></td><td><A href='guides.php?wall'>Wall</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?settlerscamp'>Settlers Camp</a></td><td><A href='guides.php?tavern'>Tavern</a></td><td>link5</td><td>link6</td></tr>";
print "<tr><td>link1</td><td>link2</td><td>link3</td><td>link4</td><td>link5</td><td>link6</td></tr></table>";
}
?>
</div>

and here is the maintemplate.css:

Code: Select all

    body {
       background-color: #FFCC66;
       
    }
    #backgroundpic {
       position:absolute;
       left:70px;
       top:20px;
       width:150px;
       height:150px;
       z-index:1;
    }

    #townview {
       position:absolute;
       left:259px;
       top:198px;
       width:600px;
       height:400px;
       z-index:2;
    }

    #logoroyal {
       position:absolute;
       left:341px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #logoempires {
       position:absolute;
       left:531px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #premiumaccountbutton {
       position:absolute;
       left:78px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #visitforumbutton {
       position:absolute;
       left:820px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #currentcityword {
       position:absolute;
       left:87px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #cities {
       position:absolute;
       left:190px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #defaultselect {
       position:absolute;
       left:278px;
       top:162px;
       width:400px;
       height:40px;
       z-index:3;
    }
/*                                            resources display                          */
    #wood {
       position:absolute;
       left:92px;
       top:122px;
       width:30px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #stone {
       position:absolute;
       left:197px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #iron {
       position:absolute;
       left:295px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #food {
       position:absolute;
       left:384px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #people {
       position:absolute;
       left:481px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #gold {
       position:absolute;
       left:575px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #minfood {
       position:absolute;
       left:665px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #happiness {
       position:absolute;
       left:758px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #loyalty {
       position:absolute;
       left:860px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #wooddisplay {
       position:absolute;
       left:137px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #stonedisplay {
       position:absolute;
       left:237px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #irondisplay {
       position:absolute;
       left:327px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #fooddisplay {
       position:absolute;
       left:425px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #peopledisplay {
       position:absolute;
       left:526px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #golddisplay {
       position:absolute;
       left:610px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #minfooddisplay {
       position:absolute;
       left:710px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #happinessdisplay {
       position:absolute;
       left:826px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #loyaltydisplay {
       position:absolute;
       left:910px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }
/*                                         announcments, chats, quests                         */
    #announcmentsbutton {
       position:absolute;
       left:508px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #worldchatbutton {
       position:absolute;
       left:622px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #alliancechatbutton {
       position:absolute;
       left:734px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #questsbutton {
       position:absolute;
       left:847px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }
/*                                            all links on left                          */
    #overviewbutton {
       position:absolute;
       left:135px;
       top:235px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #villageviewbutton {
       position:absolute;
       left:135px;
       top:265px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #resourcebutton {
       position:absolute;
       left:135px;
       top:295px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #inboxbutton {
       position:absolute;
       left:135px;
       top:325px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #viewmapbutton {
       position:absolute;
       left:135px;
       top:355px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #rankingsbutton {
       position:absolute;
       left:135px;
       top:385px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #notesbutton {
       position:absolute;
       left:135px;
       top:415px;
       width:150px;
       height:50px;
       z-index:2;
    }
	
#guidesbutton {
       position:absolute;
       left:135px;
       top:445px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #Logoutbutton {
       position:absolute;
       left:135px;
       top:475px;
       width:150px;
       height:50px;
       z-index:2;
    }
/*                                            map positions                          */
    #tag1{
             position:absolute;
             left:317px;
             top:260px;
                width:28px;
                height:36px;
             z-index:5;
             }

    #tag2{
             position:absolute;
             left:500px;
             top:350px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag3{
             position:absolute;
             left:500px;
             top:450px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag4{
             position:absolute;
             left:750px;
             top:450px;
                width:28px;
                height:36px;
             z-index:5;
             }
/*                                            bottom of page                          */
    #dateandtime {
       position:absolute;
       left:184px;
       top:609px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }

    #copyright {
       position:absolute;
       left:423px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 800;
    }

    #contactsupport {
       position:absolute;
       left:744px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }

[Slav2]

haha wow i just found the problem....

ok i had z-index=4 and that meant it was i think in the page right before this one (at the bottom of the php) so i changed it to z-index=5 and now it works perfectly...

sorry for giving a hard time, but i appreciated the help guys..THanks

[PaxBritannia]

Congratulations at solving it yourself!

Sometimes the answer just becomes apparent.

pax.

[Slav2]

haha thanks lol and thats tru