Forum Moderators: not2easy
For entries on my website, I'm displaying an information bar above each article which is supposed to look like this:
---------------------------------------------------
[] Date ¦ filed under: Cat1 ¦ Cat2 ¦
---------------------------------------------------
This works very well as long as there's only one category.
---------------------------------------------------
[] Date ¦ filed under: Cat1 ¦
---------------------------------------------------
However, if there are two categories the entry was filed under, there's an extra blank/whitespace added.
---------------------------------------------------
[] Date ¦ filed under: Cat1 ¦ Cat2 ¦
---------------------------------------------------
The seperators (¦) are no characters, but a CSS border on the right. [] is an icon (image). is a whitespace (somehow blanks won't do it on WebmasterWorld).
Code:
<div class="entry archive">
<a href="#">Entry</a><br /> //TITLE
<p class="info"> //INFO BAR
<em class="date"><span style="border-right:1px solid; border-color:#949494; padding-right:3px;">July 02, 2005</span> filed under: <a href="#">Cat1</a><a href="#">Cat2</a></em>
</p>
TEXT
</div>
CSS:
.entry .info {
position:relative;
margin-top:-3px;
padding:3px;
border-top:1px solid;
border-bottom:1px solid;
font-size:0.9em;
}
.entry.archive .info a {
margin-right:3px;
padding-right:3px;
border-right:1px solid;
}
.entry .info em {
padding-right:6px;
font-style:normal;
}
.entry .info .date {
padding-left:15px;
background:url(/blog/images/post.gif) center left no-repeat;
}
Any ideas what's going wrong here?
- Lupi
short answer is I think it's whitespace handling of inline elements. It's not happening with your example, but if you put the 2 x links on different lines in the HTML source or leave a whitespace gap between them, then it is happening, is this how it is in the generated HTML?
It is how it's meant to be e.g.
if you make this a link [webmasterworld.com] and this a link [webmasterworld.com] in a normal sentence.
you would expect there to be whitespace between the words "link" and "and"
One Quick fix is to make sure there is no generated whitespace between the two category link elements (in the CMS code)
Suzy
