Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    css popup, height works, width doesnt

    I cannot understand why a width tag won't work in my css pop up. I used this

    Code:
    width: 386px; height: 300px;
    and my popup coding is this,

    Code:
    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 />"

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    It follows the width specified. Do you have a link to the page in question?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    masterofollies (07-11-2008)

  • #3
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I don't know where you applied the width, but try changing the highlighted:
    Code:
    <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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    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?

    Code:
    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 />"

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    No, place it here:
    Code:
    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
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Oh it has to be inside the tag. Gotcha. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •