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.
Related
I'm currently tuning a file input for displaying its content using a preview <img> tag.
<div id="image_preview">
<input> .....
<img id="preview" src="" class="img-fluid" alt="">
</div>
Using some CSS, it renders correctly on Chrome but I got a black stroke on every side of the square on Firefox (and only on Firefox). I tried to set a "border: none;" or even a transparent background but none of these are working as expected. Any hints?
Thanks for any kind of help :)
Fixed. I found that Firefox is adding these lines only on blank img src. I added a blank image base64 string and it's working fine now.
Thanks for your help :)
If needed : data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
Firefox usually adds a dotted line, this can be removed and an SO user answered this question:
How to remove Firefox's dotted outline on BUTTONS as well as links?
Basically writing in your CSS this ::-moz-focus-inner
.img-fluid::-moz-focus-inner {
border: 0;
}
I hope this solves your problem.
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
#media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
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...
In my website i wanted to provide 'copy protection' for images by defining them as backgrounds. Its working perfectly on Chrome, Safari and FF. But on IE the background images are not showing. You can check out the site www.kettik.com.
The approach i followed was something like this. Since the images are from the DB, i cannot define the background properties inside the css class and have to use the 'style' attribute to define it.
<div class="contentItemCover" style="clear:both;">
<img src="/images/sitegfx/spacer.gif", style = "background: url('xyz') no-repeat;">
</div>
.contentItemCover img {
width: 600px;
height: 290px;
padding: 0px !important;
}
Is there any way to work around this issue in IE ? Any help on this would be highly appreciated.
<img src="/images/sitegfx/spacer.gif", style = "background: url('xyz') no-repeat;">
Have you tried removing that comma?
I would just like to say that this "method" of protecting images has a few flaws.
You could easily right-click it and say "save background image..." (in IE) and in FF you can "view background image" and then save it anyway. or, you could simply screenshot it. I would advise watermarking images.
I am having trouble with IE7. I have a header, which is an IMG. Under it I have a div that represents a menu, they have to be attached to each other without space in between. Both are 1000px width. In Opera and FireFox the header and the menu are neatly attached to each other. However, in IE7, there is a small space between the menu DIV and the IMG. I have tried explicitly defining padding and margin on the IMG, however it does not work. I have had this problem before, so it seems to be a IE7 quirk.
My HTML Code:
<div id="middle">
<img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />
<div id="ctl00_menuPanel" class="menu">
<a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |
<a id="ctl00_leden" href="Leden.aspx">Leden</a> |
<a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |
<a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |
<a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |
<a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>
</div>
</div>
Try the IE Developer Toolbar, which will let you inspect what is going on with the elements and give you outlines of the areas covered. It might give you a better understanding of the problem.
The solution:
img {
padding: 0px;
margin: 0px;
display: block;
}
display: block
I run into this a lot. Rather than hunting down the specific behavior, try sanity checking by explicity setting padding and margin properties for img/div/etc selectors to 0, set border-style: none border-width: 0px border="0" etc.
IE Dev Toolbar is a must-have but whether it helps you with figuring out single-pixel issues is unlikely.
Instead of resorting to display block, note that IE7 does some seriously odd things with whitespace; try removing the whitespace between the image and the div, and see what happens.
CSS Resets (like the YUI Reset CSS) are great for this kind of thing. They reset paddings, margins, and other display properties on a lot of HTML elements to minimize the display differences.
The solution...display: block
That question couldn't be answered properly without knowing the rendering mode that the browser was in; you need to tell people what doctype you have if you have CSS rendering issues. The image behaviour you refer to is different in quirks mode as opposed to standards mode. A minimal test case must include a full HTML document and the CSS to reproduce the problem. Please don't ask people for help without giving them the information they need to answer easily without wasting their time...
The real solution:
#middle { font-size: 0; line-height: 0; }