<select> won't show changes to size parameter.

Discussion in 'HTML & Website Design' started by Submerged, Jul 22, 2009.

  1. #1
    I'm attempting to put a simple <select> on my blog, something like this:
    <select name="steve" size="4">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    </select>
    Code (markup):
    However, when I do, it only shows one entry vertically ("1"). It does create a scroll bar, but I want it to actually show all four options at once like "size=4" would normally do. The code works fine on a normal HTML page, so I think it has something to do with my CSS style page. If someone more familiar with that could take a look I would be grateful :)

    style.css (should be standard Wordpress stand-alone installation stuff)
    /* Begin Typography & Colors */
    body {
    	font-size: 62.5%; /* Resets 1em to 10px */
    	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	background: #d5d6d7 url('images/kubrickbgcolor.jpg');
    	color: #333;
    	text-align: center;
    	}
    
    #page {
    	background-color: white;
    	border: 1px solid #959596;
    	text-align: left;
    	}
    
    #header {
    	background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
    	}
    
    #headerimg 	{
    	margin: 7px 9px 0;
    	height: 192px;
    	width: 740px;
    	}
    
    #content {
    	font-size: 1.2em;
    	}
    
    .widecolumn .entry p {
    	font-size: 1.05em;
    	}
    
    .narrowcolumn .entry, .widecolumn .entry {
    	line-height: 1.4em;
    	}
    
    .widecolumn {
    	line-height: 1.6em;
    	}
    
    .narrowcolumn .postmetadata {
    	text-align: center;
    	}
    
    .thread-alt {
    	background-color: #f8f8f8;
    }
    .thread-even {
    	background-color: white;
    }
    .depth-1 {
    border: 1px solid #ddd;
    }
    
    .even, .alt {
    
    	border-left: 1px solid #ddd;
    }
    
    #footer {
    	background: #e7e7e7 url('images/kubrickfooter.jpg') no-repeat top;
    	border: none;
    	}
    
    small {
    	font-family: Arial, Helvetica, Sans-Serif;
    	font-size: 0.9em;
    	line-height: 1.5em;
    	}
    
    h1, h2, h3 {
    	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	font-weight: bold;
    	}
    
    h1 {
    	font-size: 4em;
    	text-align: center;
    	}
    
    #headerimg .description {
    	font-size: 1.2em;
    	text-align: center;
    	}
    
    h2 {
    	font-size: 1.6em;
    	}
    
    h2.pagetitle {
    	font-size: 1.6em;
    	}
    
    #sidebar h2 {
    	font-family: 'Lucida Grande', Verdana, Sans-Serif;
    	font-size: 1.2em;
    	}
    
    h3 {
    	font-size: 1.3em;
    	}
    
    h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
    	text-decoration: none;
    	color: white;
    	}
    
    h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    	color: #333;
    	}
    
    h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
    	text-decoration: none;
    	}
    
    .entry p a:visited {
    	color: #b85b5a;
    	}
    
    .sticky {
    	background: #f7f7f7;
    	padding: 0 10px 10px;
    	}
    .sticky h2 {
    	padding-top: 10px;
    	}
    
    .commentlist li, #commentform input, #commentform textarea {
    	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	}
    .commentlist li ul li {
    	font-size: 1em;
    }
    
    .commentlist li {
    	font-weight: bold;
    }
    
    .commentlist li .avatar { 
    	float: right;
    	border: 1px solid #eee;
    	padding: 2px;
    	background: #fff;
    	}
    
    .commentlist cite, .commentlist cite a {
    	font-weight: bold;
    	font-style: normal;
    	font-size: 1.1em;
    	}
    
    .commentlist p {
    	font-weight: normal;
    	line-height: 1.5em;
    	text-transform: none;
    	}
    
    #commentform p {
    	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	}
    
    .commentmetadata {
    	font-weight: normal;
    	}
    
    #sidebar {
    	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	}
    
    small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    	color: #777;
    	}
    
    code {
    	font: 1.1em 'Courier New', Courier, Fixed;
    	}
    
    acronym, abbr, span.caps
    {
    	font-size: 0.9em;
    	letter-spacing: .07em;
    	}
    
    a, h2 a:hover, h3 a:hover {
    	color: #06c;
    	text-decoration: none;
    	}
    
    a:hover {
    	color: #147;
    	text-decoration: underline;
    	}
    
    #wp-calendar #prev a, #wp-calendar #next a {
    	font-size: 9pt;
    	}
    
    #wp-calendar a {
    	text-decoration: none;
    	}
    
    #wp-calendar caption {
    	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	text-align: center;
    	}
    
    #wp-calendar th {
    	font-style: normal;
    	text-transform: capitalize;
    	}
    /* End Typography & Colors */
    
    
    
    /* Begin Structure */
    body {
    	margin: 0 0 20px 0;
    	padding: 0;
    	}
    
    #page {
    	background-color: white;
    	margin: 20px auto;
    	padding: 0;
    	width: 760px;
    	border: 1px solid #959596;
    	}
    
    #header {
    	background-color: #73a0c5;
    	margin: 0 0 0 1px;
    	padding: 0;
    	height: 200px;
    	width: 758px;
    	}
    
    #headerimg {
    	margin: 0;
    	height: 200px;
    	width: 100%;
    	}
    
    .narrowcolumn {
    	float: left;
    	padding: 0 0 20px 45px;
    	margin: 0px 0 0;
    	width: 450px;
    	}
    
    .widecolumn {
    	padding: 10px 0 20px 0;
    	margin: 5px 0 0 150px;
    	width: 450px;
    	}
    
    .post {
    	margin: 0 0 40px;
    	text-align: justify;
    	}
    
    .post hr {
    	display: block;
    	}
    
    .widecolumn .post {
    	margin: 0;
    	}
    
    .narrowcolumn .postmetadata {
    	padding-top: 5px;
    	}
    
    .widecolumn .postmetadata {
    	margin: 30px 0;
    	}
    
    .widecolumn .smallattachment {
    	text-align: center;
    	float: left;
    	width: 128px;
    	margin: 5px 5px 5px 0px;
    }
    
    .widecolumn .attachment {
    	text-align: center;
    	margin: 5px 0px;
    }
    
    .postmetadata {
    	clear: both;
    }
    
    .clear {
    	clear: both;
    }
    
    #footer {
    	padding: 0;
    	margin: 0 auto;
    	width: 760px;
    	clear: both;
    	}
    
    #footer p {
    	margin: 0;
    	padding: 20px 0;
    	text-align: center;
    	}
    /* End Structure */
    
    
    
    /*	Begin Headers */
    h1 {
    	padding-top: 70px;
    	margin: 0;
    	}
    
    h2 {
    	margin: 30px 0 0;
    	}
    
    h2.pagetitle {
    	margin-top: 30px;
    	text-align: center;
    }
    
    #sidebar h2 {
    	margin: 5px 0 0;
    	padding: 0;
    	}
    
    h3 {
    	padding: 0;
    	margin: 30px 0 0;
    	}
    
    h3.comments {
    	padding: 0;
    	margin: 40px auto 20px ;
    	}
    /* End Headers */
    
    
    
    /* Begin Images */
    p img {
    	padding: 0;
    	max-width: 100%;
    	}
    
    /*	Using 'class="alignright"' on an image will (who would've
    	thought?!) align the image to the right. And using 'class="centered',
    	will of course center the image. This is much better than using
    	align="center", being much more futureproof (and valid) */
    
    img.centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left;
    	}
    /* End Images */
    
    
    
    /* Begin Lists
    
    	Special stylized non-IE bullets
    	Do not work in Internet Explorer, which merely default to normal bullets. */
    
    html>body .entry ul {
    	margin-left: 0px;
    	padding: 0 0 0 30px;
    	list-style: none;
    	padding-left: 10px;
    	text-indent: -10px;
    	}
    
    html>body .entry li {
    	margin: 7px 0 8px 10px;
    	}
    
    .entry ul li:before, #sidebar ul ul li:before {
    	content: "\00BB \0020";
    	}
    
    .entry ol {
    	padding: 0 0 0 35px;
    	margin: 0;
    	}
    
    .entry ol li {
    	margin: 0;
    	padding: 0;
    	}
    
    .postmetadata ul, .postmetadata li {
    	display: inline;
    	list-style-type: none;
    	list-style-image: none;
    	}
    
    #sidebar ul, #sidebar ul ol {
    	margin: 0;
    	padding: 0;
    	}
    
    #sidebar ul li {
    	list-style-type: none;
    	list-style-image: none;
    	margin-bottom: 15px;
    	}
    
    #sidebar ul p, #sidebar ul select {
    	margin: 5px 0 8px;
    	}
    
    #sidebar ul ul, #sidebar ul ol {
    	margin: 5px 0 0 10px;
    	}
    
    #sidebar ul ul ul, #sidebar ul ol {
    	margin: 0 0 0 10px;
    	}
    
    ol li, #sidebar ul ol li {
    	list-style: decimal outside;
    	}
    
    #sidebar ul ul li, #sidebar ul ol li {
    	margin: 3px 0 0;
    	padding: 0;
    	}
    /* End Entry Lists */
    
    
    
    /* Begin Form Elements */
    #searchform {
    	margin: 10px auto;
    	padding: 5px 3px;
    	text-align: center;
    	}
    
    #sidebar #searchform #s {
    	width: 108px;
    	padding: 2px;
    	}
    
    #sidebar #searchsubmit {
    	padding: 1px;
    	}
    
    .entry form { /* This is mainly for password protected posts, makes them look better. */
    	text-align:center;
    	}
    
    select {
    	width: 130px;
    	}
    
    #commentform input {
    	width: 170px;
    	padding: 2px;
    	margin: 5px 5px 1px 0;
    	}
    
    #commentform {
    	margin: 5px 10px 0 0;
    	}
    #commentform textarea {
    	width: 100%;
    	padding: 2px;
    	}
    #respond:after {
    		content: "."; 
    	    display: block; 
    	    height: 0; 
    	    clear: both; 
    	    visibility: hidden;
    	}
    #commentform #submit {
    	margin: 0 0 5px auto;
    	float: right;
    	}
    /* End Form Elements */
    
    
    
    /* Begin Comments*/
    .alt {
    	margin: 0;
    	padding: 10px;
    	}
    
    .commentlist {
    	padding: 0;
    	text-align: justify;
    	}
    
    .commentlist li {
    	margin: 15px 0 10px;
    	padding: 5px 5px 10px 10px;
    	list-style: none;
    
    	}
    .commentlist li ul li { 
    	margin-right: -5px;
    	margin-left: 10px;
    }
    
    .commentlist p {
    	margin: 10px 5px 10px 0;
    }
    .children { padding: 0; }
    
    #commentform p {
    	margin: 5px 0;
    	}
    
    .nocomments {
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	}
    
    .commentmetadata {
    	margin: 0;
    	display: block;
    	}
    /* End Comments */
    
    
    
    /* Begin Sidebar */
    #sidebar
    {
    	padding: 20px 0 10px 0;
    	margin-left: 545px;
    	width: 190px;
    	}
    
    #sidebar form {
    	margin: 0;
    	}
    /* End Sidebar */
    
    
    
    /* Begin Calendar */
    #wp-calendar {
    	empty-cells: show;
    	margin: 10px auto 0;
    	width: 155px;
    	}
    
    #wp-calendar #next a {
    	padding-right: 10px;
    	text-align: right;
    	}
    
    #wp-calendar #prev a {
    	padding-left: 10px;
    	text-align: left;
    	}
    
    #wp-calendar a {
    	display: block;
    	}
    
    #wp-calendar caption {
    	text-align: center;
    	width: 100%;
    	}
    
    #wp-calendar td {
    	padding: 3px 0;
    	text-align: center;
    	}
    
    #wp-calendar td.pad:hover { /* Doesn't work in IE */
    	background-color: #fff; }
    /* End Calendar */
    
    
    
    /* Begin Various Tags & Classes */
    acronym, abbr, span.caps {
    	cursor: help;
    	}
    
    acronym, abbr {
    	border-bottom: 1px dashed #999;
    	}
    
    blockquote {
    	margin: 15px 30px 0 10px;
    	padding-left: 20px;
    	border-left: 5px solid #ddd;
    	}
    
    blockquote cite {
    	margin: 5px 0 0;
    	display: block;
    	}
    
    .center {
    	text-align: center;
    	}
    
    .hidden {
    	display: none;
    	}
    	
    .screen-reader-text {
         position: absolute;
         left: -1000em;
    }
    
    hr {
    	display: none;
    	}
    
    a img {
    	border: none;
    	}
    
    .navigation {
    	display: block;
    	text-align: center;
    	margin-top: 10px;
    	margin-bottom: 60px;
    	}
    /* End Various Tags & Classes*/
    
    
    
    /* Captions */
    .aligncenter,
    div.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .wp-caption {
    	border: 1px solid #ddd;
    	text-align: center;
    	background-color: #f3f3f3;
    	padding-top: 4px;
    	margin: 10px;
    	-moz-border-radius: 3px;
    	-khtml-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    .wp-caption img {
    	margin: 0;
    	padding: 0;
    	border: 0 none;
    }
    
    .wp-caption p.wp-caption-text {
    	font-size: 11px;
    	line-height: 17px;
    	padding: 0 4px 5px;
    	margin: 0;
    }
    Code (markup):
     
    Submerged, Jul 22, 2009 IP
  2. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #2
    Could you link to a page you are attempting to do this on? Thanks.
     
    crath, Jul 22, 2009 IP
  3. Submerged

    Submerged Active Member

    Messages:
    132
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    I would, except it's on my local server :) I tried the code on my actual blog (http://www.christspeak.com) and it worked just fine. I have a different theme on that one though, so the CSS may be set-up differently. I'm using the default theme on the localhost.

    If it would help I can take screenshots at size 1 and size 4 or something. Just let me know if there's anything else I could do to help debug.
     
    Submerged, Jul 22, 2009 IP
  4. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #4
    Hmm, this is a good one. The only two CSS objects that should be affecting it are
    #sidebar ul p, #sidebar ul select {
    	margin: 5px 0 8px;
    	}
    
    Code (markup):
    and
    select {
    	width: 130px;
    	}
    
    Code (markup):
    which shouldn't cause the problem you are having. Did you triple check that you are using both opening and closing quotes, tags, etc etc? just to be safe
     
    crath, Jul 22, 2009 IP
  5. Submerged

    Submerged Active Member

    Messages:
    132
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    Yeah, I copy/pasted the actual select code onto here (I was debugging on the page itself so it's very generic). I just went through and checked all the quotes, <>s, {}s and /s on the whole page and it seems to be fine.

    The only unique thing I can think of is that it is inside of a div tag (to be precise, <div id="tab1">). I'm not sure if that would affect anything, but maybe it would.

    Just in case it would help, here's the HTML output of the entire page (my actual code begins at "<h2>Adsense Organizer</h2><br>", just Wordpress stuff before that):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Adsense Organizer &lsaquo; Adsense Tester  — WordPress</title>
    <script type="text/javascript">
    //<![CDATA[
    addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
    var userSettings = {'url':'/wordpress/','uid':'1','time':'1248328648'};
    var ajaxurl = 'http://localhost:8888/wordpress/wp-admin/admin-ajax.php', pagenow = 'options-general', adminpage = 'settings_page_adsenseorganizer';
    //]]>
    </script>
    <link rel='stylesheet' href='http://localhost:8888/wordpress/wp-admin/load-styles.php?c=1&amp;dir=ltr&amp;load=global,wp-admin&amp;ver=ba4d987ec2b562bd22e5da70fe38318d' type='text/css' media='all' />
    <link rel='stylesheet' id='colors-css'  href='http://localhost:8888/wordpress/wp-admin/css/colors-fresh.css?ver=20090625' type='text/css' media='all' />
    <!--[if lte IE 7]>
    <link rel='stylesheet' id='ie-css'  href='http://localhost:8888/wordpress/wp-admin/css/ie.css?ver=20090630' type='text/css' media='all' />
    <![endif]-->
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils&amp;ver=d24248fe4b0cd62086633fd42ef1019b'></script>
    </head>
    <body class="wp-admin no-js  settings_page_adsenseorganizer">
    <script type="text/javascript">
    //<![CDATA[
    (function(){
    var c = document.body.className;
    c = c.replace(/no-js/, 'js');
    document.body.className = c;
    })();
    //]]>
    </script>
    
    <div id="wpwrap">
    <div id="wpcontent">
    <div id="wphead">
    
    <img id="header-logo" src="../wp-includes/images/blank.gif" alt="" width="32" height="32" /> <h1 id="site-heading" ><a href="http://localhost:8888/wordpress/" title="Visit Site"><span id="site-title">Adsense Tester</span> <em id="site-visit-button">Visit Site</em></a></h1>
    
    <div id="wphead-info">
    <div id="user_info">
    <p>Howdy, <a href="profile.php" title="Edit your profile">admin</a><span class="turbo-nag hidden"> | <a href="tools.php">Turbo</a></span> |
    
    <a href="http://localhost:8888/wordpress/wp-login.php?action=logout&amp;_wpnonce=180dc425cf" title="Log Out">Log Out</a></p>
    </div>
    
    <div id="favorite-actions"><div id="favorite-first"><a href="post-new.php">New Post</a></div><div id="favorite-toggle"><br /></div><div id="favorite-inside"><div class='favorite-action'><a href='edit.php?post_status=draft'>Drafts</a></div>
    <div class='favorite-action'><a href='page-new.php'>New Page</a></div>
    <div class='favorite-action'><a href='media-new.php'>Upload</a></div>
    <div class='favorite-action'><a href='edit-comments.php'>Comments</a></div>
    </div></div>
    </div>
    </div>
    
    <div id="wpbody">
    
    <ul id="adminmenu">
    
    
    	<li class="wp-first-item menu-top menu-top-first menu-top-last" id="menu-dashboard">
    	<div class='wp-menu-image'><a href='index.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='index.php' class="wp-first-item menu-top menu-top-first menu-top-last" tabindex="1">Dashboard</a></li>
    	<li class="wp-menu-separator"><a class="separator" href="?unfoldmenu=1"><br /></a></li>
    	<li class="wp-has-submenu open-if-no-js menu-top menu-top-first" id="menu-posts">
    	<div class='wp-menu-image'><a href='edit.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='edit.php' class="wp-has-submenu open-if-no-js menu-top menu-top-first" tabindex="1">Posts</a>
    
    	<div class='wp-submenu'><div class='wp-submenu-head'>Posts</div><ul><li class="wp-first-item"><a href='edit.php' class="wp-first-item" tabindex="1">Edit</a></li><li><a href='post-new.php' tabindex="1">Add New</a></li><li><a href='edit-tags.php?taxonomy=post_tag' tabindex="1">Post Tags</a></li><li><a href='categories.php' tabindex="1">Categories</a></li></ul></div></li>
    	<li class="wp-has-submenu menu-top" id="menu-media">
    	<div class='wp-menu-image'><a href='upload.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='upload.php' class="wp-has-submenu menu-top" tabindex="1">Media</a>
    	<div class='wp-submenu'><div class='wp-submenu-head'>Media</div><ul><li class="wp-first-item"><a href='upload.php' class="wp-first-item" tabindex="1">Library</a></li><li><a href='media-new.php' tabindex="1">Add New</a></li></ul></div></li>
    
    	<li class="wp-has-submenu menu-top" id="menu-links">
    	<div class='wp-menu-image'><a href='link-manager.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='link-manager.php' class="wp-has-submenu menu-top" tabindex="1">Links</a>
    	<div class='wp-submenu'><div class='wp-submenu-head'>Links</div><ul><li class="wp-first-item"><a href='link-manager.php' class="wp-first-item" tabindex="1">Edit</a></li><li><a href='link-add.php' tabindex="1">Add New</a></li><li><a href='edit-link-categories.php' tabindex="1">Link Categories</a></li></ul></div></li>
    	<li class="wp-has-submenu menu-top" id="menu-pages">
    	<div class='wp-menu-image'><a href='edit-pages.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='edit-pages.php' class="wp-has-submenu menu-top" tabindex="1">Pages</a>
    	<div class='wp-submenu'><div class='wp-submenu-head'>Pages</div><ul><li class="wp-first-item"><a href='edit-pages.php' class="wp-first-item" tabindex="1">Edit</a></li><li><a href='page-new.php' tabindex="1">Add New</a></li></ul></div></li>
    
    	<li class="menu-top menu-top-last" id="menu-comments">
    	<div class='wp-menu-image'><a href='edit-comments.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='edit-comments.php' class="menu-top menu-top-last" tabindex="1">Comments <span id='awaiting-mod' class='count-0'><span class='pending-count'>0</span></span></a></li>
    	<li class="wp-menu-separator"><a class="separator" href="?unfoldmenu=1"><br /></a></li>
    	<li class="wp-has-submenu menu-top menu-top-first" id="menu-appearance">
    	<div class='wp-menu-image'><a href='themes.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='themes.php' class="wp-has-submenu menu-top menu-top-first" tabindex="1">Appearance</a>
    	<div class='wp-submenu'><div class='wp-submenu-head'>Appearance</div><ul><li class="wp-first-item"><a href='themes.php' class="wp-first-item" tabindex="1">Themes</a></li><li><a href='widgets.php' tabindex="1">Widgets</a></li><li><a href='theme-editor.php' tabindex="1">Editor</a></li><li><a href='theme-install.php' tabindex="1">Add New Themes</a></li><li><a href='themes.php?page=functions.php' tabindex="1">Custom Header</a></li></ul></div></li>
    
    	<li class="wp-has-submenu menu-top" id="menu-plugins">
    	<div class='wp-menu-image'><a href='plugins.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='plugins.php' class="wp-has-submenu menu-top" tabindex="1">Plugins <span class='update-plugins count-0'><span class='plugin-count'>0</span></span></a>
    	<div class='wp-submenu'><div class='wp-submenu-head'>Plugins <span class='update-plugins count-0'><span class='plugin-count'>0</span></span></div><ul><li class="wp-first-item"><a href='plugins.php' class="wp-first-item" tabindex="1">Installed</a></li><li><a href='plugin-install.php' tabindex="1">Add New</a></li><li><a href='plugin-editor.php' tabindex="1">Editor</a></li></ul></div></li>
    	<li class="wp-has-submenu menu-top" id="menu-users">
    	<div class='wp-menu-image'><a href='users.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='users.php' class="wp-has-submenu menu-top" tabindex="1">Users</a>
    
    	<div class='wp-submenu'><div class='wp-submenu-head'>Users</div><ul><li class="wp-first-item"><a href='users.php' class="wp-first-item" tabindex="1">Authors &amp; Users</a></li><li><a href='user-new.php' tabindex="1">Add New</a></li><li><a href='profile.php' tabindex="1">Your Profile</a></li></ul></div></li>
    	<li class="wp-has-submenu menu-top" id="menu-tools">
    	<div class='wp-menu-image'><a href='tools.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='tools.php' class="wp-has-submenu menu-top" tabindex="1">Tools</a>
    	<div class='wp-submenu'><div class='wp-submenu-head'>Tools</div><ul><li class="wp-first-item"><a href='tools.php' class="wp-first-item" tabindex="1">Tools</a></li><li><a href='import.php' tabindex="1">Import</a></li><li><a href='export.php' tabindex="1">Export</a></li><li><a href='update-core.php' tabindex="1">Upgrade</a></li></ul></div></li>
    
    	<li class="wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-top-last" id="menu-settings">
    	<div class='wp-menu-image'><a href='options-general.php'><br /></a></div><div class="wp-menu-toggle"><br /></div><a href='options-general.php' class="wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-top-last" tabindex="1">Settings</a>
    	<div class='wp-submenu'><div class='wp-submenu-head'>Settings</div><ul><li class="wp-first-item"><a href='options-general.php' class="wp-first-item" tabindex="1">General</a></li><li><a href='options-writing.php' tabindex="1">Writing</a></li><li><a href='options-reading.php' tabindex="1">Reading</a></li><li><a href='options-discussion.php' tabindex="1">Discussion</a></li><li><a href='options-media.php' tabindex="1">Media</a></li><li><a href='options-privacy.php' tabindex="1">Privacy</a></li><li><a href='options-permalink.php' tabindex="1">Permalinks</a></li><li><a href='options-misc.php' tabindex="1">Miscellaneous</a></li><li class="current"><a href='options-general.php?page=adsenseorganizer' class="current" tabindex="1">Adsense Organizer</a></li></ul></div></li>
    
    	<li class="wp-menu-separator-last"><a class="separator" href="?unfoldmenu=1"><br /></a></li></ul>
    
    <div id="wpbody-content">
    <div id="screen-meta">
    	<div id="contextual-help-wrap" class="hidden">
    	<h5>Help</h5><div class="metabox-prefs"><a href="http://codex.wordpress.org/" target="_blank">Documentation</a><br /><a href="http://wordpress.org/support/" target="_blank">Support Forums</a></div>
    	</div>
    
    <div id="screen-meta-links">
    <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
    
    <a href="#contextual-help" id="contextual-help-link" class="show-settings">Help</a>
    </div>
    </div>
    </div>
    
    <div class="wrap">
    <h2>Adsense Organizer</h2><br>
    
    
    
    <script language="javascript">
      function toggleDiv(divid)
      {
    	if(document.getElementById(divid).style.display == 'block')
    	{
    	document.getElementById(divid).style.display = 'none';
    	}
    	
    	else
    	{	
    	document.getElementById(divid).style.display = 'block';
    	}
    } 
    </script>
    
    
    <hr><fieldset><legend>
    
    <a href="javascript:toggleDiv('introduction');" style="text-decoration : none">Introduction</a></legend><div id="introduction" style="display : none;"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Welcome to Adsense Organizer, the best way to control the Adsense ads for your blog.<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Use "Enter Adsense Code" to input your Adsense codes for each ad position.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Use "Set Ad Locations" to determine where your ads will be shown.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Use "Set Options" to control miscellaneous options not addressed in the other sections.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Use "Manage Ads" to edit or delete ads you have added to the blog.</div>
    
    </fieldset><hr><fieldset><legend>
    <a href="javascript:toggleDiv('enteradsensecode');" style="text-decoration : none">Enter Adsense Code</a></legend><div id="enteradsensecode" style="display : none;"><p><table><tr><td>
    
    <form method="post" action="options.php" name="entercode">
    
    <input type="hidden" id="_wpnonce" name="_wpnonce" value="2dea26e666" /><input type="hidden" name="_wp_http_referer" value="/wordpress/wp-admin/options-general.php?page=adsenseorganizer" /><input type="hidden" name="page_options" value="ao_tempadname,ao_tempadtype,ao_tempadcode" />
    <input type="hidden" name="action" value="update" />
    
    
    <table>
    <tr><td>Unique name:</td><td><input name="ao_tempadname"></td></tr>
    <tr><td>Type of Ad:</td><td><input type="radio" name="ao_tempadtype" value="ad" checked> Ad Unit<br>
    <input type="radio" name="ao_tempadtype" value="link"> Link Unit<br>
    <input type="radio" name="ao_tempadtype" value="search"> Search Bar</td></tr>
    
    <tr><td>Google Code:</td><td><textarea rows=5 cols=20 name="ao_tempadcode"></textarea></td></tr>
    <tr><td>Add code:</td><td><input type="submit" class="button-primary" value="Save Code!" /></td></tr>
    </table>
    
    
    </td><td>
    
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Here is where you can input the code for your adsense ads.<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- For each ad you wish to add to your site, you must input three things:<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- First, a name for the ad to help you distinguish it from other ads you enter.<br>
    
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Second, the kind of codes you are entering (ad unit, link unit, or search bar).<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Third, the code itself.  This can be for a normal text/image ad, a link unit, or a search bar.<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- To assign the ad a location, finish here and then go to the "Set Ad Location" section.<br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- You will be able to use this ad in multiple locations if you wish.<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Therefore, you may only need one ad if you do not plan to use Adsense Channels.
    
    </td></tr></table></form></div>
    
    </fieldset><hr><fieldset><legend>
    <a href="javascript:toggleDiv('setadlocations');" style="text-decoration : none">Set Ad Locations</a></legend><div id="setadlocations"><p>
    
    
    
    <script language="javascript">
    originaltotalrandoms = 1;
    
    function toggleTab(tab)
    {
    currenttab = tab;
    
    document.getElementById("tab" + currenttab).style.display = 'block';
    
    
    	for (round=1;round<=originaltotalrandoms+1;round++)
    	{
    		if (round != currenttab)
    		{
    		document.getElementById("tab" + round).style.display = 'none';
    		
    		}
    	}
    
    }
    </script>
    
    
    <form method="post" action="options.php" name="setadlocations2">
    <input type="hidden" id="_wpnonce" name="_wpnonce" value="2dea26e666" /><input type="hidden" name="_wp_http_referer" value="/wordpress/wp-admin/options-general.php?page=adsenseorganizer" /><input type="hidden" name="page_options" value="ao_totalrandoms,ao_staticul,ao_staticuc,ao_staticur,ao_staticml,ao_staticmc,ao_staticmr,ao_staticbl,ao_staticbc,ao_staticbr" />
    <input type="hidden" name="action" value="update" />
    <div id="tab1"><center><table width=100% height=400><tr><td align=center width=20%><center><table bgcolor=#cccccc border=2><tr height=40><td align=center width="%">Ad Set-up # 1 (Selected)</td></tr><tr height=40><td align=center width="%"><a href="javascript:toggleTab('2');" style="text-decoration : none">Ad Set-up #2 </a> (Create New)</td></tr></table></td><td><select name="steve" "size=4">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    
    <option>4</option>
    </select>
    </td></tr></table></div><div id="tab2" style="display : none;"><center><table width=100% height=400><tr><td align=center width=20%><center><table bgcolor=#cccccc border=2><tr height=40><td align=center width="%"><a href="javascript:toggleTab('1');" style="text-decoration : none">Ad Set-up #1 </a></td></tr><tr height=40><td align=center width="%">Ad Set-up # 2 (Selected) (Create New)</td></tr></table></td><td><select name="steve" "size=4">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    </select>
    </td></tr></table></div><center><input type="submit" class="button-primary" value="Save Code!" /></form></div>
    
    </fieldset><hr><fieldset><legend>
    <a href="javascript:toggleDiv('setoptions');" style="text-decoration : none">Set Options</a></legend><div id="setoptions" style="display : none;"><p>Something has gone wrong (setoptions.php is missing from the plugin folder).<br><br>Please re-install the plugin (your settings will remain intact).<br><br>
    	If the problem persists, please contact the plugin author.</div>
    
    </fieldset><hr><fieldset><legend>
    <a href="javascript:toggleDiv('manageads');" style="text-decoration : none">Manage Ads</a></legend><div id="manageads" style="display : none;"><p>Something has gone wrong (manageads.php is missing from the plugin folder).<br><br>Please re-install the plugin (your settings will remain intact).<br><br>
    	If the problem persists, please contact the plugin author.</div>
    
    </fieldset><hr>
    
    <div class="clear"></div></div><!-- wpbody-content -->
    <div class="clear"></div></div><!-- wpbody -->
    <div class="clear"></div></div><!-- wpcontent -->
    </div><!-- wpwrap -->
    
    <div id="footer">
    <p id="footer-left" class="alignleft"><span id="footer-thankyou">Thank you for creating with <a href="http://wordpress.org/">WordPress</a>.</span> | <a href="http://codex.wordpress.org/">Documentation</a> | <a href="http://wordpress.org/support/forum/4">Feedback</a></p>
    
    <p id="footer-upgrade" class="alignright">Version 2.8.2</p>
    <div class="clear"></div>
    </div>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var commonL10n = {
    	warnDelete: "You are about to delete the selected items.\n  \'Cancel\' to stop, \'OK\' to delete."
    };
    try{convertEntities(commonL10n);}catch(e){};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-admin/load-scripts.php?c=1&amp;load=hoverIntent,common,jquery-color&amp;ver=aea8e52be924140338dff88f69994950'></script>
    
    <script type="text/javascript">if(typeof wpOnload=='function')wpOnload();</script>
    </body>
    </html>
    Code (markup):
     
    Submerged, Jul 22, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I looked at the ChristSpeak page and couldn't see the select (was it temporary for testing somewhere?).

    usually a scrollbar on selects means the browser thinks you've stated a large size than available options. I see 4 options and you have size=4 so not sure how that could be it.

    That it's in a div shouldn't matter, but is there an overflow property set on #tab1 in the CSS somewhere? Trying to see if it's your CSS styles is a bit hard, because you're mixing inline styles and <center> tags and things all around. Tag soup's always harder to debug, esp if it's in something busy and bloated like a template (all templates are so, you can't help that).
     
    Stomme poes, Jul 23, 2009 IP
  7. Submerged

    Submerged Active Member

    Messages:
    132
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #7
    Sorry, Stomme, I should have been more clear in my last post. The issue is on my localhost wordpress installation, not on ChristSpeak :) The code actually works fine on the ChristSpeak blog. The CSS page isn't made by me, it is just part of the theme that I picked. But the #tab1 div is created by me in the php file, so it shouldn't have anything specifically for it in the CSS (unless CSS pages automatically update somehow?).
     
    Submerged, Jul 23, 2009 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Yes, I understand that; I thought you said there was a working version of this higher-than-size-1 select on that site, but I saw no selects at all (though I was only on the main page and then checked contact since those often have forms). So I wanted to see what you were doing on the working version while comparing to your broken version (mostly because I've never done a select drop-down with a size greater than one... the point of selects usually being that they can offer a lot of options while saving screen space).

    It is possible that the theme css has changed maybe, if it's something like Drupal etc where module and theme writers can update their code. It's also possible that your version of whatever software is the latest while the modules aren't. At least, that's how I understand it at Drupal, which I'm trying to learn...

    What might be much, much easier (I dunno, themes usually come with hundreds of little css sheets and that's my personal hell to deal with...) is to take what you have and start reducing first your HTML and then your CSS until you get a working select (or, you could start with a simple and working select and add on code until it breaks). Like finding out which food you're allergic to, this is one (rather brute force) method for finding bugs.

    I mean, for instance if you have strong suspicions about the div called tab1, remove it and see if the select suddenly works. I can't think of how a div could do that unless it had overflow: hidden on it and was hiding the dropdown or some such thing, but at least you can rule it out as being the primary problem.

    If you are using themes and modules from a CMS maybe check that they are all updated as much as possible as well. Or if there are any known laggers who conflict with each other.
     
    Stomme poes, Jul 24, 2009 IP
  9. Submerged

    Submerged Active Member

    Messages:
    132
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #9
    This is really odd . . . okay, here is an example using the code (simple select, no form or onChange) on my live blog:

    http://christspeak.com/test-page/

    As you can see, it works fine.

    The weird part is that I saved the HTML output ("Save page as" in Firefox) of my localhost page that was having the problem and opened that HTML file in a new window and the select worked just fine (though the rest of the page looked a bit odd). So the same HTML seems to be messed up when called from the localhost Wordpress but not when the same HTML is on its own. Which seems very odd to me, I'm lost as to why it would be different.

    I uploaded the saved HTML file (and accompanying files saved with, CSS and two JS) my domain, you can see them here: http://www.christspeak.com/wptest.html. At this point I don't even know where to begin to look for the problem -- my localhost, the WP installation, the specific theme, my own code?

    I should mention that I tried to strip it down to the minimum for all of the above. The test page on the actual christspeak blog is the simple <select> shown above. The code for the localhost is as follows (for those not familiar with WP code, it is basically just adding a new admin page and a new option page, the new option page being made up of the code in ao_optionpagecontent):
    <?
    add_action('admin_menu', 'ao_addoptionpage');
    
    function ao_addoptionpage() 
    {
      add_options_page('Adsense Organizer', 'Adsense Organizer', 8, 'adsenseorganizer', 'ao_optionpagecontent');
    }
    
    function ao_optionpagecontent() 
    {
    ?>
    <select name=test size=4>
    
    <option value=1>Option 1</option>
    <option value=2>Option 2</option>
    <option value=3>Option 3</option>
    <option value=4>Option 4</option>
    
    </select>
    <?
    }
    Code (markup):
     
    Submerged, Jul 24, 2009 IP
  10. Submerged

    Submerged Active Member

    Messages:
    132
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #10
    Okay, so I have figured out the problem . . . kind of. At least I know where it is. When I load up the option page (where the bug is) and look at the source code, I saw this in there:
    <link rel='stylesheet' href='http://localhost:8888/wordpress/wp-admin/load-styles.php?c=1&amp;dir=ltr&amp;load=global,wp-admin&amp;ver=ba4d987ec2b562bd22e5da70fe38318d' type='text/css' media='all' />
    Code (markup):
    I clicked it on a whim and saw the source code for that, which included:
    input,
    select {
    	line-height: 1em;
    }
    Code (markup):
    This seems to be the source of my problem. Now, the problem is that I don't know how to get rid of that line (or edit it?). I brought up the actual script pf load-styles.php and it confused me :). Could someone figure out where it is getting the line-height option? I think it is loading it from a different file, but I can't even figure out where that is from the code.

    load-styles.php:
    <?php
    
    /**
     * Disable error reporting
     *
     * Set this to error_reporting( E_ALL ) or error_reporting( E_ALL | E_STRICT ) for debugging
     */
    error_reporting(0);
    
    /** Set ABSPATH for execution */
    define( 'ABSPATH', dirname(dirname(__FILE__)) . '/' );
    define( 'WPINC', 'wp-includes' );
    
    /**
     * @ignore
     */
    function __() {}
    
    /**
     * @ignore
     */
    function _c() {}
    
    /**
     * @ignore
     */
    function _x() {}
    
    
    /**
     * @ignore
     */
    function add_filter() {}
    
    /**
     * @ignore
     */
    function esc_attr() {}
    
    /**
     * @ignore
     */
    function apply_filters() {}
    
    /**
     * @ignore
     */
    function get_option() {}
    
    /**
     * @ignore
     */
    function is_lighttpd_before_150() {}
    
    /**
     * @ignore
     */
    function add_action() {}
    
    /**
     * @ignore
     */
    function do_action_ref_array() {}
    
    /**
     * @ignore
     */
    function get_bloginfo() {}
    
    /**
     * @ignore
     */
    function is_admin() {return true;}
    
    /**
     * @ignore
     */
    function site_url() {}
    
    /**
     * @ignore
     */
    function admin_url() {}
    
    /**
     * @ignore
     */
    function wp_guess_url() {}
    
    function get_file($path) {
    
    	if ( function_exists('realpath') )
    		$path = realpath($path);
    
    	if ( ! $path || ! @is_file($path) )
    		return '';
    
    	return @file_get_contents($path);
    }
    
    require(ABSPATH . '/wp-includes/script-loader.php');
    require(ABSPATH . '/wp-includes/version.php');
    
    $load = preg_replace( '/[^a-z0-9,_-]+/i', '', $_GET['load'] );
    $load = explode(',', $load);
    
    if ( empty($load) )
    	exit;
    
    $compress = ( isset($_GET['c']) && $_GET['c'] );
    $force_gzip = ( $compress && 'gzip' == $_GET['c'] );
    $rtl = ( isset($_GET['dir']) && 'rtl' == $_GET['dir'] );
    $expires_offset = 31536000;
    $out = '';
    
    $wp_styles = new WP_Styles();
    wp_default_styles($wp_styles);
    
    foreach( $load as $handle ) {
    	if ( !array_key_exists($handle, $wp_styles->registered) )
    		continue;
    
    	$style = $wp_styles->registered[$handle];
    	$path = ABSPATH . $style->src;
    
    	$content = get_file($path) . "\n";
    
    	if ( $rtl && isset($style->extra['rtl']) && $style->extra['rtl'] ) {
    		$rtl_path = is_bool($style->extra['rtl']) ? str_replace( '.css', '-rtl.css', $path ) : ABSPATH . $style->extra['rtl'];
    		$content .= get_file($rtl_path) . "\n";
    	}
    
    	$out .= str_replace( '../images/', 'images/', $content );
    }
    
    header('Content-Type: text/css');
    header('Expires: ' . gmdate( "D, d M Y H:i:s", time() + $expires_offset ) . ' GMT');
    header("Cache-Control: public, max-age=$expires_offset");
    
    if ( $compress && ! ini_get('zlib.output_compression') && 'ob_gzhandler' != ini_get('output_handler') ) {
    	header('Vary: Accept-Encoding'); // Handle proxies
    	if ( false !== strpos( strtolower($_SERVER['HTTP_ACCEPT_ENCODING']), 'deflate') && function_exists('gzdeflate') && ! $force_gzip ) {
    		header('Content-Encoding: deflate');
    		$out = gzdeflate( $out, 3 );
    	} elseif ( false !== strpos( strtolower($_SERVER['HTTP_ACCEPT_ENCODING']), 'gzip') && function_exists('gzencode') ) {
    		header('Content-Encoding: gzip');
    		$out = gzencode( $out, 3 );
    	}
    }
    
    echo $out;
    exit;
    Code (markup):
    UPDATE: After a lot of squinting and guesswork, I tracked down the bit of code (found in wp-admin/global.css). However, deleting the line did not fix it. I double-checked the source, and it was gone, but no luck. So I'm back to guessing :(

    I've also attached two images. The first is the "normal" dropdown box using size=1 (works fine). The second is the buggy one at size=4; it has a scrollbar but is only 1 option high.
     

    Attached Files:

    • dd1.JPG
      dd1.JPG
      File size:
      1.8 KB
      Views:
      136
    • dd2.JPG
      dd2.JPG
      File size:
      1.6 KB
      Views:
      137
    Last edited: Jul 25, 2009
    Submerged, Jul 25, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    mm, you could throw an id on that select, and on whichever stylesheet is loaded last (last listed in the HTML <head>), do something like (as a test):

    #idoftheselect {
    height: somethinglarge;
    }

    and see if that overrides. If it does, then you should be able to permanently make that something more like

    #idoftheselect {
    min-height: ##em;
    }

    where you have a minimum height, set in em's so if someone's got a larger font-size set on their machine it still shows everything.

    I wouldn't think line-height would stop it, and of course removing that declaration from your global sheet might affect ALL your other inputs and selects, so better to override it in this case. There is line-height: normal but it works rather strangely (not the same cross-browser). But it could allow the line-height to be larger for that select if necessary (I don't think it can affect the height of the selects... they seem to appear in browsers not as inline but as inline-blocks, because you can give them heights and widths unlike real inlines).

    Sorry I can't read PHP. : (
     
    Stomme poes, Jul 27, 2009 IP