I have no idea why this is not working, but I have a <div>, with some <span> tags within it, but when I set the width of the <span> tag, it does not keep it if there is nothing in the span tag. Is there something that I am forgetting? I want to avoid adding a spacer gif if at all possible.
.outer{
border: 0;
margin: 0;
padding: 0;
}
.first {
width: 11px;
vertical-align: middle;
}
<div class="outer">
<span class="first" /> </span>
<span class="second">some stuff</span>
<span class="third">some stuff</span>
</div>I've run into that problem myself.
Span typically is used for inline text, div is used for block elements
2 solutions! Use a div, or an in your span element(empty space).
Granted you've already tried the space method, so maybe it only works in specific browsers? It's worked for me before though, strange...Thank you for the hints. However, I can't use a div b/c I don't want the line break after the closing div. I am using a (non-breaking space) between my span tags, but it does not seem to do the trick.
Any other suggestions?Width and height should not work on inline elements. Try setting display: inline-block but you may run into support problems.Vladdy,
Thanks for clearing that up. I thought I had used it before, but I think it was in an intranet page that would only be rendered using IE (which works).
Just out of curiousity, why can't you set the width and height of inline elements?By their nature inline elements can not have width and height:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting">http://www.w3.org/TR/CSS21/visuren.html ... formatting</a><!-- m -->
Yes it does work in IE - but that is IE, 'nuff said.margin-right: 11px;
margin-top: -10px
That will move it up and over, works like a charm in IE6 and NN7, I haven't had the opportunity to test in other browsers though.
.outer{
border: 0;
margin: 0;
padding: 0;
}
.first {
width: 11px;
vertical-align: middle;
}
<div class="outer">
<span class="first" /> </span>
<span class="second">some stuff</span>
<span class="third">some stuff</span>
</div>I've run into that problem myself.
Span typically is used for inline text, div is used for block elements
2 solutions! Use a div, or an in your span element(empty space).
Granted you've already tried the space method, so maybe it only works in specific browsers? It's worked for me before though, strange...Thank you for the hints. However, I can't use a div b/c I don't want the line break after the closing div. I am using a (non-breaking space) between my span tags, but it does not seem to do the trick.
Any other suggestions?Width and height should not work on inline elements. Try setting display: inline-block but you may run into support problems.Vladdy,
Thanks for clearing that up. I thought I had used it before, but I think it was in an intranet page that would only be rendered using IE (which works).
Just out of curiousity, why can't you set the width and height of inline elements?By their nature inline elements can not have width and height:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting">http://www.w3.org/TR/CSS21/visuren.html ... formatting</a><!-- m -->
Yes it does work in IE - but that is IE, 'nuff said.margin-right: 11px;
margin-top: -10px
That will move it up and over, works like a charm in IE6 and NN7, I haven't had the opportunity to test in other browsers though.