|
CSS - Ie Css Width=auto Problem?
Hi All,
I have CSS-sheet= .thumbs { border: 2px solid #524b2f; position: static; height: 80px; width: auto; } body { background-color: #f5f0ec; font-family: Verdana, Arial, Helvetica, sans-serif; scrollbar-face-color : #f5f0ec; scrollbar-highlight-color : #aca899; scrollbar-3dlight-color : #f5f0ec; scrollbar-shadow-color : #aca899; scrollbar-darkshadow-color :#f5f0ec; scrollbar-track-color : #f5f0ec; scrollbar-arrow-color : #524b2f; } The thumbs part resizes some pictures to a fixed height of =80px and calculates the width so everyting is resized correctly. But IE6 gives problems with the width=auto , some times it's sets the widt correctly other times it doesn't. In other brouwsers its fine. Any suggestions on fixing this in IE6? here's the page link : http://www.sleuyter.be/04/lay04-1.htm thx, ROY Similar Tutorialshello everyone, i am using css based menu . requirement is that, menu should adjust its width automatically based on the text length. Here is my css : = css Code: Original - css Code li ul li { background: #000; color: #fff; padding-top: 4px; border-bottom: 1px solid #fff; letter-spacing:1px; text-transform: capitalize; text-shadow: 2px 2px 2px #22222; width: 250px; margin:0px auto; height: 18px; font-size: 11px; font-weight: normal; text-align:left; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }
you just see the attachment, you would realise that , the text is cropping & not displayed. Also , can any one suggest , what can I do to make this CSS to cause make it attractive.? Afternoon Folks! Have a seemingly simple problem here but I can't seem to figure it out. I have a Horizontal drop-down CSS menu. It's working really well in FF but our fav friend IE is reading it differently. I'm using a list for my nav, with an auto width and 15px padding left/right. But in IE it registers my width as 100% so my horizontal menu turns into a vertical menu. edit:: using IE6 as my base test simply because IE7 isn't an "Approved Software" for work yet.. haha! I'm about to head out to lunch in a few and wanted to see if some CSS wiz's could slap me and help me find the best solution for my needs. I'm sure it's simple and I just keep scimmin right over it. So I uploaded what I have for it. It can be seen here This is the style which defines my width: css Code: Original - css Code #pmenu a, #pmenu a:visited { display:block; padding: 0 15px; width: auto; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; border-right: 1px dotted #fff; }
#pmenu a, #pmenu a:visited {
Of course, any and all help is appreciated! TYTY! TIA! Lates! Currently on my site I have articles with images, and the images have a quote underthem... unforutunatly, i have to manually set the width of these boxes to the width of the image that accompanies them.... here is a sample... CSS: Code:
.imageinsert {
margin:5px;
}
#image01 {width:225px}
.imagequote {
color:#FFF;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
}
XHTML: Code: <div class="imageinsert" id="image01"> <img src="/pic/feud093.jpg" alt="" /> <div class="imagequote">In yet another unfair battle, Maki must defend herself against Guy and Guile!</div> </div> I would love to have just one code for the imageinsert tag that would just autoresize based on how wide the image was. It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows: html4strict Code: Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 100%; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>
One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content. IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so: html4strict Code: Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 200px; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>
Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths. Hi to all, and thanks a million in advance for help. I have developed a simple online cms and everything is setup correctly but i am stuck at one place. I am unable to make width to 100% when b div is empty i mean a div = 50% width, b div = 50% width, how set it up that when a div is empty then b div goes to 100%width and when b div is empty then a div is 100% width. i hope got my question. because currently i have set in this way. wrapper div = 980px width, a div = 50% width, b div = 50% width, wrapper div end so when a div is empty then b div is still present and that area is empty it destroy the whole look. thanks arsslan I'm designing a page he (URL address blocked: See forum rules) I'm confused on how to make the top bar image span the width of each side and still be in synch with the center background image. I've done this with tables on the old version of the site (here ), but is it possible with CSS? Here's the code for the bars currently: .BGLEFTTOP{ position:absolute; left:0%; top:0px; height:88px; width:50%; margin-left:-456; background:url((URL address blocked: See forum rules)) repeat-x; background-position: right top; z-index:1;} .BGRIGHTTOP{ position:absolute; right:0%; top:0px; height:88px; width:50%; background:url((URL address blocked: See forum rules)) repeat-x; background-position: left top; z-index:1;} I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections. I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though. I can't explain much better than that, so without further ado: CSS: Code: .columns-float{
float : left;
width : 80%;
}
.column-one
{
width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
inquiring about. The above problem assumes this attribute
is set to "auto". */
float : right;
}
.column-two
{
width : 25%;
float : left;
}
.column-three{
width : 20%;
float : right;
}
.box-footer{
clear : both;
}
.column-one-content{
margin-left: 1px;
margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
p\osition: relative;
}
(Above was borrowed from here, albeit with modifications.) HTML: Code: ... <div class="columns-float"> <div class="column-one"> <div class="column-one-content"> <h2>column 1</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="column-two"> <div class="column-two-content"> <h2>column 2</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> </div><!-- close boxbody --> <div class="column-three"> <div class="column-three-content"> <h2>column 3</h2> <p>column filler</p> <p>column filler</p> <p>column filler</p> <p><a href="#" title="fake link for testing">test link</a></p> </div> </div> <div class="box-clear"> </div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it --> <div class="box-footer">Footer </div> Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me. Any help would be appreciated, and I thank you very much for your time. This is driving me batty. I'm working on a site layout using CSS. I want the content body and the top menu to expand the width of the browser. For some reason, in Safari, the content body works, but the top menu does not. Any suggestions? HTML: <div id="mainmenu"> <div id="mainmenutext">Menu will come here.</div> <div id="mainmenuspace"> </div> </div> CSS: #mainmenu { height: 27px; width: auto; border-top-width: 3px; border-top-style: solid; border-top-color: #000000; background-color: #FDDAE4; clear:both; position: absolute; left: 0px; top: 150px; } #mainmenutext { margin-left: 4px; color: #000000; height: auto; width: auto; } #mainmenuspace { float: right; height: auto; width: auto; } www.mrossana.com/siteidea/ www.mrossana.com/siteidea/style.css Thanks! Hi i am created a div container for my content and i want it so that it goes as big as whatever content i have but it doesnt seem to work as in ie the text goes to the bottom but doesnt display the end of my box and in firefox it only goes to a certain point which is my advert container then goes under it and carries on down the page so is there anyway i can get this property to work properly any help would be much appriciated as i say i have already tried height:auto; but no luck I wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me. (Problem is only in good browsers mozila/firebird) Here it is with the height of #main @ auto (attached) Here it is with the height of #main @ 600px (attached) Here is the HTML code: Code: <!-- Code --> <!-- Document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ben Gunn</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="main"> <img src="images/default_header.gif" id="header" height="120" width="749"/> <div id="content"> <div class="left"> <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">Music</a></li> <li><a href="#">Media</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="right"> </div> </div> </div> <br /><br /> </body> </html> And here is the code for the CSS: Code:
body {
margin: 0;
padding: 0;
background-color: #666666;
}
#header{
margin-left: 2px;
}
#main {
position: relative;
width: 756px;
height: 600px;
left: 50%;
margin-left: -355px;
margin-top: 20px;
background-image:url("images/background-bezel.gif");
background-repeat: repeat-y;
padding: 0px;
padding-bottom: 20px;
/*border: black 1px solid;*/
}
#content{
padding: 10px;
}
.left{
float: left;
width: 30%;
}
.right{
float: right;
width: 60%;
}
#nav{
list-style: none;
margin: 0;
padding: 0;
border: none;
padding-left: 10px;
font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: lighter;
}
#nav li {
background-color: #8B0000;
border-bottom: 1px solid #CCCCCC;
margin: 0;
padding: 1px 0 2px 0;
}
#nav li a {
display: block;
text-decoration: none;
width: 100%;
color: white;
padding-left: 5px;
}
html>body #nav li a {
width: auto;
}
#nav li a:hover {
background-color: #191970;
color: #fff;
}
Please notify me of the moronic mistakes I am making... thanks. Hey All, I'm currently testing out an idea for using Facebook Comments within a clients site. The space given to input the is very limited so I have implemented an auto scroll using Mootools. Everything seems OK but when you go to the page the scroll bar is not present, so you are unable to scroll down to see the comments towards the bottom and click the page numbers. The only way in which I can make the scroll bar show is if I right click and click Inspect Element both on Firefox and Chrome (it works perfectly!!!). I would appreciate it greatly if someone could have a look and let me know what I am missing and where I have gone wrong. The link to the page is http://www.theblitzparty.com/communityspirit/comments Thanks http://www.turboconceptsllc.com/main.php in IE 6. how do i get the top banner stretch to span across the entire width of the browser? i think its stopping at the scroll bar, from what ive read.. how is this fixed? Code:
.main_table_top_banner
{
background-image:url('');
background-repeat: no-repeat;
background-color: #3A3A3E;
width: 100%;
height: 50px;
position:absolute;
left:0px;
top:0px;
overflow: none;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px solid;
z-index:1;
}
me again, i fixed my last problem just to run into another i messed a little with my code, so that i have 2 elements on the page 'fixed' (in FF and IE) and the main body part is scrollable. the complete site is here i cannot seem to set a minimum width for the browser window. try to resize the window and you will see, that the main bodywindow will maintain at least 500px width in Firefox (not in IE < thats prob no.1) -- but also does the main body window slip underneath the navigation to the left. i tried to change the z-value, but even if i give them both the same z-value it slips underneath it. it would be great, if someone could help me with this problem, i know i have to correct it somewhere in the css, but cannot find it EDIT solved problem.... okay, so i just positioned (absolute) the bodybox element a fix amount away from the left border of the screen -- before it was 10% away from the right border of the screen .... it doesn't seem that liquid anymore, but i can live with it .... now i just need to convince IE to maintain a minimum width .... which topic has been discussed before EDIT2 i added the line Code: width: expression(document.body.clientWidth < 781 ? "780px" : "100%" ); to my fixed4ie.css file .... this messes on my old IBM ('95) around a little and i am not sure if you can see the graphic delay on newer computers. this is the only thing that worked for me so far .... interesting enough there are no more scrollbars, once i go under that certain width .... if - by now - someone has an idea how to fix this, i would appreciate other solutions to this problem Hi all - ive discovered a css problem when using 100% width areas on a website. take the following site for example.. offmymakeupbox.com if you open a browser that is not maximized there is a scrollbar that allows you to scroll to the right, but if you scroll to the right you can see that the footer has been cut off. ie. it is the width of the resized browser and not 100% width of the actual template. is there a way to fix this? thanks hi, wonder if someone can help me. I'm trying to create a css layout for a site, which has a header then two vertical columns (pretty standard). i want the first column to be a set size and the second content column to be variable to use up the rest of the page space. i can get the first column and header to work fine but not the second content column. any help would be good. here my code: Code: #header {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #header {
height: 70px; /* ie5win fudge ends */
}
#menu_v {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #menu_v {
width: 120px; /* ie5win fudge ends */
}
#content {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px 20px 20px 190px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
}
How do I make "content" <div class="content"> to go all the way to the right side of the "profile"? Code:
<style type="text/css">
#container { width: 800px;
background-color:#666;
padding: 20px;
}
#profiles_container {
background-color:#33CC66;
}
#profiles_container .profile { background-color:#CCFFFF;
margin: 20px 0px 20px 0px;
padding: 10px;
}
#profiles_container .profile .foto { background-color:#CCCC33;
float: left;
width: 200px;
padding: 10px;
}
#profiles_container .profile .content { background-color:#FF0000;
float: left;
margin-left: 10px;
padding: 10px 10px 10px 10px;
}
#profiles_container .profile .content .col1 { background-color:#CCFFCC;
float: left;
}
#profiles_container .profile .content .col2 {
float: left;
}
#profiles_container .profile .btm{
background-color:#999999;
}
.clear {clear:both;}
</style>
</head><body>
<div id="container">
<div id="profiles_container">
<div class="profile">
<div class="foto"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Photo_1" border="0" align="top" />
</div><!-- END foto -->
<div class="content">
<div class="col1"><p>COLUMN_1</p></div><!-- END col1 -->
<div class="col2"><p>COLUMN_2</p></div><!-- END col2 -->
</div><!-- END content -->
<div class="clear"></div>
<div class="btm"><p>BOTTOM</p></div>
</div><!-- END profile -->
</div><!-- END profiles_container -->
</div><!-- END container -->
http://www.veracon.net/qwaffle/ If you look closely in Firefox, the content holder (left and right) is one pixel too small - it's meant to be the same size as the header. I don't see why this is happening, as it looks fine in IE. I could use some help. When i view rockitdesign.co.uk/portfolio in IE6, one of the columns seems too wide so the right one is getting squeezed underneath. This seems to happen on many of the sites i do so must be the same thing causing it? Any ideas? Thanks. I'm having a problem with a width attribute in IE7. The main content div on the page http://www.mckr.ie/test.html looks fine in Opera but in IE7 it makes the page scroll horizontally. Basically I didn't put a width on the #contentdiv styled <div>, its supposed to just occupy the width of the page automatically. When I put width 100% on it it messed up in IE6. Now I'm looking at it in IE7 and its similarly messed up. Does anyone know a way of solving this? Any help would be much appreciated. Here's my HTML code: Code: <div id="bannerdiv"></div> <div id="contentdiv"> Content here</div> <div id="leftnavdiv"><div id="leftnavouterdiv"><div id="leftnavinnerdiv">Nav here</div></div> <div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p> <form action="http://search.atomz.com/search/" method="get" target="main"> <b>Search the Site<br /> </b> <input name="sp-q" size="15" /> <input name="submit" type="submit" value="Go" /> <input name="sp-a" type="hidden" value="sp10023119" /> <input name="sp-f" type="hidden" value="ISO-8859-1" /> </form> </div> </div> </div> <div id="topnavdiv"> <ul> <li><a href="/" id="buttonhome"><b>Home</b></a></li> <li><a href="about.html" id="buttonabout"><b>About Us</b></a></li> <li><a href="location.html" id="buttonlocation"><b>Location</b></a></li> <li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li> <li><a href="news.html" id="buttonnews"><b>News</b></a></li> <li><a href="people.html" id="buttonpeople"><b>People</b></a></li> <li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li> </ul> </div> Here is the relevant CSS code: Code: #bannerdiv { background-image: url(images/logo_banner.gif); height: 120px; width: 100%; background-color: #3366CC; background-repeat: no-repeat; background-position: left top; display: block; top: 0px; position: absolute; z-index: 9; left: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; margin: 0px; padding: 0px; }
#leftnavdiv { position:absolute; left:0px; top:146px; width:237px; z-index:2; font-size: 11px; } #contentdiv { position:absolute; left:250px; top:146px; z-index:1 }
#leftnavinnerdiv { width: 210px; margin-top: 0px; margin-bottom: 0px; margin-left: 10px; padding-bottom: 30px; padding-top: 0px; }
#leftnavouterdiv {
background-color: #EEF3F9;
background-image: url(images/bg.newsbottom.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
#searchdiv {
background-color: #EEF3F9;
width: 234px;
margin-top: 15px;
margin-bottom: 15px;
}
#innersearchdiv {
margin: 0px 15px;
padding-top: 15px;
padding-bottom: 15px;
}
#topnavdiv {
position:absolute;
left:0px;
top:120px;
width:100%;
z-index:3;
background-color: #3366CC;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-color: #f8c015;
border-bottom-color: #f8c015;
border-right-color: #f8c015;
border-left-color: #f8c015;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
height: 24px;
}
|
|||||||