...

View Full Version : css popup, height works, width doesnt



masterofollies
07-11-2008, 02:31 AM
I cannot understand why a width tag won't work in my css pop up. I used this


width: 386px; height: 300px;

and my popup coding is this,


echo "<a onmouseover='this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'block' \" ><h3><span>Fresh Fish</span></h3></a>
<div id='PopUp2' style='display: none; position: absolute; left: 330px; top: 150px; border: solid black 1px; padding: 10px; background:url(http://www.rodgame.org/images/popupbox.jpg); text-align: justify; font-size: 12px; width: 200px;'>
<a href=\"rewards.php?do=catfish\"><font color=blue>Catfish</font></a><br /><a href=\"rewards.php?do=bass\"><font color=blue>Largemouth Bass</font></a><br /><a href=\"rewards.php?do=pike\"><font color=blue>Northern Pike</font></a><br /><a href=\"rewards.php?do=walleye\"><font color=blue>Walleye</font></a><br /><a href=\"rewards.php?do=salmon\"><font color=blue>Salmon</font></a>
<br />
<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'none' \" ><span style=\"text-decoration: underline;\"><font color=black>Close</font></span></a></div>
</div><br />"

rangana
07-11-2008, 03:03 AM
It follows the width specified. Do you have a link to the page in question?

masterofollies
07-11-2008, 05:17 AM
Yeah

www.rodgame.org/popup.php

rangana
07-11-2008, 05:22 AM
I don't know where you applied the width, but try changing the highlighted:


<div id='PopUp2' style='display: none; position: absolute; left: 330px; top: 150px; height: 300px; border: solid black 1px; padding: 10px; background:url(http://www.rodgame.org/images/popupbox.jpg); text-align: justify; font-size: 12px; width: 200px;'>


to 365px;. You might also find it useful to add no-repeat in the CSS background property.

Hope it helps.

masterofollies
07-11-2008, 02:36 PM
It works perfect! I thought that width was used for something else but I was wrong. For the no-repeat do I just that that in there like this?


echo "<a onmouseover='this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'block' \" ><h3><span>Fresh Fish</span></h3></a>
<div id='PopUp2' style='display: none; position: absolute; left: 330px; top: 150px; border: solid black 1px; no-repeat; padding: 10px; background:url(http://www.rodgame.org/images/popupbox.jpg); text-align: justify; font-size: 12px; width: 200px;'>
<a href=\"rewards.php?do=catfish\"><font color=blue>Catfish</font></a><br /><a href=\"rewards.php?do=bass\"><font color=blue>Largemouth Bass</font></a><br /><a href=\"rewards.php?do=pike\"><font color=blue>Northern Pike</font></a><br /><a href=\"rewards.php?do=walleye\"><font color=blue>Walleye</font></a><br /><a href=\"rewards.php?do=salmon\"><font color=blue>Salmon</font></a>
<br />
<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'none' \" ><span style=\"text-decoration: underline;\"><font color=black>Close</font></span></a></div>
</div><br />"

rangana
07-12-2008, 01:46 AM
No, place it here:


echo "<a onmouseover='this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'block' \" ><h3><span>Fresh Fish</span></h3></a>
<div id='PopUp2' style='display: none; position: absolute; left: 330px; top: 150px; border: solid black 1px; padding: 10px; background:url(http://www.rodgame.org/images/popupbox.jpg) no-repeat; text-align: justify; font-size: 12px; width: 200px;'>
<a href=\"rewards.php?do=catfish\"><font color=blue>Catfish</font></a><br /><a href=\"rewards.php?do=bass\"><font color=blue>Largemouth Bass</font></a><br /><a href=\"rewards.php?do=pike\"><font color=blue>Northern Pike</font></a><br /><a href=\"rewards.php?do=walleye\"><font color=blue>Walleye</font></a><br /><a href=\"rewards.php?do=salmon\"><font color=blue>Salmon</font></a>
<br />
<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'none' \" ><span style=\"text-decoration: underline;\"><font color=black>Close</font></span></a></div>
</div><br />"


Hope it helps.

For further reading:
http://www.w3schools.com/css/css_background.asp
http://www.w3schools.com/css/pr_background-repeat.asp

masterofollies
07-12-2008, 10:29 PM
Oh it has to be inside the tag. Gotcha. Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum