|
CSS - Css And Drop Down Boxes
Hello:
I'm trying to place two drop down boxes at the right of my page. When I view the pages in Firefox and Internet Explorer, they are so far off. You can view the page yourself by visiting: http://www.informedmortgage/100-financing.html I've tried changing widths, margins, etc and am having no luck. I can use some help. I hope someone can help me out. Thank you. Back to top Similar TutorialsHey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
ul#css3menu ul>li{
margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:left;}
ul#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu ul span{
background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#css3menu li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM Hello all, I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site Hallo, I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/ but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute. Does some know a good source where I find more information or documented examples ? Finally I can fix my problems, but it take so much time of testing... Thnaks Hi I am creating a new site for a friend in Wordpress ilovelifebecause.com I can usually muddle through in css to make changes, but i'm stumped at the moment. What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help? many thanks in advance Paul hi, Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc. Here is my code so far - layout.css - (one that gets included on each page) Code: @import "style.css";
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
#shoutbox {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner, #footer {
background:#fff;
height:40px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#footer {
background:#fff;
height:40px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#banner h1 {
font-size:16px;
padding:10px 10px 0px 10px;
margin:0px;
}
#shoutbox, #rightcontent p {
font-size:10px
}
style.css - text formatting etc. Code: body {
font: 12px/1.2 Tahoma;
background:#ddd;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
color:#c00;
}
pre {
font-size:11px;
color:blue;
}
ol {
margin-right:40px;
}
li {
margin-bottom:10px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger. here is an image of what i get - and this is what i am aiming to acheive - as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/ i would be greatful for any help you guys can provide me thanks, dynamyt My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly). Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so. My Html is this: <div id="newsboxleft"> <div id="newsboxright"></div></div> My CSS is this: #newsboxleft { margin: 10px auto; position: relative; top: 0px; left: -187px; width: 350px; height: 142px; background: url(../images/newsboxleft.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } #newsboxright { margin: 10px auto; position: relative; top: 0px; left: 373px; width: 350px; height: 142px; background: url(../images/newsboxright.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } I hope someone can help. Thanks. Hello, I created a site with floating frames and it looks good in IE6 and FF/Mozilla. But I have one problem: I use in my dynamic layout an ID more then once (thats not OK according w3 validation) I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages The skyscraper: http://www.all4yourwebsite.com/ and the result/search page: http://www.all4yourwebsite.com/search.php I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea? Hi guys, I am trying to achieve the following: Box 1 | ------ Box 2 | ** With a 3rd box to the right of box 1&2 I have got this far but cant work out how to do 'box2' Code: <div id="box2"> box 2 </div> <div id="box3"> box 3 </div> Code:
#box2 {
float: left;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box2 {
width: 100px;
/* ie5win fudge ends */
}
#box3 {
float: right;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box3 {
width: 100px;
/* ie5win fudge ends */
}
Can anyone possibly help? I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label. I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>. Code:
<div id=secondline>
<span id=ed>
<b>Event Definition</b>:<br>
<textarea name=inject cols=45 rows=6></textarea>
</span>
<span id=after>
<b>After</b><br>
<select name=next size=8 multiple>
<option value=0>0
...
<option value=100>100
</select>
</span>
</div>
but, alas, it doesn't work like that. How can I get Code: <tr> <td>label<br>form_control</td> <td>label<br>form_control</td> </tr> behavior without using tables? Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using: Code:
.cssnavend {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
display: block;
width: 209px;
height: 9px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(images/but-over.jpg);
background-repeat: no-repeat;
display: block;
width: 209px;
height: 31px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 11px;
width: 209px;
height: 31px;
display: block;
float: left;
margin: 0;
padding: 0;
color: #096CCE;
text-decoration: none;
}
.cssnav img {
width: 100%;
height: 100%;
border: 0;
}
.cssnav a:hover{
color: #000;
}
* html a:hover {
visibility:visible
}
.cssnav a:hover img{
visibility:hidden
}
.cssnav span {
position:absolute;
left:7px;
top:7px;
margin:0;
cursor: pointer;
}
#box {
margin-top: 10px;
padding: 0;
width: 209px;
display: block;
}
#boxtop {
width: 209px;
height: 11px;
}
#boxcontent {
width: 209px;
background: #DFE5EB;
}
#boxbottom {
width: 209px;
height: 11px;
}
#boxtext {
width: 209px;
background: #DFE5EB;
padding: 2px;
}
The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box. Code: <div class="cssnavend"><img src="images/but-top.jpg"></div> <div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div> <div class="cssnavend"><img src="images/but-bot.jpg"></div> <br><br> <div class="box"> <div class="boxtop"><img src=images/but-top.jpg></div> <div content="boxcontent"> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div> </div> <div class="boxbottom"><img src=images/but-bot.jpg></div> </div> <br><br> <div class="box"> <div class="boxtop"><img src=images/box-top.jpg></div> <div class="boxcontent"> <div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div> </div> <div class="boxbottom"><img src=images/box-bot.jpg></div> </div> Thank you all who help. Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy! this is my html:<body> <div id="container"> <div class="box"> <h1>Silver City Food Co-op</h1> <p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div> <div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div> <div class="box2"><div class="box3"><p2>Food News</p2></div></div> </div> </body> </html> this is my CSS body{background-color: #69916D} h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px} p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px} p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px} div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501} div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2} div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1} div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px} body { text-align: center; } #container {margin: 0 auto; width: 750px; text-align: left } Thanks for the help!! Hi I have these boxes which displays correctly in IE but when I view it in FF, the bottom grey line is gone Click Here Can someone someone give pointers as to whats happening San Hi, I'm still trying to learn CSS. Using CSS instead of tables really increases the versatility of the page, but, don't the graphics suffer? I'm trying to make a 3column layout which resizes according to the resolution. I've made it, but IMO it would look more appealing if I could make the corners curved as in... the menu box corners and the content space corners. Is there anyway to do this? Hey guys, This seems like a really simple thing to accomplish, but I'm just having trouble locking on to what exactly to put in the code. Basically, I want to have two rows of four horizontal boxes, with the two rows of boxes and the contents of each box centered. How do I go about doing this? Should I use <span> for each box and then just use absolute positioning? Or should I put them in a container <div> or something? If anybody has any code samples, that would be a big help. I just want it to end up looking like this: [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] ...with all the boxes centered on the page. Thanks for the help! - Luke I know, this sounds like an AJAX question, but I don't think thats the solution. I have created a layout: http://www.cabinincanada.com/script/ The problem is, that I want to be able to click on the About us button, and have it load into the content box where the posts are. I could just create a second page, copying the HTML and making the changes, but isn't this defeating the purpose of CSS? I would then have to go through and update all my links on both pages if I made changes. How do I load content into a box from an external web-page? i have two css boxes on the company lan, and for one person the two boxes wont appear? is this a problem with internet explorer? I'm pretty new to CSS so bear with me if this is a silly question. I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right. The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly. What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat? the code below draws a nice hairline textbox <input type='text' name='name' style="border:1px solid black; font-size: 10px; font-family: arial"> the colde below draws a nice hairline texarea <textarea name='msg' rows='10' cols='40' style="border:1px solid black; font-size: 12px; font-family: arial"> but the code below doesn't change anything <select name='sel' style="border:1px solid black; font-size: 10px; font-family: arial"> <option value='1'>first</option> <option vakue='2'>second</option> </select> Is there a way to remove this ugly shade from a selection menu as it exists for textboxes and textareas? Thanks for your help! |
|||||||