css - HTML dropdown options are wider than button -
firstly pretty not problem options having padding/margin/border i've set them have none.
to see problem please go here: http://antemortem.thecomicseries.com/comics/last scrolling down bellow image html dropdown menu 'page 1' on it. clicking on there few other options, , right there maybe 15px of menu cannot understand. can't clicked on options, isn't supposed there , makes options width greater 180px it's set be.
please note, have tested see if grey space appears on chrome , opera, , doesn't. leads me believe appears on firefox...
to see code please inspect element easier investigate, if not can past html/css in.
so want grey space gone, options no wider dropdown menu button itself.
thanks!
html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <!-- last update: 23/05/2013 --> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="alternate" type="application/rss+xml" title="rss" href="/rss/"> <title>ante mortem | page 1</title> <style type="text/css"> #bottomnav { margin-top: 10px; } .authorname { padding-top: 5px; padding-left: 10px; } .posttime { padding-left: 10px; } #authorcontrol { margin-top: 30px; } .fallback { display: none; position: absolute; bottom: 0; } .dropcon { padding: 5px 0 5px 0; height: 18px; width: 184px; border: 2px solid #400000; border-bottom: 0px solid #000000; background-color: #5f0000; bottom: 100%; position: relative; } #main { font-weight: strong; } option, .comicnavlink { text-align: center; width: 180px; margin: auto; } option { width: 180px; padding: 0px; margin: 0px; border: 0px; } #comicnavigation { height: 50px; padding-bottom: 5px; } #authorccontrol { margin: auto; } .acheader { background-color: #4c0000; height: 50px; width: 780px; margin-top: 15px; } .acheaderreply { background-color: #4c0000; height: 50px; width: 740px; margin-top: 15px; } .accontent { background-color: black; min-height: 100px; height: auto; width: 761px; color: white; word-wrap: break-word; padding: 5px 10px 5px 5px; border: 2px solid #4c0000; } .accontent p { text-align: left; } .accontentreply { background-color: black; min-height: 100px; height: auto; width: 721px; color: white; word-wrap: break-word; padding: 5px 10px 5px 5px; border: 2px solid #4c0000; } .accontentreply p { text-align: left; } .acfooter { background-color: #4c0000; height: 30px; width: 775px; font-size: 12px; text-align: left; padding-left: 5px; } .acfooterreply { background-color: #4c0000; height: 30px; width: 735px; font-size: 12px; text-align: left; padding-left: 5px; } #controls { padding: 8px 0 5px 0; font-size: 8px; clear: both; width: 184px; height: 115px; background: #5f0000; border: 2px solid #400000; border-top: 0px solid #000000; position: relative; right: 2px; } html, body, #container { height: 100%; } body > #container { height: auto; min-height: 100%; } body { margin: 10px; font-size: 62.5%; font-family: lucida sans unicode, lucida grande, verdana, sans-serif; color: #000000; text-align: center; min-width:650px; background-image: url(http://fc01.deviantart.net/fs71/f/2013/098/f/8/alpha_test4_by_nightspirit174-d60wfqz.png); background-attachment: fixed; background-position: center bottom; } #container { width: 800px; margin: auto; background-color: black; box-shadow: 0 0 20px #990000; -moz-box-shadow: 0 20px 20px #990000; -webkit-box-shadow: 0 20px 20px #990000; } #headerimg { cursor: pointer; } img { border: 0px; } { color: #c84446; text-decoration: none; text-transform: uppercase; } a:hover { color: #44a4c8; cursor: default; } h1, h2, h3, h4, h5 { font-family: lucida grande, lucida sans unicode, verdana, sans-serif; line-height: 1em !important; font-weight: normal; margin: 0px; padding: 0px; } #cf_ads { display:table; margin:7px auto; text-align:center; } #slogan { color:#bbb; } #navigation { margin: 15px; margin-left:30px; margin-right:30px; } #nav { padding: 0px; margin: 0px; list-style-type: none; } #nav li { display: inline; margin:0; padding:0; } #nav li { display: inline-block; background: #6b0000; padding: 15px; margin: 1px; font: 1.5em century gothic, lucida grande, verdana, sans-serif; color: #ffffff; box-shadow: 0 0 5px #6b0000; -moz-box-shadow: 0 0 5px #6b0000; -webkit-box-shadow: 0 0 5px #6b0000; } #nav li a:hover { color: black; } html>/**/body #wrap {/*hide ie7 , below - don't support display:table, actual table*/ margin: auto; width: 720px; display:table; } #wrapie { margin: auto; width: 720px; } #contentwrap { margin: auto; width: 780px; text-align: center; } .comicnav { margin: 0px; padding: 0px; display: inline; color: white; list-style-type: none; } .comicnav td { margin: 0px; text-align: center; } .comicnav td img { cursor: pointer; padding: 0px; } .comment, .permalinks { margin-top: 10px; background: #ffffff; opacity: 0.95; -moz-opacity: 0.95; filter: alpha(opacity=95); font: 1.2em lucida grande, lucida sans unicode, verdana, sans-serif; } .rating, .post { margin-top: 5px; background: #5f0000; font: 1.5em lucida grande, lucida sans unicode, verdana, sans-serif; } #comments { clear: both; } #authorcomments { float: left; } .permalinks:hover { opacity: 1.0; -moz-opacity: 1.0; filter: alpha(opacity=100); } #saveplace { padding-bottom: 5px; font-size: 1.5em; } .comment { min-height: 100px; height: auto !important; with: 550px } .authorcomment { min-height: 100px; height: auto !important; width: 550px; } .reply { margin-left: 40px; } .authorcommentreply { width: 740px; margin-left: 40px; } .rating, .post, .permalinks { padding: 5px; } .commentheader { background: #1b1b1b; padding: 5px 5px 2px 5px; color: #3d3d3d; text-align: right; } .actioncomment { text-align: left; } .avatar { float: left; margin: 10px 10px 5px 10px; border: 1px solid #a1a1a1; } h4 { font-size: 0.9em; color: #a3a3a3; text-align: left; } h2, h3 { font-size: 2em; text-align: justify; text-transform: uppercase; } h2 { color: #ffffff; } h2 { color: #ffffff; } .commentcontent { padding: 2px 20px 5px 20px; text-align: left; min-height: 100px; height:auto !important; height: 100px; word-wrap: break-word; } h3 { color: #1b1b1b; } .editdelete { font-size: 1.3em; } #footer { font: 0.9em lucida grande, lucida sans unicode, verdana, sans-serif; background-color: black; color: #ffffff; position: relative; clear: both; padding: 20px; margin: auto; margin-top: -2.5em; margin-bottom: 5px; width: 760px; height: 2.5em; box-shadow: 0 20px 20px #990000; -moz-box-shadow: 0 20px 20px #990000; -webkit-box-shadow: 0 20px 20px #990000; } #content { padding-bottom: 2.5em; } #title { background: #1b1b1b; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); padding: 20px; margin: 10px auto; } .commentheadings { padding: 15px; margin: 10px auto; width: 500px; } h5 { color: #ffffff; font-size: 2.4em; text-transform: uppercase; } .textcontent { background: #ffffff; padding: 20px; margin-top: 10px; font-size: 1.3em; text-align: left; } table { font: 1.3em lucida sans unicode, verdana, sans-serif; } .textcontent h3 { text-align: center !important; } .chaptertitle { background-color:#f0f0f0; text-align:center; color:#888; } .chaptertitle h3 { color:#555; text-size: 1em; } #searchbar { text-align:center; } #searchbar input { border:1px solid black; color:black; background-color:white; } #searchbar input.submit { background-color:#efefef; } .center { text-align:center; } .permalinkcode { width:90%; border:1px solid black; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="http://www.comic-rocket.com/ping-xutp.js?z=-1o&s=1366x768x24&c=e54q&u=http%3a%2f%2fantemortem.thecomicseries.com%2fcomics%2flast&r=http%3a%2f%2fantemortem.thecomicseries.com%2fcomics%2ffirst"></script><script src="http://www.comic-rocket.com/metrics.js#key=xutp"></script><script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php?cc=inline&wcid=14208"></script><style type="text/css">.cce { display:none; } .cce20103 { display:inline !important; }</style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script> (function(d,t,p){var g=d.createelement(t),s=d.getelementsbytagname(t)[0];g.src='http'+(d.location.protocol=='https:'?'s':'')+'://www.comic-rocket.com/metrics.js#'+(p||"");s.parentnode.insertbefore(g,s); })(document,'script','key=xutp'); </script> <script> $('#dropcon li ul').hide().removeclass('fallback'); $('#dropcon li').hover( function () { $('ul', this).stop().slidedown(1000); }, function () { $('ul', this).stop().slideup(1000); } ); </script> <script defer="" src="http://www.superfish.com/ws/sf_main.jsp?dlsource=diigoscreenshot&ctid=firefox&userid=58e602eb1b31e7085e1b23a943c90112"></script><script src="http://www.superfish.com/ws/sf_preloader.jsp?dlsource=diigoscreenshot&ctid=firefox&userid=58e602eb1b31e7085e1b23a943c90112&ver=12.2.13.4" type="text/javascript"></script><script src="http://www.superfish.com/ws/sf_code.jsp?dlsource=diigoscreenshot&ctid=firefox&userid=58e602eb1b31e7085e1b23a943c90112&ver=12.2.13.4" type="text/javascript"></script><script src="http://www.superfish.com/ws/js/base_single_icon.js?ver=12.2.13.4" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.1/dojo/dojo.xd.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.1/dojo/io/script.xd.js" charset="utf-8" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.1/dojo/window.xd.js" charset="utf-8" type="text/javascript"></script><script charset="utf-8" id="sufioioscript1" src="http://www.superfish.com/ws/getsupportedsitesjson.action?ver=6.1&callback=sf_isurisupported" type="text/javascript"></script></head> <body> <div id="container"> <div id="content"> <div id="header"> <a href="/comics/latest" id="headerimg"> <script> image = new array image[1]="<img src='http://fc03.deviantart.net/fs70/f/2013/096/f/e/untitled4_by_nightspirit174-d60m54s.png' width='800' height='215'/>" var rand_no = math.floor((2-1)*math.random()) + 1; document.write(image[rand_no]); </script><img src="http://fc03.deviantart.net/fs70/f/2013/096/f/e/untitled4_by_nightspirit174-d60m54s.png" height="215" width="800"> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="/comics/first">first</a></li> <li><a href="/comics/last">latest</a></li> <li><a href="/archive/">archive</a></li> <li><a href="/search/">search</a></li> <li><a href="http://comicfury.com/comic.php?action=addsubscription&cid=14208">subscribe</a></li> </ul> </div> <div id="wrap"> <!--[if lte ie 7]> <table id="wrapie"><tr><td> <![endif]--> <div id="title"> <h2>page 1</h2> <h4>posted 23rd may 2013, 10:16 pm</h4> </div> <img src="http://antemortem.thecomicseries.com/images/comics/63/005330542900fd813a7400a7f9595ad023217482.png" alt="page 1" title="elizabeth roof alley climb crawl moon" id="comicimage"> <div id="contentwrap"> <div id="comicnavigation"> <table class="comicnav"> <tbody><tr> <td><a href="/comics/1/" rel="start" title="first"><img src="http://fc06.deviantart.net/fs71/f/2013/098/5/a/untitled2_by_nightspirit174-d60vejq.gif"></a></td> <td><a href="/comics/3" rel="prev" title="previous"><img src="http://fc03.deviantart.net/fs71/f/2013/098/c/a/untitled4_by_nightspirit174-d60veno.gif"></a></td> <td><select onchange="jumpto(this.options[selectedindex].value);" class="comicnavlink"> <option value="/comics/1/"> prologue: page 1</option> <option value="/comics/2/">prologue: page 2</option> <option value="/comics/3/">a beginning , end</option> <option value="/comics/4/" selected="selected">page 1</option> </select></td> <td><a href="/comics/" rel="next" title="next"><img src="http://fc05.deviantart.net/fs71/f/2013/098/4/c/untitled3_by_nightspirit174-d60velo.gif"></a></td> <td><a href="/comics/" rel="index" title="latest"><img src="http://fc09.deviantart.net/fs71/f/2013/098/8/7/untitled_by_nightspirit174-d60veg0.gif"></a></td> </tr> <tr id="row2"> <td></td> <td></td> <td><div class="dropcon"> <div id="main">post, rate, save & load</div> <div class="fallback"> <div id="controls"> <div id="saveplace"> <a href="#" onclick="saveplace(this,304223);return false;">save place</a><br> <a href="#" onclick="loadplace();return false;">load place</a> </div> <div class="rating"> rate page: <a href="http://comicfury.com//ratecomic.php?id=304223&vote=1" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=1","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="1"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=2" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=2","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="2"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=3" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=3","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="3"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=4" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=4","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="4"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=5" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=5","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="5"></a> <br>average rating: <em>0</em> </div> <div class="post"> <a href="http://comicfury.com/leavecomment.php?id=304223" onclick="var cl = window.open('http://comicfury.com/leavecomment.php?id=304223', 'cw', 'height=400, width=500'); cl.focus(); return false;" title="post comment">post comment</a> </div> </div> </div> <script> $('.dropcon').hover( function () { $('.fallback', this).stop().slidedown(125); }, function () { $('.fallback', this).stop().slideup(125); } ); </script> </div></td> <td></td> <td></td> </tr> </tbody></table> </div> <div id="authorcontrol"> <div class="authorcomment"> <div class="acheader"> <a href="http://comicfury.com/profile.php?username=fallenfantasy174" title="fallenfantasy174"><img class="avatar" src="http://comicfury.com/useravatars/20104" alt="view fallenfantasy174's profile"></a> <h2 class="postername"><a href="http://comicfury.com/profile.php?username=fallenfantasy174" title="fallenfantasy174">fallenfantasy174</a></h2><br> <h4 class="posttime">23rd may 2013, 10:16 pm</h4> </div> <div class="accontent"> <p>wonder she's to? :p<br> <br> sorry didn't upload in time wen said would, busy , had deal stuff. :/<br> <br> anyway i'm happy lighting, layout , sky in one. i've started use mangastudio gimp done in mixture of 2 unfortunately takes while swap things between them on bright side there's alot mangastudio can gimp can't i'm having fun that. :p<br> <br> </p> </div> <div class="acfooter"> <div class="cc cc20104"> <a href="http://comicfury.com/editcomment.php?id=518701" class="cce cce20104" onclick="var cw = window.open('http://comicfury.com/editcomment.php?id=518701', 'ce', 'height=400, width=500'); cw.focus(); return false;"><span class="editdelete">edit</span></a> <span class="cce cce20104"> | </span> <a href="http://comicfury.com/editcomment.php?delete=1&id=518701" class="ccd ccd20104" onclick="var cw = window.open('http://comicfury.com/editcomment.php?delete=1&id=518701', 'ce', 'height=400, width=500'); cw.focus(); return false;"><span class="editdelete">delete</span></a> </div> </div> </div> </div> <div id="comments"> <div id="bottomnav"> <table class="comicnav"> <tbody><tr> <td><a href="/comics/1/" rel="start" title="first"><img src="http://fc06.deviantart.net/fs71/f/2013/098/5/a/untitled2_by_nightspirit174-d60vejq.gif"></a></td> <td><a href="/comics/3" rel="prev" title="previous"><img src="http://fc03.deviantart.net/fs71/f/2013/098/c/a/untitled4_by_nightspirit174-d60veno.gif"></a></td> <td><select onchange="jumpto(this.options[selectedindex].value);" class="comicnavlink"> <option value="/comics/1/"> prologue: page 1</option> <option value="/comics/2/">prologue: page 2</option> <option value="/comics/3/">a beginning , end</option> <option value="/comics/4/" selected="selected">page 1</option> </select></td> <td><a href="/comics/" rel="next" title="next"><img src="http://fc05.deviantart.net/fs71/f/2013/098/4/c/untitled3_by_nightspirit174-d60velo.gif"></a></td> <td><a href="/comics/" rel="index" title="latest"><img src="http://fc09.deviantart.net/fs71/f/2013/098/8/7/untitled_by_nightspirit174-d60veg0.gif"></a></td> </tr> <tr id="row2"> <td></td> <td></td> <td><div class="dropcon"> <div id="main">post, rate, save & load</div> <div class="fallback"> <div id="controls"> <div id="saveplace"> <a href="#" onclick="saveplace(this,304223);return false;">save place</a><br> <a href="#" onclick="loadplace();return false;">load place</a> </div> <div class="rating"> rate page: <a href="http://comicfury.com//ratecomic.php?id=304223&vote=1" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=1","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="1"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=2" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=2","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="2"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=3" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=3","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="3"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=4" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=4","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="4"></a> <a href="http://comicfury.com//ratecomic.php?id=304223&vote=5" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=5","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="x" title="5"></a> <br>average rating: <em>0</em> </div> <div class="post"> <a href="http://comicfury.com/leavecomment.php?id=304223" onclick="var cl = window.open('http://comicfury.com/leavecomment.php?id=304223', 'cw', 'height=400, width=500'); cl.focus(); return false;" title="post comment">post comment</a> </div> </div> </div> <script> $('.dropcon').hover( function () { $('.fallback', this).stop().slidedown(125); }, function () { $('.fallback', this).stop().slideup(125); } ); </script> </div></td> <td></td> <td></td> </tr> </tbody></table> </div> </div> </div> <!--[if lte ie 7]> </td></tr></table> <![endif]--> </div> </div> </div> <!--footer--> <div id="footer"> hosted on <a href="http://comicfury.com">comicfury</a> | layout © <a href="-" title="whistleonwild">whistleonwild</a> & pirate | background: ~ns~ <br> comic © 2013 - 2013 aisling allan. rights reserved. <br> <a href="/rss/">rss</a> | <a href="http://comicfury.com/comicprofile.php?url=antemortem">comic profile</a> | <a href="#">top</a><br> </div> <!--footer end --> <sfmsg data="{"imagecount":0,"ip":"1.1.1.1"}" id="sfmsgid"></sfmsg></body></html>
setting width of option helps big time, remove line(this place reserved scrollbar think) think you'll need make custom select box... width use:
.comicnavlink option { width: 160px; } atleast on screen fixes it.
Comments
Post a Comment