Home/ Questions/Q 8373147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:36:27+00:00

I created a beautiful faux legend for a box that surrounds some text: jsfiddle

  • 0

I created a beautiful faux legend for a box that surrounds some text: jsfiddle. However, my solution uses :before and :after pseudo classes, which won’t work in IE 7 and IE 8. Bummer.

So I decided I would set out to try to define my own spans to use in the place of the :before and :after pseudo classes. Unfortunately, my solution seems to work for the :before replacement, but not the :after replacement: jsfiddle. Also, the contents of the box have been shifted upwards for some inexplicable reason.

Is it possible to accomplish what I am doing through CSS and HTML alone? I don’t want to bring any Javascript or jQuery into the mix.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://www.webdevout.net/test?01&raw:

    <!doctype html>
<html>
    <head>
        <title></title>
        <style>
html {
    overflow-y: scroll;
    background: #ff3366;
    font: 16px serif;
}
fieldset {
    border: 3px solid #ffc2d1;
}
legend {
    background: url(http://img820.imageshack.us/img820/4242/spritearrowdown.png) no-repeat 3px 50%;
    padding: 0 0 0 13px;
}
html > /**/ body 
legend { /* if the way it looks in IE8 really bothers you: */
    position: relative;
    right: -13px;
}
        </style>
    </head>
    <body>
        <form action="foo">
            <fieldset>
                <legend>Model Forecast Guidance</legend>
                Fieldset
            </fieldset>
        </form>
    </body>
</html>
    • 0