I'm styling a form, using an input where type=image. It renders fine in FF, but not in IE (pic below), where it adds a bevelled border. It's also showing the little icon thing over my image, although I'm guessing that's because it's a form element with no action associated, perhaps? -
styling for the input is as follows, all pretty simple:
input.search-button {
display:block;
float:left;
width:25px;
height:25px;
background:url(images/search.png) no-repeat;
}
I've tried adding border:0, no joy. Any ideas as to how to best tidy up the presentation?
For the border, try setting border:none;. For the input, I would double-check your path. It looks like you are trying to use a background image INSTEAD of an actual image in the src attribute.
Also, try leading your image paths with a forward slash (/) which will take you all of the way to the root, and then drill down from there.
Hope this helps!
Matt
I hope IE9/any can be rendered as IE8/IE7 by adding below line of meta in the head of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
then the same css fits for every IE version
Related
I have tried different options and also the ones posted on stackoverflow. But nothing seems to work. I have logo.png file in /public/images and a custom.css file in stylesheets.
I want the background of every page to be logo.png (full screen)
I tried the following after searching a lot. But i got nothing. The background is just blank.
Please help
body{
background: url('../images/logo.png') repeat-x ;
text-align:center;
color:#fff;
}
You definitely do NOT want to use repeat-x
To illustrate why, Use the following link http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image and paste the code below and see what happens, then remove the repeat-x and see the results
<html>
<head>
<style type="text/css">
body {
color: white;
background:url('paper.gif') repeat-x;
}
</style>
</head>
<body>
<h1>Hellos World!</h1>
</body>
</html>
If your image is not displaying after remove repeat-x, it will most likely be a path issue (as others have already pointed) out or a bad image.
The only other thing is if there are other classes/divs defined in your css that override the background property that you have set in the body text. Others have suggested you use firebug. I have to whole heartedly agree. Firebug is pretty essential when dealing with HTML and CSS issues.
Firebug is available to Chrome and Firefox browsers (Firefox as a plugin, Chrome by default) but I'm unsure of other browsers.
Instead of repeat-x put repeat.
Other than that check if the path to your image is correct.
Path problem ? ^^
Can you see your image if you just navigate to it ? If not try to use firebug to see what is the problem and to solve it easily.
Full Screen background image :
I found an interesting article on css-tricks may be usefull, the author offers some solutions.
There's a JQuery plugin I've used for full screen background images, and it's called bgStetcher. You can use it to stretch background images to fill the screen. Such a thing cannot be done in CSS.
I'm trying to use CSS sprites to reduce the number of HTTP requests on page. I want the these images to render without borders.
As best I can tell I have configured the CSS correctly, yet I am experiencing the render issues below (note: The Google logo is intentionally clipped):
As you can see, all the browsers still render a border. Also, IE and FireFox render 'broken link' type icons as well.
The HTML used in this example is:
<html>
<head>
<style>
img {border:none}
img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px; width:100px; border:none;}
</style>
</head>
<body>
<img class="css_sprite"/>
</body>
</html>
Can anyone tell me what I'm doing wrong here? I'm sure it must be something simple. Thanks in advance.
The border belongs to this:
<img class="css_sprite"/>
It's a border drawn by the browsers due to a missing image. Here you don't specify any src so the browsers add the border and missing image graphic instead.
Change the img to some other element instead like div or span instead.
I found an excellent solution just put a blank transparent image (preferably 1x1 png) within the src elements...:) as the image is transparent it will not visible at all src does not go blank and your purpose is solved...
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?