The background-image works in Firefox, but not in Chrome or IE. I have tried several solutions on Stackoverflow,
like turning off my ad-block,
putting the same code in the head of the file,
<head><style>...</style><head>
putting the same code in the style attribute of the link,
<a style="..."> ... </a>
I have made sure there are no elements that are derived from the appearance attribute,
I have tried including the background-attachment: fixed; style
and finally I have tried to change:
background-position-y: 465px;
background-position-x: 5px;
To:
background-position: left center;
All of these variations on the below code work perfectly in Firefox.
.search-btn {
padding-left: 32px;
padding-right: 10px;
background-image: url(../Images/search.png);
background-position-y: 465px;
background-position-x: 5px;
background-repeat: no-repeat;
}
But not on Chrome or Internet Explorer.
<asp:LinkButton ID="btnSearch" runat="server" CssClass="btn blue-btn mar-bot search-btn" OnClick="btnSearch_Click">Search</asp:LinkButton>
The other classes mentioned in the CssClass attribute in the order the appear in my CSS stylesheet:
.mar-bot {
margin-bottom: 6px;
}
.blue-btn {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue-btn:hover {
background-color: #6FC6FF;
}
.btn {
border-radius: 5px;
padding: 4px 8px;
text-decoration: none;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.search-btn {
...
}
.search-btn {
padding-left: 32px;
padding-right: 10px;
background-image: url(../Images/search.png);
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
}
For some reason it needs display: inline-block; to work.
I have no idea why this worked, but it does.
Related
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 7 years ago.
I have 5 CSS classes. They are completely identical except one line. Is there a way to create one CSS class, then have the 5 other CSS classes inherite from the one and just add it's own specific's?
As you can see below the only line that is different is this line...
background-image: url("../Images/vertTabsButton2.gif");
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton2.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
Without using a pre-compiler like SASS you cannot achieve inheritance. However you could accomplish something like what you want by splitting the common properties out into a single class and applying the remaining unique properties through some other ID or class.
.commonProperties {
float: left;
border-style: none;
border-width: thin;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
background-image: url("../Images/vertTabsButton2.gif");
}
.divMasterCol1Button1 {
background-image: url("../Images/vertTabsButton2.gif");
}
Here's your HTML
<button class="commonProperties divMasterCol1Button1"/>
<button class="commonProperties divMasterCol1Button2"/>
Here's your CSS
.commonProperties {
float: left;
border-style: none;
border-width: thin;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
background-image: url("http://www.gettyimages.ca/gi-resources/images/CreativeImages/Hero-527920799.jpg");
}
.divMasterCol1Button1 {
background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
}
I recommend using SASS or LESS. Here's an example of it would look like for both pre-compiler languages with your class
SCSS
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
#extend .divMasterCol1Button1;
background-image: url("../Images/vertTabsButton2.gif");
}
and here is LESS
.divMasterCol1Button1 {
float: left;
border-style: none;
border-width: thin;
background-image: url("../Images/vertTabsButton1.gif");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
width: 215px;
height: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.divMasterCol1Button2 {
.divMasterCol1Button1;
background-image: url("../Images/vertTabsButton2.gif");
}
I prefer SCSS because bootstrap 4 is beginning to use it for their framework.....
Simply use CSS:
.c1,.c2,.c3,.c4,.c5{
//common styles
}
.c1{
//c1 special style
}
...
.c5{
//c5 special style
}
See example http://jsfiddle.net/qj76455e/
I wanted to make the principle readable, therefore I used short class names c1,...,c5 instead of divMasterCol1Button1 etc.
Use 2 or more classes. OOCSS, SMACSS or BEM will be great tool.
.button {
...
}
.button--red { color: red; }
Or you can achieve this with #extend operator in sass, less or stylus.
This page I am developing has a different layout on Safari than Chrome/Firefox
Here is how it looks in Safari
Here is how it looks in Firefox
As you can see, the top banner isn't showing on Safari and i think it's because of the parallax CSS I have added for the banner if I'm not completely wrong here.
Here is the CSS:
.slide {
position: relative;
padding: 15vh 1%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
#title {
background-image: url("http://bildeopplaster.no/8Kk");
background-attachment: fixed;
}
.carsonshold { position: relative; width: 100%; display: block; border-bottom: 1px solid #ccc; }
.carsonshold img { padding: 20px; display: block; border: none; }
#thesedays { padding: 10px 20px; margin: 40px 0; background: #fff; border: 1px solid #ccc; }
#results { padding: 10px 20px; background: #fff; border: 1px solid #ccc; font-family: monospace; }
.text-link {
border: none;
background: none;
padding: 0;
margin: 0;
font-size: 0.85em;
cursor: pointer;
}
Can anyone see why the banner isn't showing up on Safari or what am I missing here?
The first issue is you are using vh units for that element. Unfortunately, Safari didn't support vh and vw units until Version 6 (unprefixed in Version 6.1).
The second issue is that you are using the background: 50% 50% / cover; property-value pair. That is also not a supported value in Safari 5.1.7. You need to remove the / cover bit for it to work in Safari 5.1.7. Safari 5.1.7 should support background-size: cover;, but it seems like it doesn't support the shorthand version you're trying to use here.
Using these values will fix it, more or less:
.slide, .slide::before {
background: 50% 50%;
}
.slide {
padding: 15%;
min-height: 100%;
width: 100%;
}
With that being said, this shouldn't be an issue, because people who use Safari as their main browser will probably be on OS X, which means they'll be on a newer version of Safari. It's unlikely anyone will be using Safari on Windows for their main browser. Then again, it's possible, considering there are still Opera 12 users out there...
I am trying to use a background image on an li-element to indicate the current tab being selected. The image is meant to overlap the li-element to show half-borders on top and bottom of the li-element and these borders turning up and down at the side of the tab panel.
The problem is that the image does not show up, even though it is clearly being found (according to the dev tool). If I set a background color or a frame around the div containing the background, that shows correctly and with the right dimensions. Here is my current code:
<ul class="ulTabSelect">
<li>Character<div class="tabLiBG"></div></li>
<li>Skills<div class="tabLiBG"></div></li>
<li>Equipment<div class="tabLiBG"></div></li>
</ul>
And the css:
ul.ulTabSelect {
font: 16px Verdana,sans-serif;
left: 0;
margin-top: 200px;
top: 550px;
width: 135px;
}
ul.ulTabSelect a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
color: #9F9270;
display: block;
font: bold 1em sans-serif;
padding: 5px 10px;
text-align: right;
text-decoration: none;
}
ul.ulTabSelect a:hover {
color: #FFFFCC;
}
ul.ulTabSelect li {
position: relative;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 0.1em solid rgba(0, 0, 0, 0.9);
margin-bottom: 2px;
}
.ui-state-active .tabLiBG {
position: absolute;
display: block;
top: -36px;
left: 110px;
width: 45px;
height: 84px;
background-image: url("/img/liSelect.png");
background-repeat: no-repeat;
background-position: 90px -27px;
background-color: transparent;
opacity: 1.0;
z-index: 3;
}
.tabLiBG {
display: none;
}
You can also see this in action at www.esobuild.com where it is the main tab selector to the left. Kinda run out of ideas here what to try to get it working.
It works ok if you set
background-position: -17px 11px;
or some value around that
I couldn't find the class ui-state-active in your html. That could be the issue.
I found that the following CSS instruction does not resize the DIV background image showing in IE9. Do you have any idea?
HTML:
<DIV id=window20 class="window smallWindow">
<STRONG>abcde</STRONG>
<BR /><BR />
</DIV>
CSS:
.window {
Z-INDEX: 20;
BORDER-BOTTOM: #346789 2px dotted;
POSITION: absolute;
BORDER-LEFT: #346789 2px dotted;
PADDING-BOTTOM: 0.5em;
PADDING-LEFT: 0.5em;
WIDTH: 14em;
PADDING-RIGHT: 0.5em;
FONT-FAMILY: helvetica;
HEIGHT: 4em;
COLOR: white;
FONT-SIZE: 1.0em;
BORDER-TOP: #346789 2px dotted;
BORDER-RIGHT: #346789 2px dotted;
PADDING-TOP: 0.5em;
border-radius: 0.6em;
-moz-border-radius: 0.6em
}
.smallWindow1 {
BACKGROUND-COLOR: #558822
}
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: auto;
background-origin: content-box;
}
Try This
CSS
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
}
IE9 does support background-size, but the problem in your example is that you have background-size: auto, which means not to stretch the background! (Which is the default if you don't specify the property.)
Solution: use 100% 100% or cover or contain, depending on your needs.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I would have made a fiddle, but I don't have your background picture, and besides, the div in your example doesn't move, so it would not have been very illustrative.
I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.
.buttonSML {
background-position:-35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2.9rem;
font-weight: #font-bold;
height: 55px;
padding: 0 5px;
position: relative;
.text-shadow(0,0,4px);
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: " ";
position: absolute;
top: 0;
height: 55px;
width: 20px;
display: inline-block;
visibility: visible
}
.buttonSML:before {
background-image: url('../images/sprite.png');
background-position: 0px -432px;
background-repeat: no-repeat;
background-color: transparent;
left: -20px;
}
.buttonSML:after {
background: url('../images/sprite.png');
background-position: -394px -432px;
background-repeat: no-repeat;
background-color: transparent;
right: -20px;
}
Added a jsfiddle so you can see the end result http://jsfiddle.net/7D4kG/1/
Not really sure what up so would appreciate any advice you guys can provide.
After some work I found 2 solutions.
FIrst is with the help of jquery, you can replace with and add
$('#button-id').click(function ()
{
$('#form-id').submit();
});
Works well, but you loose HTML5 form validations.
To keep the validations you can skip the jquery and just add "overflow: visible" to your buttons style. Have only tested it in IE10 so far, will test the rest later when I republish.
http://jsfiddle.net/3MHHs/1/
I have made some changes and it works for me in Chrome and IE10. I completely removed the positioning, because that is very ...advanced thing in pseudos. Browsers fail on simpler cases too. I have removed the 5px padding too.
.sprite {
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png')
}
.buttonSML {
background-position: -35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2rem;
height: 55px;
padding: 0;
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: "";
width: 20px;
height: 55px;
font-size: 2rem;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-color: white; /* sorry */
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png');
}
.buttonSML:before {
background-position: 0px -432px;
}
.buttonSML:after {
background-position: -394px -432px;
}