Descendant Selectors break when grouped. CSS corners

[MattyUK]

Hi

I am using CSS to develop curved corners using bullet points, thus no images. It was all going well until I decided to tidy up the CSS code and shorten it.

It seems to break when I group selectors together. The CSS validates well and seems to adhere to the rules and the manuals.

The problem: the colours for the second box get taken up by the first. That is the styles for hte first box don't remain specific to it as they should becuase hte CSS defines them as descendant.

I can't sus out why it won't work.

The problem seesm to be with this line:

div.box div.tlcb,div.trcb,div.blcb,div.brcb {
color: #000033; /*Colour of inner box*/
}

The logic in plain'ish english I want is:
For DIV's with the CLASS set to tlcb, trcb, blcb or brcb IF they are contained within a DIV with the CLASS set to box apply the colour designated.

You can substitute CLASS for ID and interchange as I have changed from CLASS to ID's and back again in various combinations, the problem remains.

div.box div.tlcb, div.trcb, div.blcb, div.brcb {
color: #000033; /*Colour of inner box. White space added*/
}

also doesn't work.

I am testing in IE6.

Online example:
http://www.realworldweb.co.uk/cssc.htm

Any ideas anyone?

MattyUK

[Vladdy]

Forget about it.
It only works in IE because of the font-size: x px bug.
Try your page in Gecko browser and see your concept fall apart when changing text size....

[MattyUK]

Thanks for your reply.

I haven't got them to check on (yet).

Would appreciate a more detailed explanation, I'd like to write cross browser code but would want those curved corners without code bloat or images if possible.

Any other ideas?

I am almost tempted to say well sod it since 95%+ or whatever it is uses IE will only care about that so long as it dies relatively gracefully on other browsers.

Still doesn't explan why the groups don't behave well. All we have said is only works on IE but not why it is failing in that way.

Changing text size? Since size is set in the CSS can IE users change it at all? Usually they can't, at least I couldn't.

So any ideas I can't abandon the corners they are required for project, can this idea be made to work what other ways are there to tackle it given the above code bloat and image constriants?

MattyUK

[MattyUK]

What exactely is the IE font-size: x px bug? Have you more info on it please.

[MattyUK]

What are peoples thoughts on SVG and VML to achieve this goal?

[Vladdy]

What is exactly wrong with 4 corner images? If they are simple 2 color graphics you get a good compression rate in gif format

[liorean]

Chage div.box div.tlcb,div.trcb,div.blcb,div.brcb to div.box div.tlcb, div.box div.trcb, div.box div.blcb, div.box div.brcb


The commas are not part of the selector, they separate different selectors. Thus, you need to write the entire selector in each case, instead of just a part of it.

[MattyUK]

Thanks. That explains a lot and is a great help.

The problem with images is that I need to reauthor them every time the non-transparent colour changes. Something I suspect is goign to be fairly frequent. Would have been a dream to simply input a new hex code into CSS, but as it is the corners for the coloured box are on a changing coloured background. Both the background and box are likely to change.

It's managability not bandwidth that is the concern behind me wanting to knock images on the head.

Thanks everybody for your help. Looks like I can't see a cross browser way around images for now.

Wonder if VML or SVG are good bets for simple curves corners like this. Anyone know the browser support for them?

MattyUK

[Roy Sinclair]

SVG still requires a plugin in any major browser. It's too bad, SVG could easily replace Flash otherwise.

[blankpixel]

Just came across this in my search for cross-browser curvy bits...

The problem with images is that I need to reauthor them every time the non-transparent colour changes. Something I suspect is goign to be fairly frequent. Would have been a dream to simply input a new hex code into CSS, but as it is the corners for the coloured box are on a changing coloured background. Both the background and box are likely to change.

I have this problem on frequent occaision. I've found that one time saving solution is to use high quality transparent pngs, and a "double" section of css like so:

#news {
filterrogidXImageTransform.Microsoft.AlphaImageLoader
(src='/images/layout/trans.png',sizingMethod='none');
}
div>#news {
background-image: url('/images/layout/trans.png');
}

The filter causes IE to display pngs properly, and everything else does it by default. The png has a non-pixelated appearance (hate gifs) and when you're ready to change the box color, photoshop "color overlay" works very well since the png lacks anything except for one layer with the curvy bits in it.

(p.s. sorry to dredge up an ANCIENT thread...)

[MattyUK]

No problems with me dredging up an old thread. All solutions imparted are going to help someone or other.

Frequently having to change images, whether they be GIF's, JPG's or PNG was the core of the problem really. Ideal goal is to just change the CSS and I haven't found a good way of doing that. Imagine me restating the question but throwing in that I only have access to upload the CSS.

Not sure it is possible, but would be great if someone has found a way.

Thanks for your input.

MattyUK

ps: you may want to edit your post for the smilies don't crop up in your code quote. May confuse some of the others reading the post.