Total noob question, but here.
CSS
.product__specfield_8_arrow {
/*background-image:url(../../upload/orng_bg_arrow.png);
background-repeat:no-repeat;*/
background-color:#fc0;
width:50px !important;
height:33px !important;
border: 1px solid #dddddd;
border-left:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-left-radius:0px;
border-top-left-radius:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-topleft:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-top-left-radius:0px;
margin:0;
padding:2px;
cursor:pointer;
}???
HTML
<span class="product__specfield_8_arrow"> </span>?
Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not.
Thanks.
Try using a div
instead of the span
or using the CSS display: block;
or display: inline-block;
—span
is by default an inline element which cannot take width
and height
properties.
Span takes width and height only when we make it block element.
span {display:block;}
There are now multiple ways to mimic this same effect but further tailor the properties based on the use case. As stated above, this works:
.product__specfield_8_arrow { display: inline-block }
but also
.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table
This JSFiddle shows how similar these display properties are in this case.
For a relevant discussion please see this SO post.
span {display:block;}
also adds a line-break.
To avoid that, use span {display:inline-block;}
and then you can add width and height to the inline element, and you can align it within the block as well:
span {
display:inline-block;
width: 5em;
font-weight: normal;
text-align: center
}
Span starts out as an inline element. You can change its display attribute to block, for instance, and its height/width attributes will start to take effect.
Inspired from @Hamed, I added the following and it worked for me:
display: inline-block; overflow: hidden;
span
s are by default displayed inline, which means they don't have a height and width.
Try adding a display: block
to your span.
As per comment from @Paul, If display: block is specified, span stops to be an inline element and an element after it appears on next line.
I came here to find solution to my span height problem and I got a solution of my own
Adding overflow:hidden;
and keeing it inline will solve the problem just tested in IE8 Quirks mode
Source: Stackoverflow.com