 |
|
|
|
|
|
| |
| |
|
|
|
|
| |
| |
|
|
I have the following HTML:
<span>A<span>B<span>C</span>D</span>E</span>
I've set up some CSS to put borders round span elements. It's supposed
to display as follows:
+---------+
| +-----+ |
| | +-+ | |
|A|B|C|D|E|
| | +-+ | |
| +-----+ |
+---------+
However, no matter what I do, it actually renders like this:
+-+-+-+-+-+-+
|A|B|C|D|E|F|
+-+-+-+-+-+-+
Any idea how I fix this?
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Invisible <voi### [at] dev null> wrote:
> Any idea how I fix this?
'padding' is probably the keyword you are looking for.
--
- Warp
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Warp wrote:
> Invisible <voi### [at] devnull> wrote:
>> Any idea how I fix this?
>
> 'padding' is probably the keyword you are looking for.
Yeah, I was expecting some combination of padding and/or margin to do
it. But I can't seem to get that to work...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
> I have the following HTML:
>
> <span>A<span>B<span>C</span>D</span>E</span>
>
> I've set up some CSS to put borders round span elements. It's supposed
> to display as follows:
>
> +---------+
> | +-----+ |
> | | +-+ | |
> |A|B|C|D|E|
> | | +-+ | |
> | +-----+ |
> +---------+
>
> However, no matter what I do, it actually renders like this:
>
> +-+-+-+-+-+-+
> |A|B|C|D|E|F|
> +-+-+-+-+-+-+
>
> Any idea how I fix this?
I tried giving it both padding and margin, but didn't get what you
wanted. However, display:block did the trick. It makes the span behave
just like a div (and a div with display:inline would be identical to a
span). You need to give it explicit width though; the default is 100% of
the container block (the whole page in my test).
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
> I tried giving it both padding and margin, but didn't get what you
> wanted. However, display:block did the trick. It makes the span behave
> just like a div (and a div with display:inline would be identical to a
> span). You need to give it explicit width though; the default is 100% of
> the container block (the whole page in my test).
Scratch that; it doesn't match what you want (but gets close enough). It
doesn't get the B and D on the *sides* of the C block.
*tweaks more*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Nicolas Alvarez wrote:
>> I tried giving it both padding and margin, but didn't get what you
>> wanted. However, display:block did the trick. It makes the span behave
>> just like a div (and a div with display:inline would be identical to a
>> span). You need to give it explicit width though; the default is 100%
>> of the container block (the whole page in my test).
>
> Scratch that; it doesn't match what you want (but gets close enough). It
> doesn't get the B and D on the *sides* of the C block.
>
> *tweaks more*
Yeah, I already discovered that one myself. ;-)
There's a couple of other settings that do more or less the same thing
too. (display:table, etc.) But none does what I actually want. :-(
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
> There's a couple of other settings that do more or less the same thing
> too. (display:table, etc.) But none does what I actually want. :-(
And even if they did what you want, you may like to know display:table,
table-cell, table-row, etc; aren't supported by Microshaft Internet
Exploder.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
> *tweaks more*
Doesn't seem easy. You would need like three columns on each span: the
letter, the inner span, and the other letter.
I got close enough with floats:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.block {
border: red 1px solid;
padding: 5px;
margin: 5px;
}
div {
float: left;
}
</style>
</head>
<body>
<div class="block">
<div>A</div>
<div class="block">
<div>B</div>
<div class="block">
<div>C</div>
</div>
<div>D</div>
</div>
<div>E</div>
</div>
</body>
</html>
But I couldn't manage to get the letters vertically centered.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Nicolas Alvarez wrote:
>> There's a couple of other settings that do more or less the same thing
>> too. (display:table, etc.) But none does what I actually want. :-(
>
> And even if they did what you want, you may like to know display:table,
> table-cell, table-row, etc; aren't supported by Microshaft Internet
> Exploder.
...and I care because? ;-) ;-)
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
> Nicolas Alvarez wrote:
>>> There's a couple of other settings that do more or less the same
>>> thing too. (display:table, etc.) But none does what I actually want. :-(
>>
>> And even if they did what you want, you may like to know
>> display:table, table-cell, table-row, etc; aren't supported by
>> Microshaft Internet Exploder.
>
> ...and I care because? ;-) ;-)
I dunno, some weird people care. And people who make pages that
unfortunately *should* work for everybody. For example, an e-commerce
page that doesn't work on IE means less people wasting money^W^W buying
there.
But even then, it's always fun to have at least a feature or two that
require a correctly-working browser :) "If you have IE, you can still
buy but the site will look ugly; blame Microsoft for that."
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
