Home/ Questions/Q 7620891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:03:35+00:00

I have a div that is deliberately smaller than its content (I’m making a

  • 0

I have a div that is deliberately smaller than its content (I’m making a sliding toggle widget). I want the container to have rounded corners. In FireFox, it renders as intended, but Chrome and Safari both show the inner content in the region between where the rounded corners are and where square corners would be.
I can’t put rounded corners on the inner content as there is no solution that is right for all scenarios (toggle left, toggle right, toggle in motion).
Here’s what I have so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>DIV test</title>

        <style type="text/css">
            body {
                font-size               : 3em;
            }
            #frame {
                border                  : thin solid black;
                /* background: #a0a0ff; */
            }
            #portal {
                background              : none;
                margin                  : 20px;
                display                 : inline-block;

                -moz-border-radius      : 29px;
                -webkit-border-radius   : 29px;
                -khtml-border-radius    : 29px;
                border-radius           : 29px;
                border                  : thin solid black;

                width                   : 400px;
                overflow                : hidden;
                height                  : 4em;
                line-height             : 4em;
            }
            #inner {
                position                : relative;
                width                   : 900px;
                background              : #a0ffa0;
                z-index                 : -100;
                margin-left             : -150px;
            }
        </style>

    </head>
    <body>
        <div id="frame">
            <div id="portal">
                <div id="inner">Here are some partially visible words</div>
            </div>
        </div>
    </body>
</html>

Is this a rendering bug in WebKit browsers, or am I doing something wrong and getting lucky with FireFox?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure if it’s a bug, but it sucks.
    However, try this fix:
    http://jsfiddle.net/tpe36/1/

    Works in Chrome and Firefox for me.

    HTML:

    <div id="frame">
    <div id="portal">
        <div id="container">                
            <div id="inner">Here are some partially visible words</div>
        </div>
    </div>
</div>

    CSS:

    #inner {
    position                : relative;
    width                   : 900px;
    z-index                 : 1;
    margin-left             : -150px;
}
#container {
    background              : #a0ffa0;
}
​
    • 0