In below Image td A and td B has "lined" and "thick" class. When I apply lines and thickes to BCD the format in table becomes messed-up. Why?
All images and code are below.
When I add "lined" and "thick" class in td C. It display like this:
When I add "lined" and "thick" class in td D. It will display like this:
.
Forgive for my poor English. I'm Taiwanese.
My code is in image and script-form for Css and HTML here below:
.
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Fira+Sans);
#import url(https://fonts.googleapis.com/css?family=Montserrat);
#import url(https://fonts.googleapis.com/css?family=Droid+Sans);
.button-Blue {
background-color: #3498DB;
box-shadow: 0px 15px 0px 0px #258cd1;
text-align: center;
padding: 10px;
padding-bottom: 5px;
color: white;
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
display: block;
width: 200px;
text-decoration: none
}
.button-Blue:hover {
color: white;
background-color: #49abed;
box-shadow: 0px 15px 0px 0px #439cd8;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Blue:active {
color: white;
background-color: #49abed;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #439cd8;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-Yellow {
background-color: #edeb5e;
box-shadow: 0px 15px 0px 0px #d6d34f;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Yellow:hover {
color: black;
background-color: #f4f273;
box-shadow: 0px 15px 0px 0px #e0df64;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Yellow:active {
color: black;
background-color: #f4f273;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #e0df64;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.tableShadow {
box-shadow: 0px 3px 2px #999;
}
.button-Green {
background-color: #51d166;
box-shadow: 0px 15px 0px 0px #4dc160;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Green:hover {
color: black;
background-color: #62db76;
box-shadow: 0px 15px 0px 0px #5ace6d;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Green:active {
color: black;
background-color: #62db76;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #5ace6d;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-Orange {
background-color: #e0a32a;
box-shadow: 0px 15px 0px 0px #cc9324;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Orange:hover {
color: black;
background-color: #edb038;
box-shadow: 0px 15px 0px 0px #db9e29;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Orange:active {
color: black;
background-color: #edb038;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #db9e29;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-White {
background-color: #dee2e2;
box-shadow: 0px 15px 0px 0px #d6dbdb;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-White:hover {
color: black;
background-color: #eaeded;
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-White:active {
color: black;
background-color: #eaeded;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-White {
background-color: #dee2e2;
box-shadow: 0px 15px 0px 0px #d6dbdb;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-White:hover {
color: black;
background-color: #eaeded;
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-White:active {
color: black;
background-color: #eaeded;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-Purple {
background-color: #aa6ae2;
box-shadow: 0px 15px 0px 0px #985dcc;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Purple:hover {
color: black;
background-color: #ba7bf2;
box-shadow: 0px 15px 0px 0px #ac70e0;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Purple:active {
color: black;
background-color: #ba7bf2;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #ac70e0;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-border-Blue {
cursor: pointer;
border-radius: 5px;
text-decoration: none;
padding: 7px;
font-size: 22px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
color: #55acee;
border: 2px #55acee solid;
text-align:center;
}
.button-border-Blue:hover {
background-color: #55acee;
color: #fff;
text-decoration: none
}
.button-border-Red {
cursor: pointer;
border-radius: 5px;
text-decoration: none;
padding: 7px;
font-size: 22px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
color: #e74c3c;
border: 2px #e74c3c solid;
text-align: center;
}
.button-border-Red:hover {
color: #fff;
background-color: #e74c3c;
text-decoration: none
}
.lined.thick {
border: solid 4px #41403E;
-ms-flex-item-align: center;
align-self: center;
background: transparent;
padding: 1rem 1rem;
text-align: center;
font-size: 18px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
color: #41403E;
font-size: 2rem;
letter-spacing: 1px;
outline: none;
-webkit-box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
min-height: 100%;
}
<!-- begin snippet: js hide: false console: true babel: false -->
#model IEnumerable<WebApplication8.Models.Quest>
#{
ViewBag.Title = "Index";
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
padding:6px;
}
td, th {
border: 1px solid #ccc;
text-align: center;
}
.remark {
word-break: break-all;
overflow-x: hidden;
max-width: 100px;
}
.scrollDiv{
overflow:scroll;
max-height:300px;
}
##media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
.remark {
max-width: 100%;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
}
/*
Label the data
*/
td:nth-of-type(1):before {
content: "試卷名稱";
font-weight: bold;
}
td:nth-of-type(2):before {
content: "操作";
font-weight: bold;
}
td:nth-of-type(3):before {
content: "題目數量";
font-weight: bold;
}
td:nth-of-type(4):before {
content: "備註";
font-weight: bold;
}
td:nth-of-type(5):before {
content: "狀態";
font-weight: bold;
}
}
.coordinate {
width: 64px;
float: left;
margin-left: 5px;
padding: 2px;
white-space: pre-line
}
.coordinate2{
margin-bottom:0px;
}
</style>
<link rel="stylesheet" href="~/MyCss/style.css"/>
<div class="">
<p>
<a style="font-size:20px;text-decoration:none;color:white" class="button-Blue" href="/Quests/Create?ClassId=#ViewBag.ClassId">新增試卷</a><!--test-->
</p>
#if (ViewBag.authError != null)
{
<h2 style="color:darkred">權限不足無法進入</h2>
}
<div class="scrollDiv">
<table class="tableShadow">
<thead><tr><th>試卷名稱</th><th>操作</th><th>題目數量</th><th>備註</th><th>狀態</th></tr></thead>
#foreach (var item in Model.Where(x => x.clas.id == ViewBag.ClassId && x.status.Equals("未作答")))
{
<tr>
<td style="width:inherit" class="lined thick">
#Html.DisplayFor(modelItem => item.name)
</td>
<td style="width:25%">
#Html.ActionLink("試卷\n列表", "Edit", new { id = item.id },new { #class = "button-Green coordinate" })
#Html.ActionLink("試卷\n內容", "Details", new { id = item.id }, new { #class = "button-Orange coordinate" })
#Html.ActionLink("題目\n列表", "QuestionsList", new { id = item.id }, new { #class = "button-Purple coordinate" })
#Html.ActionLink("刪除\n試卷", "Delete", new { id = item.id }, new { #class = "button-White coordinate" })
</td>
<td class="lined thick" style="width:inherit">
#item.questions.Count()
</td>
<td class="lined thick" >
#if (item.remark == null)
{
#:nothing
}
else
{
#item.remark
}
</td>
<td class="lined thick">
#item.status
</td>
</tr>
}
</table>
</div>
<p>
<h2 class="lined thick"><b>已作答試卷</b></h2>
</p>
<div class="scrollDiv">
<table>
<thead><tr><th>試卷名稱</th><th>操作</th><th>題目數量</th><th>備註</th><th>狀態</th></tr></thead>
#foreach (var item in Model.Where(x => x.clas.id == ViewBag.ClassId && x.status.Equals("已作答")))
{
<tr>
<td style="width:40%" class="lined thick">
#Html.DisplayFor(modelItem => item.name)
</td>
<td style="width:25%">
#Html.ActionLink("編輯試卷", "Edit", new { id = item.id }) |
#Html.ActionLink("試卷內容", "Details", new { id = item.id }) |
#Html.ActionLink("題目列表", "QuestionsList", new { id = item.id })
|#Html.ActionLink("刪除試卷", "Delete", new { id = item.id })
</td>
<td class="lined thick">
#item.questions.Count()
</td>
<td class="remark lined thick" style="width:20%">
#if (item.remark == null)
{
#:nothing
}
else
{
#item.remark
}
</td>
<td class="lined thick">
#item.status
</td>
</tr>}
</table>
</div>
<div>
#Html.ActionLink("返回", "ClassIndex", new { id = ViewBag.CourseId })
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
function myFunction() {
var x = $(window).width();
document.getElementById("demo").innerHTML = x;
}
</script>
}
Image that I want to display
The result that I want is I want this two td display like left td.
But when I add the "lined" and "thick" class to this two td. The table will display like [Image2],[Image3]
It seems that you are probably setting the css class to tr instead of td. Please correct and it should resolve the error.
Please provide the code and I can check it
Maybe you can try to add on a div inside
Like this:
<td style="width:40%">
<div class="lined thick">
#Html.DisplayFor(modelItem => item.name)
</div>
</td>
Because the webkit is overwriting the display for table, while in table, display should be table cell. So try not to overwrite the table cell
I am trying to create a responsive HTML email template but I am having a little trouble figuring out how to get my elements to position themselves they way I want.
In my code below, you will see I have an image next to some text.
When the screen gets to a small size (< 700px) I want the image to go above the text. Not below like it currently does.
The current header section will not center over the entire row. It stays more left aligned:
<tr>
<td align="center">
<h3>Thank you for reserving your deal with us!</h3>
</td>
</tr>
Same goes for my horizontal row:
<tr>
<td>
<hr>
</td>
</tr>
I can visually see the tr takes the whole width but the elements will not expand to fill them. Why is that?
My code:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #e7e7e7;
}
#parentTable {
background-color: fff;
margin: auto;
border-bottom: 10px solid #007dc3;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
td {
padding: 10px;
}
.row td {
padding: 10px 20px;
}
.para {
font-family: inherit;
line-height: 22px;
font-weight: 300;
color: #3b3b3b
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.code {
background-color: #007dc3;
color: white;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
.code td {
padding: 10px;
text-align: center;
}
.view-deal-button {
color: fff;
background-color: #007dc3;
font-family: inherit;
font-size: 15px;
}
.vehilce-img {
position: relative;
}
.vehicle-img img {
width: 400px;
}
.contact {
font-size: 15px;
padding: 5px;
}
#trademark {
text-align: center;
padding: 8px;
font-size: 9px;
margin: auto;
color: #3b3b3b;
}
#media only screen and (max-width: 700px) {
.wrapper table {
width: 100%;
}
.wrapper .column {
width: 100%;
display: block;
}
}
<table id="parentTable" width="100%" style="background: #fff">
<tr>
<td class="wrapper" width="600" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<h3>Thank you for reserving your deal with us!</h3>
</td>
</tr>
<tr>
<td class="column" width="600">
<table>
<tr class="code">
<td>
Your Personalised Code: <b>JNk1u7</b>
</td>
</tr>
<tr class="row">
<td class="para">
Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up
</td>
</tr>
<tr class="row">
<td align="center">
<button class="view-deal-button btn" type='button'>View Your Deal</button>
</td>
</tr>
<tr class="row">
<td class="para">
Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!
</td>
</tr>
<tr>
<td class="para">
John Smith<br> General Sales Manager<br>
</td>
</tr>
</table>
</td>
<td class="column" width="300">
<table>
<tr>
<td align="center" class="vehicle-img">
<img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
</table>
</td>
</tr>
</table>
View on JSFiddle
I'll address your second point first. The table inside .wrapper has two columns (class="column"), but the first and last rows have only one column and they are not set to span two. That causes problems with the table layout. Here's an example using colspan:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #e7e7e7;
}
#parentTable {
background-color: fff;
margin: auto;
border-bottom: 10px solid #007dc3;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
td {
padding: 10px;
}
.row td {
padding: 10px 20px;
}
.para {
font-family: inherit;
line-height: 22px;
font-weight: 300;
color: #3b3b3b
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.code {
background-color: #007dc3;
color: white;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
.code td {
padding: 10px;
text-align: center;
}
.view-deal-button {
color: fff;
background-color: #007dc3;
font-family: inherit;
font-size: 15px;
}
.vehilce-img {
position: relative;
}
.vehicle-img img {
width: 400px;
}
.contact {
font-size: 15px;
padding: 5px;
}
#trademark {
text-align: center;
padding: 8px;
font-size: 9px;
margin: auto;
color: #3b3b3b;
}
#media only screen and (max-width: 700px) {
.wrapper table {
width: 100%;
}
.wrapper .column {
width: 100%;
display: block;
}
}
<table id="parentTable" width="100%" style="background: #fff">
<tr>
<td class="wrapper" width="600" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center">
<h3>Thank you for reserving your deal with us!</h3>
</td>
</tr>
<tr>
<td class="column" width="600">
<table>
<tr class="code">
<td>
Your Personalised Code: <b>JNk1u7</b>
</td>
</tr>
<tr class="row">
<td class="para">
Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up
</td>
</tr>
<tr class="row">
<td align="center">
<button class="view-deal-button btn" type='button'>View Your Deal</button>
</td>
</tr>
<tr class="row">
<td class="para">
Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!
</td>
</tr>
<tr>
<td class="para">
John Smith<br> General Sales Manager<br>
</td>
</tr>
</table>
</td>
<td class="column" width="300">
<table>
<tr>
<td align="center" class="vehicle-img">
<img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<hr>
</td>
</tr>
</table>
</td>
</tr>
</table>
For your first point, I recommend restructuring to use a flexible box layout so that you can leverage flex-direction to reverse the element order at put the image first. Here's my suggestion:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #e7e7e7;
margin: 0;
}
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#container>div {
flex: 0 0 50%;
padding: 1em;
box-sizing: border-box;
text-align: center;
}
h3 {
text-align: center;
}
p {
text-align: left;
}
.responsive_image {
max-width: 100%;
}
.code {
background-color: #007dc3;
color: white;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
padding: 1em;
text-align: center;
}
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.view-deal-button {
color: fff;
background-color: #007dc3;
font-family: inherit;
font-size: 15px;
}
#media only screen and (max-width: 700px) {
#container {
flex-direction: column-reverse;
}
}
<h3>Thank you for reserving your deal with us!</h3>
<div id="container">
<div>
<p class="code">Your Personalised Code: <b>JNk1u7</b></p>
<p>Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up.</p>
<button class="view-deal-button btn" type='button'>View Your Deal</button>
<p>Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!</p>
<p>John Smith<br>General Sales Manager</p>
</div>
<div>
<img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg" class="responsive_image">
</div>
</div>
I realize that this method may not be reliable for email templates. In that case, you might be able to put the image first in your code and float it to the right on desktop.
I have implemented this calendar on mozilla firefox satisfactorily and when I try to view it on chrome, table doesn't fill all the parent section. The table height is the same as the parent section but it have moved a little bit to the bottom generating a white space between the section and the table.
Chrome:
Firefox:
In firefox works.
This is the code, you can try it on the demo and see the differences between chrome and firefox:
.right{
float:right !important;
}
.wz-ui-input[type="checkbox"] {
display: none;
}
.wz-ui-input {
background-color: #fcfeff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
color: #464646;
cursor: text;
font-size: 13px;
height: 28px;
padding: 0 10px;
width: 204px;
}
.wz-ui-input[type="checkbox"] + label i {
background: url("#static/checkbox_white.png") no-repeat scroll -17px 0 / 51px 17px rgba(0, 0, 0, 0);
display: inline-block;
height: 17px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 17px;
}
/* Shadow */
.hide {display:none;}
.abs {position:absolute; z-index: 3;}
.fullHeight{height:100%;}
.fullWidth{width:100%;}
.top{top:0;}
.dark{background-color:#999; background-color: rgba(123,123,123,0.7); opacity: 0.7;}
.center {text-align: center}
/* Calendar Top Bar */
.wz-ui-header{
width:100%;
height: 39px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #f1f1f1;
-webkit-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
background-image: -webkit-linear-gradient(bottom, #b83e38, #da605b);
background-image: -moz-linear-gradient(bottom, #b83e38, #da605b);
background-image: -o-linear-gradient(bottom, #b83e38, #da605b);
background-image: -ms-linear-gradient(bottom, #b83e38, #da605b);
background-image: linear-gradient(to top, #b83e38, #da605b);
}
.shadow-border{
height: 38px;
width:100%;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #fdfeff;
border: solid 1px rgba(0,0,0,.15);
}
.calendar-menu{
display:block;
float:left;
width:85%;
}
.calendar-menu li {
border-bottom: 2px solid transparent;
color: #e9b9b7;
display: inline-block;
font-size: 15px;
height: 28px;
margin: 0 11px;
padding: 8px 1px 0;
}
.calendar-menu li.active-type {
border-bottom: 3px solid #7ebe30;
color: #ffffff;
}
.calendar-menu li:hover {
border-bottom: 3px solid #fff;
}
.calendar-menu-nav{
width:auto;
float:left;
}
.calendar-menu-event-finder {
width:auto;
height: 21px;
padding: 5px 10px;
}
.calendar-menu-event-finder input{
width: 137px;
height: 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px rgba(0,0,0,.05);
border: solid 1px #a64440;
}
.calendar-buttons{
border-left: 1px solid #9f3e3a;
height: 100%;
width: 135px;
}
.wz-view-minimize, .wz-view-maximize, .wz-view-close, .close-image {
border: 1px solid transparent;
border-radius: 2px;
float: left;
height: 9px;
padding: 6px;
width: 10px;
margin: 9px 10px 10px;
}
.wz-view-minimize i{
background: url("#static/minimize.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-maximize i{
background: url("#static/enlarge.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-close i {
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.close-image i{
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
/* Calendar general */
.calendar-head {
background: none repeat scroll 0 0 #fff;
height: 35px;
}
#day-calendar, #week-calendar, #month-calendar{
display: none;
}
.calendar-active{
width: 100%;
height: 85%;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
display:block !important;
}
/* Calendar Modals */
#my-calendars-modal{
width: 210px;
height: 122px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
position: absolute;
display: none;
margin-left: 12px;
margin-top: 31px;
z-index: 2;
}
#my-calendars-modal .my-calendars-list {
margin-left: 11px;
margin-top: 11px;
}
#my-calendars-modal .my-calendars-list articles {
margin-bottom: 11px;
font-size: 13px;
}
#my-calendars-modal .calendar {
display: block;
width: 100% !important;
}
#my-calendars-modal .calendar i{
float: left;
}
#my-calendars-modal .calendar span figure {
border-radius: 4px;
float: left;
height: 8px;
margin-right: 5px;
position: relative;
top: 4px;
width: 8px;
}
#my-calendars-modal .deleteCalendar{
margin-right: 10px;
font-size: 12px;
color:#dc513a;
}
#work span figure{
background-color: #34aadc;
}
#office span figure{
background-color: #5856d6;
}
#home span figure{
background-color: #f79a03;
}
#my-calendars-modal .add-new-calendar{
text-align: center;
border-top: 1px solid #dadada;
width: 100%;
padding: 11px 0;
font-size: 13px;
}
#create-event-modal{
width: 289px;
height: 289px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 11.5%;
font-size:13px;
}
#create-calendar-modal{
width: 289px;
height: 198px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 17%;
font-size:13px;
}
#create-calendar-modal .calendar-name input{
width: 161px;
height: 26px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
border-radius: 3px;
}
#create-calendar-modal .calendar-name {
margin-left: 6%;
position: relative;
top: 32px;
float: left;
}
#create-calendar-modal .calendar-color {
margin-left: 9%;
position: relative;
top: 39px;
float: left;
}
#create-calendar-modal .calendar-color input{
width: 16px;
height: 12px;
}
#create-calendar-modal .calendar-description {
margin-left: 6%;
position: relative;
top: 49px;
float: left;
}
#create-calendar-modal .calendar-description textarea{
width: 260px;
height: 49px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
margin-top: 6px;
border-radius: 3px;
}
#create-calendar-modal .create-calendar-button{
width: 71px;
height: 23px;
background-color: #75d142;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 1px rgba(255,255,255,.3);
border: solid 1px #1b961b;
background-image: -webkit-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -moz-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -o-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -ms-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: linear-gradient(to top, #4e9c21, #7ebe30);
margin-right: 10px;
margin-top: 68px;
color: #fff;
border-radius: 4px;
}
#create-calendar-modal .close-image {
float: right;
left: 250px;
position: absolute;
top: -4px;
cursor: pointer;
}
#create-calendar-modal .close-image i{
cursor: pointer;
}
.my-calendars, .current-month, .create-event {
float: left;
font-size: 14px;
margin-left: 12px;
padding: 11px 0;
width: auto;
}
.my-calendars, .my-calendars span, .create-event, .my-calendars img, .current-month img, .create-event span, .create-event img, .add-new-calendar, .add-new-calendar img, .add-new-calendar span, .deleteCalendar{
cursor:pointer;
}
.current-month{
margin-left:29%;
}
.current-month span{
margin: 0 20px;
}
.create-event{
margin-right: 20px;
}
.calendar-body{
height: 481px;
}
.calendar-body table{
width:100%;
height: 100%;
background: white;
}
td.other-month-cell{
background: #f1f1f1;
}
.calendar-days th{
font-size: 14px;
}
thead{
height: 33px;
background-color: #f1f1f1;
border-bottom: solid 2px #cacaca;
}
tbody{
height: 443px;
}
/* Month calendar */
#month-calendar td, #month-calendar th {
border: 1px solid #dadada;
text-align: left;
width: 14.2857%;
}
#month-calendar td span {
top: 6px;
margin-left: 6px;
position: relative;
}
#month-calendar .calendar-day-bar th {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#month-calendar .day-selected{
background-color: rgba(126,190,48,.1);
border: solid 1px #7ebe30 !important;
}
#month-calendar .event {
color: #4a4a4a;
font-size: 12px;
font-weight: bold;
height: 18px;
margin-left: 2px;
padding-left: 4px;
padding-top: 4px;
position: absolute;
width: 125px;
}
#month-calendar .office{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #d1c4e9;
}
#month-calendar .event:nth-child(2){
margin-top: 10px;
display: block;
}
#month-calendar .event:nth-child(3){
margin-top: 32px;
display: block;
}
#month-calendar .event:nth-child(3)::after {
font-weight: 100;
content: '\A \A 5 more...';
white-space: pre;
color: #828282;
}
/* Week calendar */
#week-calendar td, #week-calendar th {
border: 1px solid #dadada;
text-align: left;
padding-left: 6px;
padding-top: 6px;
width: 12.5%;
}
#week-calendar .calendar-day-bar th, #week-calendar .calendar-day-bar td {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#week-calendar .hour-cell{
height: 41px;
}
/* Day calendar */
/* Images transformation */
.right-arrow{
transform: rotateY(180deg);
}
.wz-selectable, input, textarea, [contentEditable], [contentEditable] * {
cursor: text;
outline: medium none;
}
.wz-unselectable {
cursor: default;
}
[contentEditable] * {
color: inherit;
font-family: inherit;
}
link {
display: none;
height: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
b {
font-weight: bold;
}
ol, ul {
list-style: outside none none;
}
hr {
margin: 0;
padding: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
resize: none;
}
audio {
display: none;
height: 0;
}
<section class="calendar-head">
<section class="my-calendars">
<span>My calendars</span>
<img src="https://static.inevio.com/app/207/flechita.png" alt="">
</section>
<section class="current-month">
<img class="left-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
<span>September 2013</span>
<img class="right-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
</section>
<section class="create-event right" id="create-event">
<img src="" alt="+">
<span>Create new event</span>
</section>
<section id="my-calendars-modal">
<section class="my-calendars-list">
<articles id="work" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Work</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="office" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Office</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="home" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Home</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
</section>
<section class="add-new-calendar" id="add-new-calendar">
<img src="" alt="+">
<span>Add new calendar</span>
</section>
</section>
<section id="create-event-modal">
<figure class="close-image create-event-modal-close">
<i></i>
</figure>
<!-- Falta implementar -->
</section>
<section id="create-calendar-modal">
<figure class="close-image create-calendar-modal-close">
<i></i>
</figure>
<form>
<artricle class="calendar-name">
<input type="text" placeholder=" Name of calendar">
</artricle>
<artricle class="calendar-color">
<span>Color</span>
<input type="color">
</artricle>
<artricle class="calendar-description">
<span>Description</span><br>
<textarea></textarea>
</artricle>
<button type="submit" class="create-calendar-button right">Create</button>
</form>
</section>
</section>
<section id="month-calendar" class="calendar-body calendar-active">
<table>
<thead class="calendar-day-bar">
<tr class="title-row">
<th class="title-cell">Sunday</th>
<th class="title-cell">Monday</th>
<th class="title-cell">Thusday</th>
<th class="title-cell">Wednesday</th>
<th class="title-cell">Thursday</th>
<th class="title-cell">Friday</th>
<th class="title-cell">Saturday</th>
</tr>
</thead>
<tbody class="calendar-days">
<tr class="week-row">
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="day-cell"><span>1</span></td>
<td class="day-cell"><span>2</span></td>
<td class="day-cell"><span>3</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>4</span></td>
<td class="day-cell"><span>5</span></td>
<td class="day-cell"><span>6</span></td>
<td class="day-cell"><span>7</span></td>
<td class="day-cell"><span>8</span></td>
<td class="day-cell"><span>9</span></td>
<td class="day-cell"><span>10</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>11</span></td>
<td class="day-cell"><span>12</span></td>
<td class="day-cell"><span>13</span></td>
<td class="day-cell"><span>14</span></td>
<td class="day-cell">
<span>15</span>
<article class="event office"> Me voy a casar</article>
<article class="event"> Reunion con el jefe</article>
</td>
<td class="day-cell"><span>16</span></td>
<td class="day-cell"><span>17</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>18</span></td>
<td class="day-cell"><span>19</span></td>
<td class="day-cell"><span>20</span></td>
<td class="day-cell"><span>21</span></td>
<td class="day-cell day-selected"><span>22</span></td>
<td class="day-cell"><span>23</span></td>
<td class="day-cell"><span>24</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>25</span></td>
<td class="day-cell"><span>26</span></td>
<td class="day-cell"><span>27</span></td>
<td class="day-cell"><span>28</span></td>
<td class="day-cell"><span>29</span></td>
<td class="day-cell"><span>30</span></td>
<td class="day-cell"><span>31</span></td>
</tr>
</tbody>
</table>
</section>
I'd like to place a seconf line of text below the word "State". For some reason the second line of text ("of mind" in red) is placed way below the circle. Do you know what is causing this huge gap and how to fix it? Use of was not appropriate? Thanks
http://jsfiddle.net/7txCN/26/
HTML
<div class="circle text color-2 color2-box-shadow">
State<br> <span>of Mind</span>
</div>
CSS:
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 220px;
color: #FFF; border: 2px solid #fff;
line-height: 220px;
text-align: center;
font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.circle span {
color: red;
font-size: 22px;
}
I would suggest a slightly improved structure without any bare text nodes.
JSfiddle
HTML
NB. No break tags needed.
<div class="circle text color-2 color2-box-shadow">
<div class="text-wrap">
<span>State</span>
<span>of Mind</span>
</div>
</div
With this CSS
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 220px;
color: #FFF;
border: 2px solid #fff;
text-align: center;
font-family: Arial;
position: relative;
}
.color-1 {
background: #DD4814;
}
.color-2 {
background: #AEA79F;
}
.color-3 {
background: #5E2750;
}
.color1-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.color2-box-shadow {
box-shadow: 0px 0px 1px 1px #AEA79F
}
.color3-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.text-wrap {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.text-wrap span {
display: block;
}
.circle span:nth-child(2) {
color: red;
font-size: 22px;
}
The line-height vertical center technique doesn't work with multiple lines of text.
If the height and width of the circle are fixed, then create some of the height with the top and bottom padding to center the text in the middle.
The <br> can be removed if the span is given display: block.
Working Example
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 80px;
padding: 70px 0;
color: #FFF;
border: 2px solid #fff;
text-align: center;
font-family: Arial;
}
.color-1 {
background: #DD4814;
}
.color-2 {
background: #AEA79F;
}
.color-3 {
background: #5E2750;
}
.color1-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.color2-box-shadow {
box-shadow: 0px 0px 1px 1px #AEA79F
}
.color3-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.circle span {
color: red;
font-size: 22px;
display: block
}
<div class="circle text color-2 color2-box-shadow">
State <span>of Mind</span>
</div>
This may help:
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 220px;
color: #FFF; border: 2px solid #fff;
line-height: 100px;
text-align: center;
font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.circle span {
color: red;
font-size: 22px;
}
<div class="circle text color-2 color2-box-shadow">
State<br> <span>of Mind</span>
</div>
I'm having trouble finding out why the right section of the header goes under the left section when you zoom out in Safari, Chrome and Opera.
Here is the demo of the header.
If you open the demo in safari, chrome or opera you'll see that the right section of the header goes beneath the left section of the header.
I want to make the header stay in one line when you zoom out in different browsers.
Here is the code I have.
HTML:
<body class="body">
<div id="white-background">
<div class='top-head'>
<div class='left'>
<a class="logo"></a>
<div id="search">
<form id="searchbox">
<input type="text" id="search-bar" required placeholder="What are you looking for?">
<input type="submit" id="submit" value="Search">
</form> <!-- end of form id -->
</div> <!-- end of search id -->
</div> <!-- end of left class -->
<div class='right'>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="create-account">Create Account</a>
<div class="language-wrapper">
<a class="language-icon" href="#" alt="choose-your-language">Language
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
<a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
</div> <!-- end of right class -->
</div> <!-- end of top-head -->
</div><!-- end of white-background class -->
</div> <!-- end of body class -->
CSS:
#white-background {
width: 1024px;
height: 1400px;
background: white;
position: relative;
z-index: 0;
margin: 0 auto 30px auto;
}
.top-head{ height: 45px; }
.left{ padding-left: 15px; padding-top: 14px; float:left; }
.right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }
.logo {
background:url(http://placehold.it/140x20);
background-position: left top;
background-repeat: no-repeat;
width: 140px;
height: 20px;
display: block;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
#search {
position: relative;
margin-left: 150px;
bottom: 25px;
}
#search-bar {
display: inline-block;
box-shadow: 0px 1px 0px #f2f2f2;
background: #fff;
border: 1px solid #d3d3d3;
height: 26px;
padding-right: 80px;
padding-left: 5px;
color: #202020;
font-size: 12px;
font-family: 'Open Sans', Verdana, Arial;
}
#search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
#search-bar:active { border: 1px solid #d13030; }
#submit {
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8;
border: 1px solid #d3d3d3;
width: 80px;
height: 26px;
font-size: 12px;
font-weight: bold;
font-family: 'Open Sans', Verdana, Arial;
color: #656565;
}
#submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
#submit:active { background: #dcdcdc; color: #242424; }
.login {
font-weight: bold;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
box-shadow: 0px 1px 0px #f2f2f2;
text-decoration: none;
background: #f8f8f8;
}
.login:hover {
background: #f4f4f4;
box-shadow: 0px 1px 0px #e5e5e5;
}
.create-account {
font-weight: bold;
border: 1px solid #d13030;
color: #fff;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
background: #d13030 ;
}
.create-account:hover {
background: #c42d2d;
box-shadow: 0px 1px 0px #e5e5e5;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #202020;
}
.language-icon:hover .arrow-down:hover {
border-top: 5px solid #d13030;
}
.language-icon:hover .arrow-up {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.language-wrapper:hover .language-dropdown {
opacity: 1;
display: block;
}
.language-wrapper {
display: inline-block;
}
.language-icon {
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
position: relative;
left: 0; top: 0;
}
.language-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.delivery-country-icon {
position: relative;
left: 0; top: 0;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
}
.delivery-country-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
You can fix this by setting fixed widths for the child elements (inputs, etc..).
But why would you zoom to 25%?