The solution was definitely in the inline-block declaration with some margin at the bottom. Thank you very much! Now everything looks consistent in all major browsers.
As for my sample, hehe you’re right! It was not the most beautiful one nor the most optimized one. But it was just a sample, a way to show in what kind of scenario I would have used such an effect. For example I saw it used on the mclaren website. That website doesn’t even look consistent in all browsers. Again, just to give you an idea of how I see that font effect applied.
Also, I have thrown all the spans into paragraphs. Actually I’d see them as headings, but we get the idea by now. Now we have a nice dymo tape effect with CSS.
Yes, that’s probably what I’d do for consistency. The floated elements are more reliable than inline-block (or inline) when you are talking about pixel precision and you don’t get tripped up by white space bugs either
As Jason said the background is actually drawn on to the content area which is not defined in the specs explicitly.
The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the ‘line-height’, but leads to glyphs painting outside their content area.)
I don’t understand why you didn’t just use a block element with a 1px margin as that will render consistently. Using a span and then adding a break is just asking for trouble and is more or less the same as using a block level element anyway.
I would have done this which looks the same to me in all browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Svevo Romano">
<!-- Date: 2010-07-09 -->
<link rel="stylesheet" href="dymo_tape.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style>
/*This is a CSS document*/
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
#dymo p {
font-size: 25px;
vertical-align:middle;
margin:0 0 1px;
background: #000;
color: #fff;
padding: 0px 0px 0px 0px;
line-height: 31px;
}
</style>
</head>
<body>
<div id="dymo">
<p>WE WILL USE SOME TEXT TO TEST THE DYMO TAPE EFFECT WITH CSS</p>
<p>THESE LINES ARE MADE OF pS SINCE WE WANT THE BOX TO END WHEN THE TEXT ENDS</p>
<p>WE THEN USE LINE HEIGHT TO ACHIEVE THE SPACING BETWEEN THE LINES</p>
<p>ONE IMPORTANT THING IS TO KNOW THAT IE (TESTED UP TO 8) BEHAVES DIFFERENTLY FROM</p>
<p>STANDARD BROWSERS. IE SEPARATES BY 2 LESS PIXELS - TEST: t g I è</p>
<p>I GUESS THERE IS NOT MUCH TO DO. THE SPACE AROUND TEXT IS SLIGHTLY DIFFERENT IN IE</p>
<p>IF YOU ZERO THE PADDING AND MARGIN AND PUT LINE HEIGHT TO 31px (THE FONT SIZE IS 25px)</p>
<p>FF SHOWS 1PX GAP. IE SHOWS THE GAP FROM 33PX ONWARDS.</p>
<p>BASICALLY THE BOX IS 30PX in FF WHEN THE FONT SIZE IS 25PX. IT IS 32PX IN IE6. WHY? DUNNO!</p>
<p>ALSO, IT IS PROPORTIONAL TO FONT-SIZE. USING FONT-SIZE 50PX I HAD TO REACH LINE-HEIGHT</p>
<p>60 TO SEE 1PX GAP IN FF AND 64(!) IN IE 6 AND 8. DIDN'T HAVE IE 7 BUT I</p>
<p>ASSUME IT WOULD HAVE BEEN THE SAME</p>
<p>NOW LINE HEIGHT IS 33PX</p>
</div>
</body>
</html>
I would also have used lower case and use css to change it to uppercase (text-transform:uppercase) but I couldn’t be bothered to re-type your code
I probably would NOT have multiple paragraphs there, I’d have one or two. P should be used for grammatical structure, not presentational; that’s why I’d probably even consider trying to get rid of having breaks between the span at all, so CSS off your paragraphs remain intact… hence the float:left; clear:left; suggestion.
Thanks for the further suggestion. I’ll keep that in mind for any production scenario that will, of course, make more sense… semantically speaking. Cheers!
Yeah, to use paul’s suggestion you’d have to make them all float:left; clear:left; I’d actually consider wrapping ALL those spans in a P, and losing the BR to do that on the span; since grammatically those are all one paragraph.
I fail to see how that formatting is an advertisement hidden in as article. (the print version of an infomercial)
I wasn’t going to say anything, but to me that looks like ass atop a picture, but I guess YMMV… My gut says “wow, look at that rendering error” - literally I’d assume it was a mistake and not intentional… though I’d also never have a 167k 1600x1200 image on a page as part of it’s template so… (since 170k is usually the upper limit I consider acceptable for an entire PAGE; all Images+code!)
@deathshadow - I have tried your tips and with no gap I can achieve good results, especially because of the behavior of inline-block. But I actually want 1px gap across browsers.
@Paul: I didn’t use a block element because I need an inline one to make the black end when the text ends. It’s more advertorial, looks better, for example, on a fashion website on top of a picture. I’ve added the picture to show you what I mean. If those were paragraphs the picture would have been covered.
Any further consideration that could solve the problem without using conditional comments?
Some browsers will draw the background to line-height, others will only do so to font-size.
My advice? Set the line-height shorter, set it to display:inline-block, and pad the top and bottom of each line.
Also, your line-break would be occuring in whatever the line-height is OUTSIDE the span. line-height behaves a lot like min-height, so I’d move the whole font declaration to #dymo.
Should behave a lot better cross browser with no gaps between the lines and consistent sizing. The line-height in all browsers will auto-expand to the tallest element in the line - the padding on the inline-block span gives us that 33px you wanted without any worries about font-size vs. line-height issues you have on display:inline; elements.
thanks for your reply. I can of course reduce the font family to one font and I could also remove the BR tags. I wonder if you have any solution to this problem? Is it a known issue? I could do a lot of things, but I am failing to solve it.
I think that’s the default, in which case, you wounldn’t have to mention it.
You could use proper p’s and set them to display: inline if you want.
Between each span you have a br element. I’m not sure what browsers use to base its size but clearly it’s different between browsers. You could actually style the br tag. You could set a height and a font-size on it.
You are using two very differently sized fonts in your list: trebuchet ms is small, verdana is quite big. Know that someone who doesn’t have trebuchet will see the page in the much-larger verdana (if they do have that one).
