Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Question Descendant Selectors break when grouped. CSS corners

    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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    What exactely is the IE font-size: x px bug? Have you more info on it please.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    What are peoples thoughts on SVG and VML to achieve this goal?

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What is exactly wrong with 4 corner images? If they are simple 2 color graphics you get a good compression rate in gif format
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SVG still requires a plugin in any major browser. It's too bad, SVG could easily replace Flash otherwise.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #10
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just came across this in my search for cross-browser curvy bits...

    Quote Originally Posted by MattyUK
    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...)

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Cool

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •