Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: webkit

  1. #1
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts

    webkit

    I used the following of which I know very little… to get rounded corners, first to the sidebars, and then to boxes inside the sidebars near those corners.

    What is in the sidebar:

    Code:
    -moz-border-radius-topright: 20px;
     border-top-right-radius: 20px; 
         -moz-border-radius-bottomright: 20px;
     border-bottom-right-radius: 20px;
    and what is in the box inside the sidebar


    Code:
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-box-sizing: border-box;
    -moz-border-radius-topright: 20px;
     border-top-right-radius: 20px;
    Everything worked fine until I tried to insert in the box near the sidebar corner two buttons that use

    Code:
    .button {
    	display: inline-block;
    	outline: none;
    	cursor: pointer;
    	width: 100px;
    	height: 18px;
    	text-align: center;
    	text-decoration: none;
    	font: 14px/100% Arial, Helvetica, sans-serif;	
    	padding: .5em 2em .55em;
    	text-shadow: 0 1px 1px rgba(0,0,0,.3);
    	-webkit-border-radius: .5em; 
    	-moz-border-radius: .5em;
    	border-radius: .5em;	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }

    Code:
    .blue {
    	color: #d9eef7;
    	border: solid 1px #0076a3;
    	background: #0095cd;
    	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    }
    I have several buttons in other boxes that behave as they should but these on top adopt different shapes and sizes and I think this is because there two sets of instructions involving webkit. However, I cannot see anything about width in the last code above that should contradict the css code for the box in question:

    Code:
    div .panel1 {
    	border: solid 1px #CCCCCC;
    	background-color: #ffffe7;
    	padding: 5px;
    	margin: 9px 2px 15px 7px;
            height:190px;
            width:83%;
            text-align: center;
    
    
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-box-sizing: border-box;
    
         -moz-border-radius-topright: 20px;
     border-top-right-radius: 20px;      
    }
    Can you help, explain what is happening so that I can try and solve it? I expect there is a conflict between the lines I highlighted in red, but I don't know what to do now...

    Thank you


    PS _ Maybe it is better to give the full css coes dor this paert of the sidebar:

    Code:
    #right {
        background-color:#FFE4C4;
        float: right;
        width: 170px;
        height:1000px; 
         margin-top:10px;  
         -moz-border-radius-topright: 20px;
     border-top-right-radius: 20px; 
         -moz-border-radius-bottomright: 20px;
     border-bottom-right-radius: 20px;  
          
    }
    
    .button {
    	display: inline-block;
    	outline: none;
    	cursor: pointer;
    	width: 100px;
    	height: 18px;
    	text-align: center;
    	text-decoration: none;
    	font: 14px/100% Arial, Helvetica, sans-serif;	
    	padding: .5em 2em .55em;
    	text-shadow: 0 1px 1px rgba(0,0,0,.3);
    	-webkit-border-radius: .5em; 
    	-moz-border-radius: .5em;
    	border-radius: .5em;
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .button:hover {
    	text-decoration: none;
    }
    .button:active {
    	position: relative;
    	top: 1px;
    }
    
    /* blue */
    .blue {
    	color: #d9eef7;
    	border: solid 1px #0076a3;
    	background: #0095cd;
    	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    }
    .blue:hover {
    	background: #007ead;
    	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
    }
    .blue:active {
    	color: #80bed6;
    	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
    }
    
    div .panel1 {
    	border: solid 1px #CCCCCC;
    	background-color: #ffffe7;
    	padding: 5px;
    	margin: 9px 2px 15px 7px;
            height:190px;
            width:83%;
            text-align: center;
    
    
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-box-sizing: border-box;
    
         -moz-border-radius-topright: 20px;
     border-top-right-radius: 20px; 
         
    }
    
    #right #converter {
            width: 90%;
            margin-left:auto;
            margin-right:auto;
            margin-top: -10px;
    }
    
    
    div .panel2 {
    	border: solid 1px #CCCCCC;
    	background-color: #ffffe7;
    	margin:12px 1px 8px 8px;
            height:100px;
            width:83%;
            text-align: center;
            padding:5px;
    }
    
    div .panel2 a{
     float:left;
     padding-left:10px;
        }
    and the html

    Code:
      <div id="right">
        
        <div class="panel1">
    
    <h3>Popular Destinations</h3>
    <br>
    <a href="" class="button blue">Bali</a>
    
    <a href="" class="button blue">Java</a>
    
    
    </div><!-- close panel1 -->
    
    <div class="panel2">
    <h3>Public holidays</h3>
    <a href="" class="button blue">Public holidays</a>
    <a href="" class="button blue">Opening times</a>
    
    </div><!-- close panel2 -->
    
        <div id="converter">
    
    <!-- deleted converter script -->
    
    </div><!-- close converter -->
      
    <div class="panel2">
    
    <h3>Visa Information</h3>
    
    <a href="http://www.embassyofindonesia.org/consular/voa.htm" class="button blue">Visa on arrival</a>
    <a href="http://www.indonesianembassy.org.uk/consular/consular_visa_type_tourist.html" class="button blue">Visa application</a>
    
    
    </div><!-- close panel2 -->
    
    <div class="panel2">
    
    <h3>Health Advice</h3>
    
    <a href="" class="button blue">Vaccinations</a>
    
    <a href="http://www.fitfortravel.scot.nhs.uk/destinations/asia-(east)/indonesia.aspx" class="button blue">UK Government</a>
    
    </div><!-- close panel2 -->
    Attached Thumbnails Attached Thumbnails webkit-buttons.jpg  
    Last edited by qim; 05-04-2013 at 03:49 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,210
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Here's a start. Changed code is highlighted:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style type="text/css">
    #right {
    	background-color:#FFE4C4;
    	float: right;
    	width: 170px;
    	height:1000px;
    	margin-top:10px;
    	-moz-border-radius-topright: 20px;
    	border-top-right-radius: 20px;
    	-moz-border-radius-bottomright: 20px;
    	border-bottom-right-radius: 20px;
    }
    .button {
    	display: inline-block;
    margin-bottom: 15px;
    //outline: none;
    	cursor: pointer;
    	width: 100px;
    	height: 18px;
    	text-align: center;
    	text-decoration: none;
    	font: 14px/100% Arial, Helvetica, sans-serif;
    	padding: .5em 2em .55em;
    	text-shadow: 1px 1px rgba(0,0,0,.3);
    	-webkit-border-radius: .5em;
    	-moz-border-radius: .5em;
    	border-radius: .5em;
    	-webkit-box-shadow: 1px 2px rgba(0,0,0,.2);
    	-moz-box-shadow: 1px 2px rgba(0,0,0,.2);
    	box-shadow: 1px 2px rgba(0,0,0,.2);
    }
    .button:hover {
    	text-decoration: none;
    }
    .button:active {
    	position: relative;
    	top: 1px;
    }
    /* blue */
    .blue {
    	color: #d9eef7;
    	border: solid 1px #0076a3;
    	background: #0095cd;
    	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    	background: -moz-linear-gradient(top, #00adee, #0078a5);
    	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr= '#00adee', endColorstr= '#0078a5');
    }
    .blue:hover {
    	background: #007ead;
    	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
    }
    .blue:active {
    	color: #80bed6;
    	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
    }
    div .panel1 {
    	border: solid 1px #CCCCCC;
    	background-color: #ffffe7;
    	padding: 5px;
    	margin: 9px 2px 15px 7px;
    //height:190px;
    	height:175px;
    	width:83%;
    	text-align: center;
    //box-sizing: border-box;
    //-moz-box-sizing: border-box;
    //-webkit-box-sizing: border-box;
    	-moz-border-radius-topright: 20px;
    	border-top-right-radius: 20px;
    }
    #right #converter {
    width: 90%;
    margin:auto;
    margin-top: -10px;
    }
    div .panel2 {
    border: solid 1px #CCCCCC;
    background-color: #ffffe7;
    padding:5px;
    margin:12px 1px 8px 8px;
    //height:100px;
    height:147px;
    width:83%;
    text-align: center;
    }
    div .panel2 a{
    float:left;
    padding-left:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="right">
    	<div class="panel1">
    		<h3>Popular Destinations</h3>
    		<a href="" class="button blue" style="width:80px;">Bali</a>
    		<a href="" class="button blue" style="width:80px;">Java</a>
    	</div><!-- close panel1 -->
    	<div class="panel2">
    		<h3>Public holidays</h3>
    		<a href="" class="button blue">Public holidays</a>
    		<a href="" class="button blue">Opening times</a>
    	</div>
    	<div id="converter">
    
    	</div>
    	<div class="panel2">
    		<h3>Visa Information</h3>
    		<a href="http://www.embassyofindonesia.org/consular/voa.htm" class="button blue">Visa on arrival</a>
    		<a href="http://www.indonesianembassy.org.uk/consular/consular_visa_type_tourist.html" class="button blue">Visa application</a>
    	</div>
    	<div class="panel2">
    		<h3>Health Advice</h3>
    		<a href="" class="button blue">Vaccinations</a>
    		<a href="http://www.fitfortravel.scot.nhs.uk/destinations/asia-(east)/indonesia.aspx" class="button blue">UK Government</a>
    	</div>
    </div>
    </body>
    </html>

  • #3
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi sunfighter

    many thanks for looking at it.

    Your reeply mentions that changes are highlighted but there are aothers that are not. Should I change ony yjr highlighted?

    For instance in .button you changed the height and deleted the "0" in the webkit shadow

    PS- I made only the changes highlighted and I'm afraid it didn't work. See the result

    I have been wondering if this something to do with the fact that the buttons have padding that is being added to the padding of the boxes. It seems strange to me that the panels being over 140px have difficulty accommodating the buttons which are now set at 105px
    I'm just doing some test and right now I lost the footer that shrunk for unknown reasons...

    if you like I can give you an url (temporary) to have a lok at it in pintotours.net/Forum/portugal.html
    Attached Thumbnails Attached Thumbnails webkit-buttons.jpg  
    Last edited by qim; 05-05-2013 at 09:22 PM.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,210
    Thanks
    23
    Thanked 605 Times in 604 Posts
    OK change the height. leave your webkit shadow alone.

    The code by it's self should look ok, not great but a start. But nothing like the image you show. Try running the script I sent and you will see they are different. I could not find why the BALI JAVA buttons were longer than they should be, that's why I cheated and use inline on them.

    Maybe a little while before I can look at site, but I will. Company over for a couple of days.

  • #5
    qim
    qim is offline
    Regular Coder
    Join Date
    Mar 2013
    Location
    Andorra
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear sunfighter

    Many thanks for your help. However, after many hours scratching my head and getting nowhere, I decided I did not like the buttons, anyway, and have now deleted them and chose something else.

    So, don't waste any more time on this on my account.

    Thanks again

    qim


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •