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...
Related
because a png image that I put in the header of my website on all browsers display correctly on Internet Explorer and 10 displays a square around it? I'm going crazy trying to figure out why. Can anyone help me? The image has no background, is transparent. I attach a screenshot for you to understand the problem better.
The blue part is the logo (which I covered)
<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png" style="border-style: none"/>
</a>
An even cleaner solution, if you never want the blue border, is to say so in a style sheet:
img
{
border-style: none;
}
And then reference that style sheet in the head element of your page:one
or
img
{
border: 0 none;
}
To get rid of the blue border you can use the border attribute for the img element like so:
You need to set the Border to 0 or None:
There are two ways to delete the Border using CSS or Direct way
Direct implementation is
<img src="image path" alt="" border="none">
Using CSS :
<style type="text/css">
a img {border:none;}
</style>
HTML
<img src="image path" alt="">
It's IE10 issue. Give it a style and remove the border.
<img src="/YourImage.png" style="border-style:none;">
Same issue here
People say that this is an issue of IE, but its actually not exactly an issue,
its just their browsers default CSS rule which in a lot of cases is overridden.
Basically if you are making a page that is compatible with a lot of browsers, specially if
IE is included in that case its wise to use Reset.css, which reduces the browser inconsistencies and which allows you to specify your own rules from scratch.
I know you got your answer, but I would recommend this approach.
I want to show a background image for my web page and I have one jpg for that purpose. I am using IE 8 and Notepad to write my html page. So I preferred to use body tag with Background property set to the image path. Very simple! But to my surprise, it does not show the image at all. When I tried the same path inside an Img tag on same page, it works. Also, when I tried another jpg in the body tag, it also worked!
<body background="images/myimage.jpg">
...
...
</body>
Finally, I decided to convert the image into png format and then it worked.
<body background="images/myimage.png">
...
...
</body>
Am I missing anything here in jpg case? Or body tag does not support jpg of particular size, something like that? This looks strange behavior to me. Any help appreciated.. thanks!
The HTML you have should work - check to make sure that the URL to the image is correct. Also ensure that the jpg file is saved in RGB format, as most browsers cannot display CMYK jpegs.
That being said, you should really use CSS to separate your HTML structure from the styling and UI concerns. To do this, remove the background property from the body element and instead put this in a CSS file:
body {
background-image: url('images/myimage.jpg');
}
It's better to work with CSS :
body { background-image: url(images/myimage.jpg); }
a cleaner solution is
<style type="text/css">
body{background:url("images/myimage.jpg");}
</style>
<body>
.....
....
</body>
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
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 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