input.icon
{
border: 0;
cursor: pointer;
margin: 0;
padding: 0;
width: 16px;
height: 16px;
text-indent: -1000em;
}
input.edit {
background: transparent url('/edit.png') no-repeat center top;
}
On an element like:
<input type="submit" class="icon edit" onclick="...." />
It renders fine in firefox, without the text on the image also. In IE it shows the text of the value attribute.
Why is that?
Actually i'm not even setting the value attribute and it is defaulting to 'submit query'.
Also, I thought my CSS could be more specific by doing:
input.icon {
...
}
input.icon .edit {
...
}
But that didn't work for me not sure why, so I changed the 2nd definition too:
input.edit {
..
}
Why didn't input.icon .edit work?
Could I just as well put these styles on a div element? What's the difference?
You've got a few questions there. For the first one. I'm not seeing the issue in IE8:
http://jsfiddle.net/rfYrq/
I do not see the text in IE8.
Question 2: "Why didn't input.icon .edit work?"
The meaning of input.icon .edit is, any element with the class of edit within an input element with a class of icon. What you really wanted was any input with both the edit and icon classes. That would be like this:
input.icon.edit
Question 3: "Could I just as well put these styles on a div element?"
Yes. If you are overriding the style of the button with your own css and apparently overriding the functionality of the button with an onclick, you can just use a div or a span or some other element depending on your situation.
Related
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}
I have some sliding door button css.. I use a button tag and two inner spans.
I have this to specify the background image of a normal button;
button span {
background: url(button_right.png) no-repeat top right;
}
Which is the default button colour. I then have a 'gray' button (i give the button a class of 'gray').
button.gray span {
background: url(button_right_gray.png) no-repeat top right;
}
For some reason .. IE(8) doesn't like this and ignores the gray css keeping the original image as the background. However, the following "hover" css DOES work in IE;
button.gray:hover span span {
color: #6c6c6c;
background-position: left -29px;
}
I thought that 'button.gray span' has higher specificity than just 'button span' (it does in all other browsers).
EDIT:
Ok, so I've discovered the problem. In my CSS declaration I had the following
button.gray span,
button:disabled span {
background: url(button_right.png) no-repeat top right;
}
If I remove the button:disabled span from the declaration list, it works!
IE does not support the :disabled pseudo class selector. IE's behaviour is to skip the entire rule when it encounters an invalid or unrecognised selector (which is actually in line with the specification - even if not supporting :disabled in the first place is not!), so that would explain what you're seeing.
have you tried adding !important to it? i.e.
button.gray span {
background: url(button_right_gray.png) no-repeat top right !important;
}
Did you try looking at the image itself? Using colours instead of images, ie8 seems to display the .gray class fine:
http://screencast.com/t/YzA4MGEx
As per my edit;
Ok, so I've discovered the problem. In my CSS declaration I had the following
button.gray span,
button:disabled span {
background: url(button_right.png) no-repeat top right;
}
If I remove the button:disabled span from the declaration list, it works! What is IE's issue with button:disabled as it completely stops listening to the entire declaration?
I am using the following CSS class to hide a textbox in an asp:UpdatePanel to accept input from a USB card reader.
<style type="text/css">
.USBBox
{
position: absolute;
left: -999em;
}
</style>
When I click an asp:LinkButton control that is configured to be an asp:AsyncPostBackTrigger for the update panel the control appears on the page and the CSS class is not applied to the asp:TextBox control.
This behavior is displayed in IE7. It works as expected in FireFox 3.5.7
What would cause this behavior and how do I resolve it
There my be a specificity issue. Try
input.USBBox{
position:absolute!important;
left:-999px!important;
}
And if it works, back out of the !important tags to see what actually caused the issue.
Also declare display:block; just in case.
I think you should use:
.USBBox
{
display: none;
}
or maybe use a asp:HiddenField instead of a textbox.
try
.USBBox
{
display: block;
width: 100px; /* or however wide you want it */
position: absolute;
left: -999em;
background: #ff0000; /* visually ensure the class style is being applied, remove it later */
}
position should only work on items that are displayed as a block. form items by default are displayed inline.
also just for giggles set the background color just to make sure the input box is taking class.
Could it be that the new control comes with multiple classes ?
Because IE is having issues when combining classes on a single element..
this will be quite difficult to explain. I hope I'm able to.
I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:
.button{
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #999;
cursor: pointer;
text-decoration: none;
color: #606060;
}
Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings
background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;
The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like
<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>
On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.
To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg
On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg
Does anyone have any suggestion on how I could fix this??
//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.
This is an old bug. You need to add overflow:visible to the button. There is more here:
http://jehiah.cz/archive/button-width-in-ie
and here:
http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/
Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.
I am not quite sure how apply reset for submit buttons ..
but you can try following and test
/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td { margin:0;padding:0; }
body { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400; }
ol,ul { list-style:none; }
caption,cite,code,th { font-style:normal;font-weight:400; }
fieldset,img { border:0; }
caption,th { text-align:left; }
:focus { outline:1px dotted #eee; }
table { border-collapse:collapse;border-spacing:0; }
hr { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button { cursor:pointer; }
As per #Andrew's answer you can try * html input { overflow: visible; } also.