If you post a link, maybe I will have a chance to check it out and play around with the css.
As Beel said, it’s hard to diagnose from here. But you can do better than put your image directly in the xhtml. If you put it in the CSS, you’re sure there won’t be a gap:
#breadcrumb {
font-size: 10px;
background: #006699 url('detalle.gif') no-repeat top right;
color: white;
float: left;
height: 12px;
margin: 0px;
padding: 0px;
padding-right: 32px;
}
Play with the padding to get it right.
The floated element requires (one) to have its width defined and (two) without hacking it must have no borders or padding.
Really, height won’t do?
As for padding, etc… do you have a reference?
To the original author: I forgot to add display: inline; to kill at least two IE bugs. (That’s a hack, though, and Root probably prefers to do it without them). You may also have to give a width, height or line-height to the floatholder.
Thread Starter
poper
(@poper)
Hi, thanks. You can see it live at http://pop-page.com/articulos/ which is a test site. I’m gonna try whta you said right now.
Thanks again
I’ll end up learning Spanish by looking at WP blogs 🙂
My reference is the inability of IE to implement the box model. Width plus padding will bork unless hacked.
Hm, it’s ok in IE6 (in standards mode), and only problematic if the overall width is of any importance. Which isn’t always the case.
poper: you may to edit the .giv, btw, to give it the same height as the entire float and a white background. Otherwise it might end up invisible.
I do not know why you are doing this serendipity but you are wrong. A floated element requires to have its width defined. Period.
Er, you might misunderstand me. I didn’t say poper shouldn’t define a width — which would be easy to do as he’d probably want one anyway.
I was just asking questions… and still do — do you have a reference so that I can read up on this issue?
Disclaimer: I don’t consider myselft to be a css wizard (witch?). What I wrote was just to offer poper what I’d do in his situation. If it doesn’t work right away — I’m sorry, but that’s a danger everyone is exposed to on a forum where half clued-in users suppord half-minus -a-little-bit clued-in users.
My remark was based on the fact that I believe it’s better, as a rule, to put decorative images in the css instead of in the markup.
Thread Starter
poper
(@poper)
I’ve just tried the CSS suggested by Serendipity and it works like a charm. Thanks all for your kind help.
Gracias amigos!
Not in Firefox it doesnt.
W3C on the necessity for Width in Floats
That’s because your text is higher than the 12px of the .gif. Edit the image by adding some white background to the bottom. And adjust (or get rid of the) height: 12px. The .gif must be at least as high as the floating box. Yours isn’t, so the background is peeking through at the bottom if you just adjust the height. In FF, 12 px is not high enough to contain your text, so it’s cut off at the bottom.
Thx Root. They need it because it’s in the specs, not browser behaviour as I assumed. here is a short discussion. Let’s hope for CSS3, then.
