This one is going to be very specific I guess... My CSS works flawlessly on all browsers exept IE8. EI10's IE8 emulation does not reflect this bug.
Here is my CSS line that causes problem:
.flag{
display:block;
width:24px;
height:16px;
background-image:url('../img/flags_sprite.png');
background-repeat:no-repeat;background-position:0 0;
}
Note that this CSS part is condensed on a single line in production like so:
.flag{display:block;width:24px;height:16px;background-image:url("../img/flags_sprite.png");background-repeat:no-repeat;background-position:0 0}
The width is not taken into consideration by the browser, when inspecting the Styles parsed by the browser I can see this:
.flag
background-image: url(../img/flags_sprite.png); WIDTH: 24px
display: block
background-repeat: no-repeat
background-position: 0px 0px
height: 16px
Notice that the width is lost as it is treated as part of the background-image declaration. I am mesmerized by this, seeing that the width declaration is textually before the background-image in the CSS file...
What are my options here?
I saw that some time ago, solution that worked for me was to write background definition in single line:
background: url("../img/flags_sprite.png") no-repeat 0 0;
Another idea is to split definition of .flag into 2 parts, also works for me:
.flag{
display:block;
width:24px;
height:16px;
background-repeat:no-repeat;
background-position:0px 0px;
}
.flag{
background-image:url('../img/flags_sprite.png');
}
Another solution I ran into is to define all 5 background-xxx properties (-color, -image, -repeat, -position, -attachment). Lack of any cause problem. Example:
.flag{
background-color: transparent;
background-image:url('../img/flags_sprite.png');
background-repeat:no-repeat;
background-position:left top;
background-attachment: fixed;
display:block;
width:24px;
height:16px;
}
Related
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I have a small issue trying to get the following to work, and am not sure if it is something that CSS3 is designed to deal with or not. I have looked around and found that multiple background images are supported, however trying the many examples have resulted in nada.
This is the primary CSS code for rendering my buttons:
.button {
background:#eee url(images/button.gif) repeat-x 0 0;
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
The above code produces the standard buttons which are fine. But now I want to add icons on certain buttons, such as a print button. I use 2 sets of additional CSS class:
input.addImage {
background-repeat: no-repeat; /* once */
background-position: 5px 2px;
padding-left: 16px;
vertical-align: middle;
}
And:
input.Print {
background-image: url(../img/buttons/print.png); /* 16px x 16px */
}
As you can see my image is in fact 16x16 which fits nicely into the buttons. However the original background image is stripped away completly, leaving the background color as transparent.
I am sure that if its possible, its something basic I am overlooking, and look forward to figuring this out.
Finally the code for the button:
<input type="button" class="button addImage Print" ... >
Thank you for your valuable time.
When you apply a property in CSS, it completely overwrites any previously defined property for that element. What you need to do is tell it to apply 2 backgrounds to the element, which is done like this:
.button.Print {
background-image: url(images/button.gif), url(../img/buttons/print.png);
}
Multiple backgrounds is only supported within the same CSS class / element definition. Means, you have to set both backgrounds in .button.
Your .print has to contain the default background too seperated by a comma and followed with your print.png icon.
edit
My answer wasn't really clear about that. you have to specify the background first, which should be on top of the other one. Here's some example code with random pictures.
Demo: http://jsfiddle.net/RzWfp/
.button {
background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg);
border:solid 1px #b1a874;
color:#7f7f7f;
font-size:11px;
padding:2px 6px 2px 6px;
cursor:pointer;
line-height:14px !important;
}
.button-test {
background-image: url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg);
background-position: left center, center center;
background-repeat: no-repeat;
padding-left: 20px;
}
I am trying to get rid of the thin border that appears for every image in Chrome & IE9.
I have this CSS:
outline: none;
border: none;
Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
outline: none;
border: none;
}
.icon {
width: 16px;
height: 16px;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: -48px -144px;
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>
See attached screenshot:
It's a Chrome bug, ignoring the "border:none;" style.
Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.
So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
Voila! Works everywhere and gets rid of the outline/border in Chrome.
Instead of border: none; or border: 0; in your CSS, you should have:
border-style: none;
You could also put this in the image tag like so:
<img src="blah" style="border-style: none;">
Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:
Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src
For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:
IMG[src=''], IMG:not([src]) {opacity:0;}
It will hide the IMG tag completely until you add a src
Add attribute border="0" in the img tag
If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
This will make the border be hidden in the container's overflow and you won't see it.
Turn this:
Into this:
I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:
css:
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
<ins class="noborder"></ins>
Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.
In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by #Amareswar above
using border="0" is an affective way, but you will need to add this attribute for each image.
i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
inline css
<img src="logo.png" style="border-style: none"/>
You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this
img:not([src]) {
text-indent: 99999px !important;
}
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
same as what #aaron-coding and #randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something
(apparently I can't do a code block in my original comment)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
I fix it using padding style:
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
The border is disappearing, while you are increasing padding value. Find your own value.
it worked for me. It took days which made me crazy.
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
the solution is to set the outline style to none (i.e.) outline:none, it's work with Me
First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:
content:url("url of your blank png");
That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:
<style>
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>
The default weight of 1px for line-through property in CSS is great for body copy at 1em.
Unfortunately for larger items such as a price set at 3em on an offer site, 1px is really too light. Is it possible to set a heavier line weight for line-through?
If not, what alternatives should I consider, such as an image overlay for example?
You can do something like this in modern browsers
.strike{
position: relative;
}
.strike::after{
content: '';
border-bottom: 4px solid red;
position: absolute;
left: 0;
top: 50%;
width: 100%;
}
I <span class="strike">love</span> hate hotdogs
Made a fiddle of it too:
http://jsfiddle.net/TFSBF/
Here's another way to do it with a fake strike-through (which looks great and works on all browsers, albeit with the cost of a tiny imageload). The image is a black 1px by 2px box.
del {
background: url(/images/black-1x2.png) repeat-x 0 10px;
}
I think this is a browser implementation issue.
See this page http://jsbin.com/arucu5/2/edit
In IE8 and Firefox the line through width increases with the font size.
However in Safari and Chrome it remains at 1px
You can always a dirty Ghetto method like this
http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html
This should work:
<style>
span.strike {
font-weight:bold; /*set line weight here*/
color:red;
text-decoration:line-through;
}
span.strike>span {
font-weight:normal;
color: black;
}
</style>
<span class="strike"><span>$20.00</span></span>
I've found another approach to set line weight for multiline text:
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
Here is an example:
http://output.jsbin.com/weqovenopi/1/
This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.
Only one disadvantage - background renders under the text.
You can thicken the line with style.
For example:
text-decoration-thickness: 3px;
I've got some button rollovers that work fine in browsers other than IE. I'm not using JQuery and this isn't IE6 -- I haven't tested it in IE6 yet. It's in IE8.
You can see what's happening here (look at it in IE vs. Firefox):
http://www.brighttext.com/socialtech/index.html
I'm using the technique of showing one or another button in response to a rollover by changing the background-position. I've tried various solutions proposed for IE6 issues but nothing has worked. Can anyone see what's going on here? And why can we see the Home button in IE, but not the others?
Code:
<ul>
<li id="homeLink" class="ord">Home</li>
<li id="faqLink" class="current">FAQ</li>
<li id="speakersLink" class="ord">Speaker Info</li>
<li id="sponsorsLink" class="ord">Sponsor Info</li>
</ul>
css for the first two buttons (I did this for all four) inside the div, which is called mastheadLeft:
#mastheadLeft li#homeLink a {
height: 32px;
width: 86px;
display: block;
text-indent: -1000em;
background: url(../images/home_dual.jpg) no-repeat left top ;
border: none;
}
#mastheadLeft li#homeLink.current a {
background-position: left top;
}
#mastheadLeft li#homeLink.current a:hover {
background-position: left top;
}
#mastheadLeft li#homeLink.ord a {
background-position: left bottom;
}
#mastheadLeft li#homeLink.ord a:hover {
background-position: left top;
}
#mastheadLeft li#faqLink a {
height: 34px;
width: 75px;
display: block;
text-indent: -1000em;
background: url(../images/faq_dual.jpg) no-repeat left bottom;
border: none;
}
#mastheadLeft li#faqLink.current a {
background-position: left top;
}
#mastheadLeft li#faqLink.current a:hover {
background-position: left top;
}
#mastheadLeft li#faqLink.ord a {
background-position: left bottom;
}
#mastheadLeft li#faqLink.ord a:hover {
background-position: left top;
}
i've tried a lot of stuff including recreating your project (copying and pasting your source and css from the site given). from my side using my own images, it works perfectly in both IE 8 and firefox 3.
however i tried
http://www.brighttext.com/socialtech/images/faq_dual.jpg
in both browsers. and it opens the image in firefox but opens an unavailable image in IE 8. so maybe you should have a look at where your images are stored. like i said, with my test images, it seems to work perfectly.
however i tried
http://www.brighttext.com/socialtech/images/faq%5Fdual.jpg
in both browsers. and it opens the
image in firefox but opens an
unavailable image in IE 8.
I also had a problem with a jpg that did not open in IE but opened in other browsers it was due to the image being in CMYK rather then RGB.
Reference:
http://www.computerhope.com/issues/ch001283.htm
Well i think there are many reasons which cause this problem. I was having same problem and could not understand how to solve the issue then i realize i did not put a space between ")" and "left"
background:url(../images/sample.jpg)left top no-repeat
After adding a space between these two solved my issue in ie6,7 and 8.
Is there a reason some of the images are PNGs and some are JPGs? I'm curious if the missing-file issue has something to do with file type. Probably not, but I'm interested.
Also, when I do background images in anchor tags like this, the image has the no-hover half sitting on top of the hover half and do my CSS like this:
#mastheadLeft li a {
height: 34px;
display: block;
text-indent: -1000em;
border: none;
}
#mastheadLeft li a:hover, #mastheadLeft li.current a {
background-position:0 -34px;
}
#homeLink a {
width: 86px;
background: url(/images/home_dual.jpg) no-repeat;
}
#faqLink a {
width: 75px;
background: url(/images/faq_dual.jpg) no-repeat;
}
That makes the CSS a lot cleaner and sets the exact same rules for all elements except the ones that are unique which, in this case, is just the background image used and the width. That way if something's going wrong, it'll be wrong for all the images.
I also use exact pixels instead of depending on the generic "top," "left," etc. values in CSS. More exact control.
Perhaps not a final answer, but at least it'll clean up your CSS so it's easier to find the problem.