I am really struggling with this! All I’m trying to do is add a border and padding to an image, which should be centered on the page.
For complicated reasons, I can’t just add a 2px padding and border directly to the image. I’m restricted to adding one element at a time in order to do this. So this div structure I’m stuck with.
Ok, then all you have to do is decide if you want to support the FF2 engine, and if so, you’ll need a -moz declaration (which, as a vendor extension, isn’t valid per the CSS validator… I ignore those warnings tho).
Thank you, I’ll test it out. I really appreciate your help. How do you get to be so good?
No, I’m using predefined class styles, the styles aren’t actually inline at all, just being called as style classes. It’s all a workaround for the fact BBcodes only support one additional argument via the {option}. I might be better off just writing a plugin to handle a special custom code rather than do all this mess, but it’s all stopgap…
You cannot have an inline as a direct child of the body element… so the code you posted is invalid unless you wrap a block element around the img tag.
Firefox2, which includes the current browser K-Meleon (a Windows-only version of Firefox that is slimmer and runs a bit faster), who uses the older rendering engine.
First, having a block child inside an inline-block child makes the FF2 engine puke (but I think having the inner span also inline-block might be ok), and second, usually this works:
span {
display: -moz-inline-box; /there’s inline-box and inline-block, each are different… whichever one looks correct is the right one to use in this case : )/
display: inline-block; /everyone else/
}
Is this vBulletin actually forcing inline styles? Or is that just for clarity on our part? I’ve never seen vendor extensions in inline styling, only in stylesheets.
Thanks for your very comprehensive answer. Actually the reason for the complications is writing a database driver dynamic image padding and bordering solution for GARS (Geek Article Review System) which is a vBulletin plugin. It’s a legacy on legacy thing, horribly ugly scenario, but it’s the best I can do to tame things until I can migrate to something sensible.
For now, I’m stuck with vBulletins bbTags limitation of one option per bbCode, and I’m layering bbCodes which transform themselves to div tags with a classname when put into the articles. It works quite well, but means every “thing” I do to an image needs to be wrapped in a separate div. So for the moment, I think it’s doing the centering, border, and padding, all as separate divs.
For the moment, this seems to do the trick. Can you think of any browsers that it will break in?
You can get around the display: inline-block bug for IE by telling IE later in a whisper “display: inline” (however you cannot do this with inline styles, which I’m assuming you are posting ONLY as an example).
div {
display: inline-block;
}
*+html div {display: inline;} /ie7/
html div {display: inline;} /ie6/
messy, as you can see.
Me, I’m lazy. I’d do this
<div><–text-align: center set
<span> <–display: inline-block will work on an inline in all browsers without extra statements… divs are blocks which is why it did not work with your divs in IE
<img src=“foo.png”>
</span>
</div>
Give the span the padding and borders. If I could see what you’re aiming for, I could recommend something better. What comes to mind:
img {
padding: the space you want;
vertical-align: bottom; /remove descender space if it’s a problem/
background-color: #thepaddingcolour; /yeah, this could also be an image… images can haz background images like anyone else/
border: the border you want;
}
This gives a coloured area around the image, and then the border is outside of that. But, can’t see what you want.
*edit ah reread first message:
For complicated reasons, I can’t just add a 2px padding and border directly to the image. I’m restricted to adding one element at a time in order to do this.
If the complicated reason is something to do with inline styles, like HTML email, then I guess it’s okay to bloat markup with several inline-styled divs, but I doesn’t like it either way.
IF when the image gets added to the HTML, if width and height can also be added (in the HTML with the src) then you can also haz in the CSS
display: block;
margin: 0 auto;
which can center it using the HTML-set width without needing text-align: center on a parent.
Sorry, the same problem applies (see screenshots from FF3.6). I was just trying to be minimal in my coding (in Firefox, you don’t need to specify the black).
I’m testing in FF3.6, IE8, Chrome.
In IE8, I can actually sometimes get the inline div to expand and wrap around the image, but in FF and Chrome they both follow correct behavior (I have read) which is not to expand around the inner item.
The screenshot with the black border looped under and behind the image is with the following code. I have also added a screenshot from IE8 (last attachment (it says “attachment pending approval” though so I don’t know if you can see it), which displays the exact desired behavior I would like to see in all browsers. Using this code, in FF you get a loop, and in IE8 it works great:
I’ve found that the following code doesn’t work in IE, but DOES work in FF and Chrome. So, I’m kind of stuck between places, without using a hack for IE.
