So I am making a Flask web app and I have a nav bar. The background color of this navbar reaches to both horizontal ends of the page. How could I change this so that the background color is only behind the content? Any help would be much appreciated.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{url_for('static', filename = 'css/base.css')}}">
<link rel="shortcut icon" href="#" type="image/x-icon">
{% block head %}{% endblock %}
</head>
<body>
<div class="navBar">
<div id="flex-container">
<button class = "navButton" onclick = "window.location.href='main'">Main Page</button>
<button class = "navButton" onclick = "window.location.href='user'">User</button>
<button class = "logIO navButton" onclick = "window.location.href='login'"">Login</button>
<button class = "logIO navButton" onclick = "window.location.href='logout'">Logout</button>
</div>
</div>
{% block body %}{% endblock %}
</body>
CSS:
*{
margin:0;
padding:0;
}
html{
background-color: thistle;
}
.navBar{
background-color: darkslategrey;
}
#flex-container{
display:flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
flex-direction: row;
border-radius: 13px;
position:relative;
}
.navButton {
padding:10px 20px;
margin:8px;
font-family: Georgia, 'Times New Roman', Times, serif;
border: none;
box-shadow: rgb(133, 131, 131) 3px 3px;
}
.navButton:hover{
box-shadow: rgb(104, 101, 101) 5px 5px;
}
Is this what you are looking to do?
I simply added this code to your navbar:
display: block; <!--convert div to block element-->
max-width: 90%; <!--make div 90% width of container -->
margin: 0 auto; <!--center the div -->
*{
margin:0;
padding:0;
}
html{
background-color: thistle;
}
.navBar{
margin: 0 auto;
display: block;
max-width: 90%;
background-color: darkslategrey;
}
#flex-container{
display:flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
flex-direction: row;
border-radius: 13px;
position:relative;
}
.navButton {
padding:10px 20px;
margin:8px;
font-family: Georgia, 'Times New Roman', Times, serif;
border: none;
box-shadow: rgb(133, 131, 131) 3px 3px;
}
.navButton:hover{
box-shadow: rgb(104, 101, 101) 5px 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{url_for('static', filename = 'css/base.css')}}">
<link rel="shortcut icon" href="#" type="image/x-icon">
{% block head %}{% endblock %}
</head>
<body>
<div class="navBar">
<div id="flex-container">
<button class = "navButton" onclick = "window.location.href='main'">Main Page</button>
<button class = "navButton" onclick = "window.location.href='user'">User</button>
<button class = "logIO navButton" onclick = "window.location.href='login'"">Login</button>
<button class = "logIO navButton" onclick = "window.location.href='logout'">Logout</button>
</div>
</div>
{% block body %}{% endblock %}
</body>
Related
Only body styling work in django, I use static files to get css. I tried even commenting out body part css, but it still works, I don't know how, I don't know why, please help! (I've used collectstatic, so it's not because of that). I've inserted static_root and url and other things in setting to, but it didn't help either.
body{
max-width: 1080px;
margin: auto;
background: #8D7D77;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* ----------------------------------------------NAV-BAR-UPPER------------------------------------------ */
.nav-bar{
display: flex;
flex-direction: row;
padding-top: 20px;
}
.nav-bar img{
max-width: 150px;
margin-left: 20px;
}
.nav-bar ul{
list-style: none;
display: flex;
flex-direction: row;
}
.nav-bar ul li{
margin-right: 15px;
}
.nav-bar ul a{
text-decoration: none;
color: white;
font-size: 20px;
margin-left: 80px;
padding: 10px 20px 10px 20px;
border: solid 1px;
border-radius: 10px;
}
.nav-bar ul a:hover{
text-decoration: none;
color: #8D7D77;
background-color: white;
}
.search-bar{
width: 600px;
height: 40px;
margin-top: 10px;
margin-left: 50px;
border-radius: 5px;
border-width: 1px;
border-color: #C2B280;
font-size: 110%;
}
.search-bar:focus{
border-style:none;
}
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="{% static 'styles/main.css' %}" />
<link rel="icon" href="{% static 'images/logomogo.png' %}" />
<title>BookShelf</title>
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
{% endblock content %}
</body>
</html>
And here's navbar
{% load static%}
<header>
<div class="nav-bar">
<a href="">
<img src="{% static 'images/logo-white.png' %}" alt="BookShelf Logo" />
</a>
<input type="search" class="search-bar" placeholder="Search">
<nav>
<ul>
<li>Login</li>
</ul>
</nav>
</div>
</header>
<div class="lower-nav-bar">
<nav>
<ul>
<li>Books</li>
<li>Reviews</li>
<li>Users</li>
<li>About</li>
</ul>
</nav>
</div>
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
{% load static %}
<link rel="stylesheet" href="{% static 'input.css' %}">
<link rel="stylesheet" href="css/cool.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<title>HealthEz</title>
</head>
<body>
<h1 class="heading">Create your list</h1>
<div class="form">
<form action="/addItem/" method="POST">
{% csrf_token %} <br>
<input type="text" name="name" autocomplete="off" id="foodInput"required>
<br>
<input class="button" type="submit" id="add" value="Enter">
<label for="name" class="label-name" >
<span class="content-name">Input</span>
</label>
</form>
</div>
<ul id="Food List">
{% for list_item in all_items %}
<li>{{ list_item.content }}</li>
<form action="/deleteItem/{{list_item.id}}" style="display:inline;" method="POST">{% csrf_token %}
<input type="submit" value="X">
</form>
{% endfor %}
</ul>
</body>
</html>
-----
CSS
body {
height: 60vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
font-family: 'Poppins', sans-serif;
background: aqua;
}
.form{
width: 50%;
position: relative;
height: 50px;
}
.form input{
width: 100%;
height: 100%;
color: black;
padding-top: 20px;
border: none;
}
.form label{
position: absolute;
bottom: 0px;
left: 0%;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
}
.form label::after{
content:"";
position: absolute;
left: 0px;
bottom: -1px;
height: 100%;
width: 100%;
border-bottom: 3px solid aqua;
transition: all 0.3s ease;
}
.form{
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3s ease;
}
.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name{
transform: translateY(-150%);
font-size: 14px;
color: aqua;
}
.form input:focus + .label-name::after,
.form input:valid + .label-name::after {
transform:translateX(0%);
}
I am trying to create a form input similar to https://www.youtube.com/watch?v=IxRJ8vplzAo and I can not figure out why I can not do it. Im very new and was wondering if someone could help guide me, please? I have tried creating separate divs and etc but can not get it to work. Thank you for any help.
it should be <link rel="stylesheet" href="{% static 'css/cool.css'%}"> you forgot to add {% static ''%} there
{% load static %}
<link rel="stylesheet" href="{% static 'input.css' %}">
<link rel="stylesheet" href="{% static 'css/cool.css'%}">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
I have a css stylesheet that successfully changes the background color of the page. However, the properties I have set on my and tags do not work.
{% block body %}
<div id='title'>
<h1>
VISUALIZER2D
</h1>
</div>
<form class='formclass' action='/' method='post'>
<div class='input'>
<input name='link' placeholder='Enter YouTube URL' type ='text'>
</div>
<div>
<button type='submit'>Next</button>
</div>
</form>
{% endblock %}
and my css stylesheet
body
{
background-color: #252C3E;
text-align: 'center';
font-family: 'Courier'
}
.formclass
{
border-radius: 8px;
}
.input
{
font-size: 2em;
height: 90px;
width: 190px;
}
#title
{
color: white;
}
Why is the background color the only property being applied?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- || METADATA || -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- || STYLESHEETS || -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<!--
Page
title
--
/>
<title>Wtitle</title>
<!-- || CSS || -->
<style>
body {
padding: 20px;
display: inline-block;
background-color: #252c3e; /* Works | Changes background color */
/* text-align: "center"; Invalid Property Value */
font-family: "Courier"; /* Works | Changes font family */
}
.formclass {
padding: 5px;
border: 2px solid #73ad21;
background-color: white;
border-radius: 8px;
width: 405px;
text-align: left; /* Changes position of "Next" button */
}
.input {
font-size: 2em;
height: 90px;
/* width: 195px; Don't need this */
}
#title {
color: white;
width: 410px;
text-align: center;
}
</style>
</head>
<body>
<!-- || BODY || -->
<div id="title">
<h1>
VISUALIZER2D
</h1>
</div>
<form class="formclass" action="/" method="post">
<div class="input">
<input name="link" placeholder="Enter YouTube URL" type="text" />
</div>
<div>
<button type="submit">Next</button>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- || METADATA || -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- || STYLESHEETS || -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<!--
Page
title
--
/>
<title>Wtitle</title>
<!-- || CSS || -->
<style>
body {
padding: 20px;
display: inline-block;
background-color: #252c3e; /* Works | Changes background color */
/* text-align: "center"; Invalid Property Value */
font-family: "Courier"; /* Works | Changes font family */
}
.formclass {
padding: 5px;
border: 2px solid #73ad21;
background-color: white;
border-radius: 8px;
width: 405px;
text-align: left; /* Changes position of "Next" button */
}
.input {
font-size: 2em;
height: 90px;
/* width: 195px; Don't need this */
}
#title {
color: white;
width: 410px;
text-align: center;
}
</style>
</head>
<body>
<!-- || BODY || -->
<div id="title">
<h1>
VISUALIZER2D
</h1>
</div>
<form class="formclass" action="/" method="post">
<div class="input">
<input name="link" placeholder="Enter YouTube URL" type="text" />
</div>
<div>
<button type="submit">Next</button>
</div>
</form>
</body>
</html>
Not sure exactly what you're going for, but I think this should help you get going in the right direction. It looks like you're trying to modify values that don't exist. You can round the edges of a border if there is no border. You have to create one for your form.
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 0px;
}
p, i {
margin-right: 50px;
}
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 0px 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
<script src="script.js"></script>
</body>
</html>
I am wanting to matching the height of the borders to the amount of padding I have set for my i element. Here is a jsfiddle visualizing how it looks.
What I have done so far is set the height to 100%, given the container div and i element a box-sizing: border-box property, but they have not worked. How can I proceed?
To be specific to your answer,
Remove padding from container
Assign padding to i
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
/*REMOVED FROM HERE*/
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
p,
i {
margin-right: 50px;
}
/*ADDED HERE*/
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
</body>
</html>
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
.container {
display: flex;
background: royalblue;
width: 300px;
align-items: center;
justify-content: center;
margin: auto;
}
.box {
display: flex;
padding: 10px;
flex: 1;
justify-content: center;
}
.playButton {
border-left: 2px solid white;
border-right: 2px solid white;
}
.playButton:hover {
background-color: rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div class="container">
<div class="box">
<p>Blank</p>
</div>
<div class="playButton box">
<i id="playButton" class="fas fa-play fa-2x"></i>
</div>
<div class="box">
<p>Reset</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
You have to remove the padding from the #container div and place the 10px top and bottom padding to your i element otherwise your left and right border height will always be less than the #container div.
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
p, i {
margin-right: 50px;
}
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 10px 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
<script src="script.js"></script>
</body>
</html>
does anybody know why there is a gap between my banner and navbar? This gap appears in Edge and Chrome, but not Firefox.
I've reduced all of the margins, that I can think of, to 0. Doing this removed the gap in Firefox but not the other browsers.
I've used Chrome and Edge's developer tools to inspect the gap and it actually falls under the .wrapper class. This is the parent of both the .navbar and .banner, so I can't figure out what is causing its meaningless existence!
What it should look like - i.e Firefox
What it looks like in Edge and Chrome
HTML:
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
<meta name = "viewport" content="width=device-width", initial-scale=1>
<link rel="icon" href="favicon.ico">
<title>{% block title %}MyBlog Title{% endblock title %}</title>
<link href="{% static 'reset.css' %}" rel="stylesheet">
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700" rel="stylesheet">
<!-- MyBlog custom styles -->
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% render_block "css" %}
</head>
<body>
<div class="wrapper">
<!--<div class="blog-header"></div>-->
<div class ="banner">
<h1 id="logo">Patch's Soapbox </h1>
<!--<img class = "blog-header" src="../../media/images/banner.png">-->
</div>
{% cms_toolbar %}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<img src="{% static '#' %}"/>-->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 0 100 "menu.html" %}
</ul>
</div>
</div>
</nav>
<div class="container-full">
{% block content %}{% endblock content %}
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container-full">
<p class="text-muted">{% block footer %}Patch The Bill© 2015{%endblock footer%}</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
<script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>
{% render_block "js" %}
</body>
</html>
CSS:
html {
position : relative;
min-height: 100%;
margin: 0;
padding: 0;
height: 100%;
}
body {
/* Margin bottom by footer height */
/*margin-bottom: 60px;*/
font-family : Georgia, "Times New Roman", Times, serif;
color: #555;
width: 100%;
height: 100%;
min-height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height:100%;
margin-bottom:-60px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
font-weight: normal;
color: #333;
}
.footer,.push {
height:50px;
}
.footer {
position: absolute;
clear:both;
padding-bottom:0;
padding-left : 0px;
bottom: 0;
width: 100%;
min-height: 60px;
height:100%;
background-color: #f5f5f5;
}
footer.footer {
position: relative;
bottom: 0;
width: 100%;
}
.blog-header {
display: block;
width: 100%;
border-style: solid;
/*border-bottom: solid #C6C6C6*/
}
.container-full {
margin: 0 auto;
width: 100%;
padding: 0;
}
.blog-title {
margin-top: 0px;
width: 500px;
margin-bottom: 0;
font-size: 28px;
font-weight: normal;
}
.blog-description{
font-size: 20px;
color: #999;
}
.sidebar-module{
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
margin-bottom: 0;
}
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
.blog-post{
margin-bottom: 60px;
}
.blog-post-title{
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color : #999;
}
body > container {
padding: 0px 0px 0;
}
.container .text-muted {
margin: 0 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 0;
bottom:0;
}
.row {
margin-right: 0px!important;
}
.navbar { margin-bottom: 0;
margin-top: 0;
padding-top:0
}
.footer { margin-bottom: 0;}
.banner {background-color: green;
min-height: 120px;
padding-bottom:0
}
#logo {
position: relative;
bottom: -50px;
text-align:right;
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 50px
}
Use -webkit-padding-before for top padding, -webkit-padding-after for bottom padding.
(Top) - -webkit-padding-before
(Right - -webkit-padding-end
(Bottom) - -webkit-padding-after
(Left) - -webkit-padding-start
see document on browser specific hacks
https://css-tricks.com/snippets/css/browser-specific-hacks/
or maybe could try this media query:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* rules only apply in saf3+, chrome1+ */
}