#721 Webkit removed

open
nobody
CSS editor (36)
5
2012-08-08
2012-08-08
Jerry Rutherford
No

While doing rounded borders in CSS, I noticed that my raw CSS worked in Chrome, Firefox, IE. After a save however... it no longer worked in Chrome... back to square corners. After looking at the code I found that the following occurred...

.button_1 {
border: 2px solid #ffaa22;
background-color: #ffec64;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-radius: 6px
border-radius: 6px
font-family: arial;
font-weight: bold;
text-decoration: none;
text-shadow: #ffee66 1px 1px 3px;
text-align: center;
color: #660000;
position: fixed;
float: none;
font-size: 12px;
width: 110px;
padding-bottom: 2px;
padding-top: 2px;
}

was changed to...

.button_1 {
border: 2px solid #ffaa22;
background-color: #ffec64;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
font-family: arial;
font-weight: bold;
text-decoration: none;
text-shadow: #ffee66 1px 1px 3px;
text-align: center;
color: #660000;
position: fixed;
float: none;
font-size: 12px;
width: 110px;
padding-bottom: 2px;
padding-top: 2px;
}

Only the Mozilla formatting was retained... the -webkit and the border-radius were stripped out. This means that the rounded corners ONLY work in Mozilla browsers. I'm attaching a test page with the functional CSS. (Internal style) Load this into Komposer (I'm using 7) then save the file... now try looking at it in Google Chrome.

Discussion

  • Test HTML page with proper CSS.

     
    Attachments