Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Gurus please help me figure these rounded corners out?
    primarykey
    data
    text
    <p>I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble</p> <ul> <li>The 'box' in question that I'm trying to get rounded corners on has a white background with a background image</li> <li>The page background is a gradient and the outside corners must be transparent to look right.</li> <li>I've got a green border running around my box.</li> </ul> <p>Here's a sample image that shows what I'm trying to achieve: <a href="http://www.freeimagehosting.net/uploads/77c9ec6c32.png" rel="nofollow noreferrer">alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png</a></p> <p>Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.</p> <p>The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.</p> <p>HTML:<br> <code>&lt;div class="content"&gt;</code><br> <code>&lt;jdoc:include type="component" /&gt;</code><br> <code>&lt;/div&gt;</code> </p> <p>CSS:<br> .content {<br> background-color: #FFFFFF;<br> border: solid 2px #ACD579;<br> -webkit-border-radius: 13px;<br> -moz-border-radius: 13px;<br> border-radius: 13px;<br> padding: 1em 2em;<br> }<br> .content<br> {<br> background-image: url(../img/pagebG.gif);<br> background-position: bottom;<br> background-repeat: repeat-x;<br> } </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload