La columna Holy grial 3 con esquinas redondeadas no funciona en algunos navegadores

I am following the holy grail 3 column liquid layout from aquí and I am trying to round the corners using new css techniques, but I cannot get the top-left corner to behave properly. The corner is round on the outside, but there is another div inside that is not round, and it pokes out the round corner. I believe it may be because of all the margin switching and whatnot going on, but I'm not having much success in finishing this layout.

I should mention that the corners work properly in firefox only at this point, and I obviously need them to work in all modernas browsers (IE may be an exception - I'm more looking for chrome, opera and safari support).

I have created a simpler version of my layout for testing purposes and I hope that someone may be able to at least point me in the right direction to get this figured out. I added some lorem ipsum and color coded the columns and divs to hopefully make it easier to see which styles need to be changed. Here is the exact code as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title Here</title>
<style type="text/css">
    .wrapper
    {
        color: #333;
        line-height: 130%;
        margin: 10px 12px 0px 10px;
        -webkit-border-radius: 11px 11px 0 0;
        -moz-border-radius: 11px 11px 0 0;
        border-radius: 11px 11px 0 0;
    }
    .columnmask
    {
        position: relative;
        clear: both;
        float: left;
        width: 100%;
        overflow: hidden;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        border-top: 1px solid gray;
    }
    .threecol
    {
        background: white;
        -webkit-box-shadow: #000 2px 2px 3px;
        -moz-box-shadow: #000 2px 2px 3px;
        box-shadow: #000 2px 2px 3px;
        background: red;
    }
    .threecol .middlecolumn
    {
        float: left;
        width: 200%;
        margin-left: -170px;
        position: relative;
        right: 100%;
        background: blue;
    }
    .threecol .leftcolumn
    {
        float: left;
        width: 100%;
        margin-left: -50%;
        position: relative;
        left: 340px;
        background: yellow;
    }
    .threecol .midcolwrap
    {
        float: left;
        width: 50%;
        position: relative;
        right: 170px;
        padding-bottom: 1em;
    }
    .threecol .midcol
    {
        margin: 0 180px;
        position: relative;
        left: 200%;
        overflow: hidden;
        padding-top: 5px;
        background: green;
    }
    .threecol .leftcol
    {
        float: left;
        float: right;
        width: 160px;
        position: relative;
        right: 5px;
        text-align: center;
        background: silver;
    }
    .threecol .rightcol
    {
        float: left;
        float: right;
        width: 160px;
        margin-right: 15px;
        position: relative;
        left: 50%;
        text-align: center;
        background: purple;
    }
    .footer
    {
        -webkit-border-radius: 0 0 11px 11px;
        -moz-border-radius: 0 0 11px 11px;
        border-radius: 0 0 11px 11px;
        background: orange;
    }
    #footer
    {
        position: relative;
        clear: both;
        margin: 0px 10px 10px 10px;
        padding: .5em;
        text-align: center;
        border: 1px solid gray;
        -webkit-box-shadow: #000 2px 2px 3px;
        -moz-box-shadow: #000 2px 2px 3px;
        box-shadow: #000 2px 2px 3px;
    }
    .roundTop
    {
        -webkit-border-radius: 11px 11px 0 0;
        -moz-border-radius: 11px 11px 0 0;
        border-radius: 11px 11px 0 0;
    }
</style>
</head>
<body>
<div class="wrapper">
<div id="colmask" class="columnmask threecol roundTop">
    <div class="middlecolumn">
        <div class="leftcolumn">
            <div class="midcolwrap">
                <div class="midcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
            </div>
            <div class="leftcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
            <div class="rightcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
        </div>
    </div>
</div>
</div>
<div id="footer" class="footer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>

preguntado el 24 de agosto de 12 a las 03:08

I can tell you this much, it's because your leftcolumn div starts at the absolute leftmost pixel of the browser and since it is nested within the parent div you dont see it. What looks like the corner of the yellow div is actually about 50-100 pixels into the rectangle. Does that make sense? NOt sure how to go about fixing it, i couldnt figure it out within 10 mins or so of futzing with it so I thought I'd at least give you a direction. -

Thanks for the tip! I assumed that was the case, but I also couldn't figure out a good way to modify it even temporarily to see the leftmost pixel/corner. I'm also thinking it could be possible that this isn't the best implementation for making a 3 column layout that is rounded on the corners of the left and right columns. If anyone knows a better approach, I'm all ears! -

1 Respuestas

Can you not just give the inner columns a border-radius too? Or alternatively, give them a little top-margin to push them away from the edge?

Respondido 24 ago 12, 05:08

Source code is provided. If you can tell me what I need to change to make this work, you are my hero! - Joseph

there are lots of ways of doing this, with padding or margin, on various elements, but here is one that works: .threecol .leftcolumn {padding-top: 5px;} - Zenkaty

Just got around to testing that quick fix, but it is not working. I tried in newest chrome and opera. It only shifts the contents of the left column down 5px. I need it to show the round corner which I believe is about 50-100px outside of the left of the screen. - Joseph

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.