The rollover uses a single image for both the regular and hover states. The buttons display fine in both Firefox and Chrome, but the rollover does not work in Firefox.
Here's the HTML, which uses a list for multiple buttons (just a single instance of a button is shown here):
<div id="buttons">
<ul class="stencil_buttons">
<li>
<button type="submit" id='addField'>
<a class="global_button" href=""><span>Button Text</span></a>
</button>
</li>
</ul>
</div>
Here's the CSS:
a.global_button span {
background: transparent url('../images/button_left.png') no-repeat 0 0;
display: block;
line-height: 22px;
padding: 3px 0 5px 18px;
color: #fff;
}
a.global_button {
background: transparent url('../images/button_right.png') no-repeat top right;
display: block;
float: left;
height: 30px;
margin-right: 6px;
padding-right: 20px;
text-decoration: none;
font-size: 14px;
}
a.global_button:hover span {
background-position: 0 -30px; color: #fff;
}
a.global_button:hover {
background-position: right -30px;
}
Thanks in advance for your help.
Try button:hover a.global_button span and button:hover a.global_button instead of the corresponding selectors above. While the selectors in the question above will work in FF when the surrounding element is not a button, they do not work when it is; My guess would be that the hover state stops at the button and does not filter down to child elements in FF.
Related
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I would like to use some icons as links as well as have text links beneath each one but I cannot seem to figure out how to do it. So each icon and text links work.
Link to jsfiddle: http://jsfiddle.net/huwrowlands/jvMfY/
Could some one show my the error of my ways.
Thanks in advance
<ul class="i-icons">
<li class="i-icon-va tablet-grid-33 mobile-grid-50">Vehicle Accidents</li>
<li class="i-icon-pi tablet-grid-33 mobile-grid-50">Personal Injury</li>
</ul>
#homepage-header ul.i-icons {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
#homepage-header ul.i-icons li {
/*text-indent: -9999em;*/
display: inline-block;
width: 140px;
height: 140px;
background-image: url('http://inspiredworx-labs.com/sites/injury-icons.png');
background-repeat: no-repeat;
position: relative;
margin: 10px 10px 20px 10px;
}
#homepage-header ul.i-icons li.i-icon-va {
background-position: 0 -1px;
}
#homepage-header ul.i-icons li.i-icon-pi {
background-position: -155px -1px;
}
#homepage-header ul.i-icons li a {
display: block;
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
text-decoration: none;
}
Something like this?
I simply added a top property to #homepage-header ul.i-icons li a and changed the font color so you can read it
Update: I changed the fiddle so that the text is underneath and the icons are clickable, however the text underneath is not clickable. Because you have styling for the list anchor tag, it was affecting the text, so the only option was to keep the text inside the li but outside the a. You can see it here. If you want the text to be clickable, you might have to make a separate div to position underneath the list icons, there might be a better way but this was the best I could think of.
Here is my code, which works perfectly in all but ie! The active simply does not fire
a.Button span {
background: transparent url('images/form_sprite.png') no-repeat 0 0;
display: block;
height:45px;
line-height: 30px;
padding: 7px 0 5px 20px;
color: #fff;
background-position: 0 -44px;
}
a.Button {
background: transparent url('images/form_sprite.png') no-repeat top right;
display: block;
float: left;
height: 45px;
margin-right: 6px;
padding-right: 27px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.Button:hover span {
background-position: 0 -136px;
}
a.Button:hover {
background-position: right -90px;
}
a.Button:active span {
background-position: 0 -225px;
}
a.Button:active {
background-position: right -181px;
}
This is the html:
<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div>
Any ideas please?
try changing a.Button:active to a.Button span:active in your css. That seems to be firing the :active css and still works in chrome for me.
Yep, the :active psuedo-class only fires in IE when the user is clicking directly on that object. In this case, the link. If you're clicking on a child object (the span), the link's active event won't fire.
You can, as Aninemity said, apply the style to span:active (the proper way to do this). But in IE6/7, :active fires only for links. If you need IE6/7 support, you'll have to find some way to get rid of the span.
I have a simple menu:
<ul id="menu2">
<li> Home</li>
<li> About us</li>
<li> Contacts</li>
</ul>
And in css file I have:
#menu2 {
background: black;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 220px;
}
#menu2 li {
margin: 0;
padding: 0;
}
#menu2 a {
background: black;
border-bottom: 1px solid #393939;
color: #ccc;
display: block;
margin: 0;
padding: 9px 16px;
text-decoration: none;
}
#menu2 a:hover {
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
#menu2 a:active {
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
Everything works well except for #menu2 a:active not working at all while #menu2 a:hover (with same rules) works well. What is the problem? Did I miss something?
It is working as expected. I colored the active state red.
Try clicking on en element and hold the button down. The background will be red.
You don't see a change, because you CSS for hover and active are identical!
Sample
http://jsfiddle.net/dqH3F/1/
Sample contains
#menu2 a:active {
background: red url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
Can you provide more details of what exactly is not working and/or a demo. Looking at the code it appears to be fine.
The :active state refers to when a link is pressed, so if you press and hold your mouse button down on your menu item it should be working as expected since hover works active has the same properties.
A link with :active will not remain that way when your on the page it links too, it reverts back to a normal link.
Your background for :hover and :active in the code above is the exact same.
Are you trying to set a background x and y position on active?
Without image background and different colors (for testing) your code works fine: see here http://jsfiddle.net/stursby/9Pccb/
So, I can create an input button with an image using
<INPUT type="image" src="/images/Btn.PNG" value="">
But, I can't get the same behavior using CSS. For instance, I've tried
<INPUT type="image" class="myButton" value="">
where "myButton" is defined in the CSS file as
.myButton {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hover class). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.
I'm using Firefox 3.0.3 if that makes a difference.
If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.
Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.
You can use the <button> tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.
Like so:
<button type="submit" style="border: 0; background: transparent">
<img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>
More info
div.myButton input {
background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
background-size: 90px;
width: 90px;
height: 90px;
cursor: pointer;
border: none;
}
<div class="myButton">
<INPUT type="submit" name="" value="">
</div>
This will work anywhere, even in Safari.
This article about CSS image replacement for submit buttons could help.
"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input.
And since button borders are erased, it's also recommendable change the button cursor to
the hand shaped one used for links, since this provides a visual tip to the users."
The CSS code:
#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#replacement-2 {
width: 100px;
height: 55px;
padding: 55px 0 0;
margin: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;
}
Here's a simpler solution but with no extra surrounding div:
<input type="submit" value="Submit">
The CSS uses a basic image replacement technique. For bonus points, it shows using an image sprite:
<style>
input[type="submit"] {
border: 0;
background: url('sprite.png') no-repeat -40px left;
text-indent: -9999em;
line-height:3000;
width: 50px;
height: 20px;
}
</style>
Source:
http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/
Here is what worked for me on Internet Explorer, a slight modification to the solution by Philoye.
>#divbutton
{
position:relative;
top:-64px;
left:210px;
background: transparent url("../../images/login_go.png") no-repeat;
line-height:3000;
width:33px;
height:32px;
border:none;
cursor:pointer;
}
You can use blank.gif (a one-pixel transparent image) as the target in your tag:
<input type="image" src="img/blank.gif" class="button">
And then style background in CSS:
.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}
A variation on the previous answers:
I found that opacity needs to be set, of course this will work in Internet Explorer 6 and on. There was a problem with the line-height solution in Internet Explorer 8 where the button would not respond. And with this you get a hand cursor as well!
<div id="myButton">
<input id="myInputButton" type="submit" name="" value="">
</div>
#myButton {
background: url("form_send_button.gif") no-repeat;
width: 62px;
height: 24px;
}
#myInputButton {
background: url("form_send_button.gif") no-repeat;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width: 67px;
height: 26px;
cursor: pointer;
cursor: hand;
}
I think the following is the best solution:
CSS:
.edit-button {
background-image: url(edit.png);
background-size: 100%;
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
HTML:
<input class="edit-button" type="image" src="transparent.png" />
My solution without JavaScript and without images is this:
HTML:
<input type=Submit class=continue_shopping_2
name=Register title="Confirm Your Data!"
value="confirm your data">
CSS:
.continue_shopping_2: hover {
background-color: #FF9933;
text-decoration: none;
color: #FFFFFF;
}
.continue_shopping_2 {
padding: 0 0 3px 0;
cursor: pointer;
background-color: #EC5500;
display: block;
text-align: center;
margin-top: 8px;
width: 174px;
height: 21px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: #919191;
font-family: Verdana;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #FFFFFF;
}
Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.
Let's assume you can't change the input type, or even the src. You only have CSS to play with.
If you know the height you want, and you have the URL of a background image you want to use instead, you're in luck.
Set the height to zero and padding-top to the height you want. That'll shove the original image out of sight, giving you a perfectly clean space to show your CSS background-image.
It works in Chrome. I don't have any idea if it works in Internet Explorer. Barely anything clever does, so probably not.
#daft {
height: 0;
padding-top: 100px;
width: 100px;
background-image: url(clever.jpg);
}
<input type="image" src="daft.jpg" id="daft">