I'm missing something obvious and simple but can't see it no matter how hard I squint or glare at the screen.
I'd like to use an image as the background or instead of the button. It's not displaying.
markup and css:
#switch {
background: url("../images/swap.png") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
<div class="conversionFormE" id="switch1">
<label> </label>
<input type="button" id="switch" name="switch" value="SWITCH!" onclick="switchUnits()"/>
</div>
thanks for any help!
If the image is too big, it may be clipped to the point where you don't see it. Try adding:
background-size:75px;
to see if it appears. (Note that IE prior to 9 doesn't support background-size, so if you need support old IE, the easiest solution is to shrink the image file. Or use a filter to shrink it in IE).
Related
I'm working on a drag and drop field for files and so far I have been able to style it however I wish. Except I need to somehow add text that says 'drag and drop' inside the area. I'm not really sure how to accomplish this.
I have tried adding content:'drag and drop';
And I have tried a background image, but it was not scalable and not something that I believe is the right solution.
my html looks like this
<input type="file" class="form-control" name="uploadCover" value="" />
and my css looks like this
input[type="file"]{
padding-bottom: 4em;
padding-top: 2em;
width: 100%;
border: 1px dashed #000;
}
input[type="file"]:hover{
border: 1px dashed #67a5c5;
}
and the field looks like this...ignore the ugly yellow!
Any help or ideas would be wonderful! I'm really trying to avoid javascript.
How about this for a starting point? It uses a :after pseudo element, so that the content you're adding follows the control itself.
It is "centre aligned" (using margin auto 50%) to avoid overlapping the filename text, but you'll probably need add some more CSS to make sure this doesn't happen on your web page.
input[type="file"]:after {
content: "Drag and drop";
display: block;
min-width: 20em;
margin: auto 50%;
}
http://jsfiddle.net/jrG7v/
Edit: as pointed out this only works in Chrome. No text is displayed in Firefox, and IE11 (seems I've been upgraded since I last used IE10) still displays the text-style input box. Hopefully somebody else has a better answer.
For compatibility with browsers, I'd go with:
<div>
<input type="file" class="form-control" name="uploadCover" value="" />
<div class="drag">Drag and Drop</div>
</div>
div.drag { min-width: 100px; margin-top: -25px; padding-left: 10px; font-family: arial; font-size: 12px;}
Fiddle:
http://jsfiddle.net/jrG7v/3/
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.
I'm currently working with a textbox that has a background. I was wondering if it's possible to center text (vertically) inside the textbox.
important: it's perfectly centered in firefox. Only IE it writes it too high for some reason. I've tried line-height, padding, and margin. Nothing works. Any ideas?
EDIT: This is my current CSS. I should say that I've tried the margin-top method and it didn't work for me. Also, as I mentioned, this is only for IE. I have IE specific style sheets so no worries.
.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }
For IE, I have the following:
.textValue { font-size: 14px; }
as for HTML:
<tr>
<td><label for="name">name</label></td>
<td><input type="text" name="name" id="name" class="textValue" value="" /></td>
</tr>
Thanks,
Amit
I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:
For idiot IE, you can use this IE specific hack:
margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */
You might want to try other similar properties if you want rather than margin-top.
Did you try?:
input {vertical-align: middle;}
I know this one's a bit old, but I've just run into the same problem. The solution given here didn't help me which seemed strange. In my case it was the line height that was set to "1em". Changing the line height to something that resembled the height of the text box, rather than the size of the font it contained was the solution. This also continues to function as expected in Firefox, etc.
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.