I have developed a from with label on left and input box on right. In Chrome and Safari it works fine, but in Firefox and IE10 its height is distracted. Here is a screen shot! [IE10] http://i.stack.imgur.com/vQR73.png
Here is the CSS
.comment-form-author label, .comment-form-email label, .comment-form-url label {
font-size: 21px;
border: 1px solid #a9a9a9;
padding: 11px 18px 14px 18px;
color: #868686;
}
.comment-form-author label, .comment-form-email label {
padding-right: 33px;
}
.comment-form-author label {
padding-right: 31px;
}
.comment-form-author input[type='text'], .comment-form-email input, .comment-form-url input {
padding: 18px 18px 15px 18px;
border: 1px solid #a9a9a9;
margin-bottom: 25px;
margin-right: 23px;
border-left: 0;
margin-left: -3px;
width: 270px;
}
.comment-form-author, .comment-form-url {
}
.comment-form-comment textarea {
height: 55px;
width: 382px;
padding: 16px 12px 16px 12px;
}
Related
I wanted to set up an image as a transparent background image for my website but anything I try just doesn't wanna work. I've seen on the internet how it works for others, but for me it just doesn't. I converted my image from png to jpeg, but that didn't brought success
Here is my full CSS file
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: url(DS Organization logo.jpg)
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #050505;
text-align: center;
border: 1px solid #000307;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #000000;
background: rgb(99, 99, 99);
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #050505;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
The url-path is treated as a string and it needs to be enclosed in quotes. For more information on url(), visit mdn
I'm trying to style my login form and i have the code in the style sheets for login problem is it changes the style of another form i have on another page to match the one from the login is there some way to stop this from happening
.form {
text-align:center;
margin: 0 auto 10px;
padding: 20px 0 10px 0;
font-size: 16px;
width: 300px;
}
input[type=text],
input[type=email],
input[type=password] {
color: #000000;
width: 100%;
border: 1px solid #E6E6E6;
border-radius: 0px;
height: 60px;
margin: 6px auto;
text-indent: 10px;
}
.btn-submit {
color: #FFFFFF;
font-size: 18px;
text-transform: uppercase;
background: #008CBA;
padding: 10px 20px;
border: 0;
margin-top: 6px;
}
I am trying to create a cinnamon CSS theme, but I'm having a very strange issue.
As you can see below, I have set .menu-application-button:hover and .menu-application-button-selected's backgound-colour attribute to #3478db.
This works fine except when a scrollbar is present, where the background appears white. This is bizarre, as I have not set anything to white in the menu code at all. I have tried using !important but the problem still persists.
Is this just a silly mistake done by me, or a bug in cinnamon? And if it is a mistake how can I fix it?
here's the menu code:
/* ===================================================================
* Menu (menu.js)
* ===================================================================*/
.menu-favorites-box {
width: 50px;
margin: auto;
padding: 10px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: rgba(85,85,85,0.1);
transition-duration: 100;
}
.menu-favorites-button {
padding: 10px;
}
.menu-favorites-button:hover {
padding: 10px 4px 10px 16px;
}
.menu-help-button {
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
}
.menu-help-button:hover {
color: white;
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.12);
background-gradient-end: rgba(255,255,255,0.06);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.12);
border-radius: 3px;
}
.menu-places-box {
padding: 10px;
}
.menu-places-button {
padding: 10px;
}
.menu-categories-box {
padding-top: 15px;
padding-left: 15px;
padding-right: 5px;
padding-bottom: 0px;
}
.menu-applications-box {
padding-top: 15px;
padding-left: 10px;
padding-right: 15px;
padding-bottom: 0px;
}
.menu-application-button {
height: 36px;
padding: 0px 7px;
}
.menu-application-button:hover,
.menu-application-button-selected {
height: 36px;
padding: 0px 7px;
color: rgba(255,255,255,1);
background-color: #3478db;
border-color: #3374D4;
}
.menu-application-button-label:ltr {
padding-left: 5px;
}
.menu-application-button-label:rtl {
padding-right: 5px;
}
.menu-category-button {
height: 36px;
padding: 0px 7px;
}
.menu-category-button-greyed {
height: 36px;
padding: 0px 7px;
color: #aaa;
}
.menu-category-button-selected {
height: 36px;
padding: 0px 7px;
background-color: #3478db;
color: rgba(255,255,255,1);
border-color: #3374D4;
}
.menu-category-button-label:ltr {
padding-left: 5px;
}
.menu-category-button-label:rtl {
padding-right: 5px;
}
/* Name and description of the currently hovered item in the menu
* This appears on the bottom right hand corner of the menu*/
.menu-selected-app-box {
padding-right: 30px;
padding-left: 28px;
text-align: right;
}
.menu-selected-app-title {
font-weight: bold;
color: #4784de;
}
.menu-selected-app-description {
max-width: 150px;
color: #333;
}
.menu-search-box:ltr {
padding-left: 15px;
}
.menu-search-box:rtl {
padding-right: 15px;
}
#menu-search-entry {
border-image: url("entry.png") 5;
color: #333;
caret-color: #333;
font-size: 12pt;
caret-size: 1px;
selected-color: white;
selection-background-color: #4784de;
padding: 0px 8px;
width: 15em;
height: 30px;
}
.menu-search-entry-icon {
icon-size: 1em;
color: #333;
}
.menu-context-menu {
}
the full code, if needed, is available at http://pastebin.com/yTCF0b9f.
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}