I have a simple list with a background image in each element. The image is showing in Firefox but no in Chrome (Windows OS). These are the styles attached to the list:
ul li
{
position: relative;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #777777;
width: 378px;
float: left;
padding-top: 6px;
padding-right: 0px;
padding-left: 30px;
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
color: #575656;
line-height: 19px;
background-color: transparent;
background-image: url("../images/tir.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top 6px;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
padding-bottom: 3px;
}
Can someone spot what's wrong with this?
Fiddle: http://jsfiddle.net/kgeDr/
The code seems to work.. http://jsfiddle.net/LZKG6/
(I use Chrome in Ubuntu)
May be this is wrong:
background-position: left top 6px;
I think the extra "6px" is invalid.
W3schools only specifies 2 values, not 3:
http://www.w3schools.com/cssref/pr_background-position.asp
Related
I have the following problem: I have created a search bar and a search button next to it. Actually, it's the FontAwesome search icon with some padding space around it. In Chromium-based browsers the search button is lined up perfectly with the search bar but not in Firefox. How to fix that?
#searchfield {
width: 200px;
height: 40px;
padding-left: 10px;
border-style: solid;
border-color: rgb(192,0,0);
font-size: 110%;
color: black;
border-radius: 2px;
border-width: 2px;
background-color: transparent;
border-right-width: 0px;
border-top-right-radius: 0%;
border-bottom-right-radius: 0%;
}
#searchbutton {
cursor: pointer;
color: white;
font-size: 110%;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgb(192,0,0);
border-radius: 4px;
border-top-left-radius: 0%;
border-bottom-left-radius: 0%;
}
<input id="searchfield" type="search" placeholder="Search"/><a id="searchbutton" title="Search">S</a>
I don't want the FontAwesome icon to cause any problems so I replaced it with an 'S'.
Adding to #searchbutton vertical-align: text-bottom; they are lined up perfectly.
It works for me in Firefox.
To set this property just in this browser, you can put this code in your CSS:
#-moz-document url-prefix(){
#searchbutton {
vertical-align: text-bottom;
}
}
I have this code:
.subbmitCommentBtn {
background: url("../images/ikon2.png") no-repeat center top;
padding-right: 15px;
padding-left: 15px;
color: white;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #AF191F;
background-position: left;
background-repeat: no-repeat;
font-weight: bold;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class=" subbmitCommentBtn">
I need to add more space on the left. I would like the picture to move away from the left edge of the button (ex. padding left:10px).
How to fix it?
You need to set the background-position rather than the padding. By default, the background also covers the padding, so changing the padding doesn't influence that.
.subbmitCommentBtn {
background: url("https://i.stack.imgur.com/HOZcL.png") no-repeat center top;
padding-right: 15px;
padding-left: 15px;
color: white;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #AF191F;
background-position: 10px top; /* changed from "left" */
background-repeat: no-repeat;
font-weight: bold;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">
Please note that I also had to change the background image URL for the purpose of this snippet, so don't copy the whole bunch over.
Use background-position to get padding effect. An example below:
.subbmitCommentBtn {
background: url("https://cdn.pixabay.com/photo/2018/02/04/01/54/paper-planes-3128885_1280.png") no-repeat; /* added an image for snippet */
background-size: 40px 40px; /* set background-size: 40px width and 40px height */
background-position: 15px center; /* left:15px and vertical-align:middle */
color: #f4f6f9;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #d94452;
font-weight: bold;
letter-spacing: 1px;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">
I'm using dreamweaver to code my website. I've got a div with text inside an anchor element in order to get the whole div clickable, however when displayed in a browser, there's a weird Purple/Red line underneath the Text.
I have text-decoration: none; in the code. Any help would be appreciated!
Website in Browser: http://test.crows-perch.com/
HTML of Text in question:
<div id="Guides"><div id="GuidesT">GUIDES</div></div>
CSS of all related elements:
#Guides {
z-index: 4;
position: relative;
margin: 0 auto;
top: -135px;
right: 89px;
width: 133px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Guides:hover {
width: 133px;
background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#GuidesT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
The text-decoration is typically applied to the link, not elements inside it. Try this instead:
a.Guides { text-decoration: none; }
I've got a button posted here:
http://buttontest.raptorshop.com/
But for some reason, it isn't entirely lining up. What can cause this?
I tried changing line height, padding, etc.
Here's the CSS code I have:
a.gbutton {
background: transparent url('buttonside.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 82px;
margin-right: 6px;
padding-right: 46px; /* sliding doors padding */
text-decoration: none;
}
a.gbutton span {
background: transparent url('buttonmain.png') no-repeat;
display: block;
line-height: 68px;
padding: 5px 0 5px 18px;
}
I am modifying this from a tutorial I found online, and perfect CSS placement has always been a difficult item for me.
The sliding door technique works because extending a rectangle won't change its look. But extending a ellipse will, so your code won't work as you expect.
Here is the best I could get:
a.gbutton {
background: transparent url('buttonside.png') no-repeat scroll right top;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 82px;
margin-right: 10px;
padding-right: 51px;
text-decoration: none;
}
a.gbutton span {
background: transparent url('buttonmain.png') no-repeat left top;
background-size: 100% auto;
display: block;
line-height: 68px;
padding: 5px 0 5px 18px;
height: 100%;
width: 100%;
}
Update
Just use a single image and specify the CSS:
background-size: 100% auto;
Hello not sure why but having some problem with a navigation. It seems to be overflowing and if I fix it in one browser it fails in the other. So I am not sure what is wrong with it. Recently the CSS broke and the entire menu is beyond messed up.
any ways heres is the site http://www.otaku-plus.com/triton
EDITED: updated code bit: http://jsfiddle.net/yukimura/hqyY2/embedded/result/
here is the css bit for the menu
#dropfish {
background-attachment: scroll;
background-clip: border-box;
background: #111111 url("images/top-bar-bg.png");
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat-x;
background-size: auto;
color: #000000;
left: 0px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
top: 0px;
width: 100%;
height: 44px;
position: fixed;
z-index: 9999;
box-shadow:0px 1px 2px;
}
#dropfish_menu {
width: 90%;
height: 44px;
margin: 0 auto;
}
#dropfish_menu ul {
width: 90%;
height: 44px;
}
#dropfish_menu ul li {
float: left;
padding: 14px 0px;
margin-top: -1px;
}
#dropfish_menu a {
color: #ffffff;
text-shadow:0 -1px 0 #000000;
padding: 14px 16px;
font-size: 14px;
}
#dropfish_menu a:hover {
margin-top: 0px;
padding: 14px 16px;
/* background-color:#cdcdcd; */
background-repeat: repeat;
background-color: #313131;
background-image: url("images/top-bar-bg.png");
background-position: 50% 75%;
cursor: pointer;
}
.active {
background-color: #313131;
background-image: url("images/top-bar-bg.png");
background-position: 50% 75%;
}
html bit for the menu
<div id="dropfish">
<div id="dropfish_menu">
<ul>
<div style="float:left;margin-left:-128px;">
<li><img src="http://opcdn.otaku-plus.com/themes/plus/images/logo.png" height="34px" style="margin-top: -8px;margin-right: 8px; cursor: pointer;" id="phx_return_logo"/></li>
<li>Web</li>
<li>Anime</li>
<li>Manga</li>
<li>News</li>
<li>Events</li>
<li>More</li>
</div>
<div style="float:right;margin-right:-128px;">
<li>Register</li><li>Sign in</li><li>Preferences</li>
</div>
</ul>
</div>
</div>
can some one tell me what is wrong with my CSS? or HTML
I made a possible solution to your problem. See this
#mainNav is floating left and #login is floating right.
I adjusted your mark up.