I find this a pain. I am trying to get CSS to use an image when the < hr /> tag is used.
I am currently using:
hr
{
display:block;
border:none;
height:10px;
background-image:url('img/ruler.gif');
}
However, I always get a border around the image. As you can see, the border:none does nothing.
I know there are alternative ways such as using div. But is it possible through using the hr tag only?
The main users will be using IE6, so need a IE6 compatable solution please.
Thanks
hr {
display:block;
border:0px;
height:10px;
background-image:url('img.gif');
}
Update border:none; to border:0;
Related
html:
<input type="image" />
css:
input[type="image"]
{ border:0;
border-color:transparent;
background:transparent;
width:150px;
outline:none;
}
i don't want to use src="img url", i want to use background:(url)
i have added border:0 but still border is coming in chrome
JSFiddle > http://jsfiddle.net/akash4pj/PYKfr/1/
Add an 1x1 GIF to the src attribute will solve the problem:
<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
JSFiddle
You can find the answer from a similiar question here: chrome border issue
Use rather the following CSS property :
border:0px;
or
border:none;
If it doesn't work, check your parent tag, maybe your div or span container have a border set.
Sometimes in Chrome when you adjust the Zoom to greater or less than 100%, borders will appear on images. You may not have noticed that the Zoom got adjusted. Its a bit of a long shot, but if your CSS is correct, that may be what it is.
in you code { you are using 2 times. also you have to call image as CSS background property.
you can use like this.
input[type="image"]{
border:0 none !important;
outline:0 none !important;
-webkit-border:0 none !important;
border-color:transparent;
background:transparent;
width:100px;
height:25px;
display: block;
background: url("http://lorempixel.com/100/25")
}
here is the Working Demo. http://jsbin.com/kiherove/1/
the border: none property should fix it:
input[type="image"]
{
border:none;
border-color:transparent;
background:transparent;
width:150px;
outline:none;
}
Try this:
input[type="image"]
{
border:0;
border-color:transparent;
background:transparent;
width:150px;
outline:none;
border-style: none;
}
Alright IE8 gurus (does such a thing exist?). I need some assistance in fixing an issue that is a result of using an :after pseudo selector. It's pretty straight forward - just trying to add a border (underline) after a span tag on hover. No, the easy solution isn't just using the text-decoration property because the element inside the span tag is an image (and some other reasons).
Here's the HTML:
<div class="cta">
Hover over me
</div>
And here's the CSS:
.cta { position:relative; z-index:1; display:inline-block; }
.cta:after { position:absolute; z-index:1; left:0px; right:0px; bottom:0px; content:''; border-bottom:1px solid transparent; }
.cta:hover:after { border-color:rgba(0,136,204,.6); }
And for those of you really interested in helping and want to play around with it, here's the fiddle.
Why on earth does that not work on IE8? Works on all other browsers. I've even tried just removing all of the hover nonsense, but I still can't get the border to appear. I've also tried adding a display:block and width:100% to the .cta div per some things I came across on the Internet. No dice.
Any ideas?
IE8 and lower do not support rgba, so try adding a fallback using rgb: DEMO
.cta:hover:after
{
border-bottom:1px solid rgb(0,136,204);
border-bottom:1px solid rgba(0,136,204,.6);
}
Source: http://css-tricks.com/rgba-browser-support/
I’m trying to create a button toggle using the twitter bootstrap.
What I’m looking to do is add a tick image at the top right of a button when the class active is added.
Here is an example of the source
http://jsfiddle.net/4GC9R/
My button css looks like
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
}
Sorry if this is a stupid question I’ve tried a few ways but I’m far from a css expert.
Thanks in Advance
To add the checkmark you could use the :after pseudo element and for an image you could then further use content: url('image_path') or background-image: url('image_path').
Also, your class selectors should be adjusted. Maybe something in this direction:
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
border:none;
position:relative;
}
.mybtn.active:after {
content: '\2713';
position:absolute;
top:0;
right:0;
}
DEMO
P.S. if you meant tick - as in the animal (e.g. Ixodes), that is also possible via content or the background property of the :after pseudo element (DEMO) ;-)
When the class name '.active' is added to the button with class '.mybtn', then the selector of the button will not be '.mybtn .active', but '.mybtn.active'.
Hope this helps.
I'm sure this is a dumb question, but I can't move this inner (button) inline style to a style sheet:
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type = 'button'
id = 'sButton2'
style = 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
The quick brown fox
</label>
I've tried this:
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type = 'button'
id = 'sButton2' >
The quick brown fox
</label>
and this:
<style type="text/css">
.sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<input type = 'button'
id = 'sButton1'
class = 'sButton' >
but neither of these works; no style is applied. Any idea what I'm doing wrong?
Thanks.
EDIT
Sorry folks, it's midnight, I (was!) just off to bed, and I screwed up the cut-and-paste. The syntax of the style sheet is actually correct - I've fixed it above. Other info:
1- the style sheet is in the head section of a single html file. There are already a couple of jQueryUI ones above it, and I copied the syntax from them;
2 - I think that there is another style applied to the buttons, but I was hoping that #sButton2 would override this;
3 - I can't get even the most trivial style from a style sheet to apply
to the buttons. If I just set the button width, for example, nothing happens, although an inline width works;
4 - it's not browser-specific - seen in F/F, Opera, Chrome;
Thanks again.
EDIT2
Just tried appending a !important to the end of the style sheet, with no change in F/F & Chrome:
...margin-right:12px; !important }
<style type="text/css">
#sButton2 { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
</style>
should be
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
</style>
You need to end the first { with a }, not a >. And the styles are not in quotes, they are simply enclosed in curly braces. You should also look into what is standard for your HTML code. Usually elements are laid out like this:
<input type="button" id="sButton2" />
It is a good idea to follow standards like this.
Change
#sButton { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
to
#sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
That should do it.
(remove the ' at the start and the end, and replace the > by a } )
your inner style ends with > instead of }
furthermore it should be in your head tag
lastly why are you wrapping your style with single quotes?
Stupid question, but are you sure the style sheet is being loaded? I've seen where people have multiple stylesheets and they're loading the wrong one, or they edited the wrong one.
You might also have an overriding style later in your stylesheet. Do you have any input styles? ID should override less specific styles, but there are bugs in some browsers that you might have to work around.
Try using !important
DOH! Yes, as others have said, your problem is the single quotes around your css attributes.
<style type="text/css">
.sButton {
cursor:pointer;
width:30px;
height:13px;
float:left;
margin-bottom:2px;
margin-right:12px
</style>
<input type="button" id="sButton1" class="sButton">
http://jsfiddle.net/charlescarver/aQHyK/
Fixed, with a lot of help from Firebug (what a great bit of software). The input tag is in a jQueryUI dialog, and was inheriting a 'width:95%' from '#dialog input'. The 'width:30px' in my style sheet was being ignored, until I changed it to 'width:30px !important', in all of F/F, Chromium, and Opera. It was ignored in both the div (#sButton2) and class (.sButton) styles.
I don't understand this. What's the point of inheritance if you can't over-ride it without adding arbitrary !important's? Is css inheritance broken? Isn't !important just admitting that it's broken?
I had originally thought that the entire style sheet was being ignored, because the input button expanded to 95%, and made it look like everything else was being ignored as well. However, I eventually realised that part of the style was actually working - 'cursor:pointer' did show a cursor.
Thanks everybody.
# is the correct prefix for IDs (as you actually use in your second code example), but you shouldn't wrap quotes around the css code. Try it like this:
<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
Executing a validator on the code (which is always a good idea) would have told you all this as well!
I'm new to the html & css design. I have following design of css-
span.menu a:link, span.menu a:visited
{
display:block;
font-weight:bold;
color:#0000CC;
background-color:#E8EEFD;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
border:5px solid gray;
margin:0px;
}
I want to place three link by using tag which should be shown in the following manner-
Calls Customers Venders
and i want to treat them as menu for this they should be placed in horizontal manner. But when i'm running my css design then they placed in the vertical manner like -
calls
customers
vendors
how to do this?
thanks.
Try using display:inline-block if you want to be able to set the width and have them inline.
This won't work with Internet Explorer 6, an alternative would be using float:left. However, this can have complications as the elements will be removed from the normal flow and if there is no other content in the parent element then its height would be reduced to 0. This could be overcome by adding overflow:auto to the parent
Instead of display: block use float: left.
add the css properties float:left