Creeping Text Bug? - Text moves position

negative indent on nested divs

[samsonite]

Hi everyone. I thought CSS would be easy and logical, but some stuff just makes me angry.

the css...

.a
{
background: #B0B0B0;
margin-bottom: 8px;
font: bold 12pt arial;
white-space: nowrap;
padding-left: 4px;
padding-top: 1px;
padding-bottom: 1px;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
border: 1px solid black;
}
.b
{
border-left: 3px double black;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 6px;
margin-left: 8px;
margin-top: 5px;
margin-bottom: 5px;
color: blue;
text-decoration: underline;
font: bold 10pt arial;
background: #F5F5F5;
}
.c
{
color: gray;
font: 8pt arial;
margin-top: 3px;
margin-left: 10px;
border-left: 1px dotted #D0D0D0;
border-bottom: 1px dotted #D0D0D0;
padding-left: 4px;
padding-bottom: 4px;
text-decoration: none;
}

and the html

<div width=100% class=left>
<div class="a">title</div>
<div class="b">something goes here
<div class="c">and a big long description would go here..</div>
</div>
<div class="b">seomthing else</div>
</div>

How come class c gets a margin, and padding, and everything the class calls for, except it remains underlined? I explicitly tell it "text-decoration: none"!

And also for some unknown reason, the div that says "something else" will lose, of all things, its padding.

This really makes no sense to me! Please help!

Also, it's a pleasure to be in the forum. Nice to meet you all :)

-Sam

[Aberdeen]

Hi Sam,

I am sure someone will be able to explain this better than me, but you underline problem comes from the div B still being "active", so anything you add in div C will always have a blue underline as specified. Setting it to none in div C does nothing, as it only effects text in the div C. A better example of what I mean is add a &nbsp to you code in div c and you will see a small blue underline. I would not set div B to be underlined, but set the paragraph or anchor to be underlined.

In answer to you padding problem, I think it is a browser bug, and I fear I do not have enough experience to explain the reasons for this.

Hope I did not confuse your more.

[SuzyUK]

Hi samsonite - Welcome to WebmasterWorld

nearly stumped on this one.. but I learnt something new which I like but (just as Aberdeen said!) it is yet another IE Bug.. which I don't like ;)

First the text-decoration.. there isn't anything to be done here except create a wrapper for the sections..the text-decoration is behaving in all browsers as per the recommendations [w3.org].

This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration (e.g., they should all be underlined). The color of decorations should remain the same even if descendant elements have different 'color' values.

so you actually need to put the underlined text in a seperate div.. here's an example of one way:

.bc {
background: #F5F5F5;
color: #00f;
padding: 2px 5px 6px 5px;
margin: 5px 0 5px 8px;
border-left: 3px double #000;
}

.b {
font-size: 13px;
font-weight: bold;
text-decoration: underline;
}

.c {
color: #888;
font-size: 12px;
margin: 3px 0 0 10px;
padding: 0 0 4px 4px;
border-left: 1px dotted #D0D0D0;
border-bottom: 1px dotted #D0D0D0;
}

HTML:
<div class="bc">
<div class="b">something goes here</div>
<div class="c">and a big long description would go here..</div>
</div>

Now if you then repeat that html above lots of times on the page.. I think you'll see the bug in action! (In IE/Win that is) - it's not just the padding...

I had never heard of this one.. but it's the Magik Creeping Text [positioniseverything.net] bug :(

Solutions vary depending on the requirements.. and are discussed on StopDesign [stopdesign.com]

Suzy