IE 7 - css background image dissapearing - css

once again I have come across a frustrating error in IE 7 (works fine in IE 9)
I have 5 css classes, they are all EXACTLY the SAME except for the bg image and heigt (making this the same doesnt help). However on the last one the background image is not displayed in IE7.
here the code for the element that wont work:
.sm-nav_xing a {
line-height: 23px;
font-size: 13px;
background-image:url(images/smedia/xing.png);
background-repeat: no-repeat;
vertical-align:bottom;
display: block;
}
.sm-nav_xing a:hover {
background-image:url(images/smedia/xing_mo.png);
background-repeat: no-repeat;
}
here is the link to the page:
http://www.formunddrang.de/wp/?page_id=65
(bottom right - the last line of the list "Unser Unternehmen bei" XING image is missing in IE7
Thanks!

your </a> tag is not closed
<span class="sm-nav_xing"><a href="" target="_blank">Unser Unternehmen bei</span>

Related

IE - <a> tag not rendering properly, works in chrome, firefox etc

I have an issue with the rendering of a tag on my page in IE. The problem lies in the following; the tag, in IE does not fill the tag. The picture is the link but in IE the text takes precedence and overrides the image to make the text a link. Chrome and FireFox have no issues and render fine. My question is:
How can I make the image the link in IE and get it to work like it does in Chrome and FireFox?
The following images showcase my problem:
The problem in IE:
How it should render as per Chrome and FireFox:
The code for the section is as follows:
h1#site-name, div#site-name /* The name of the website */
{
margin: 0;
font-size: 2em;
line-height: 1.3em;
height: 115px;
background: url('/sites/default/files/images/ipark2-theme-assets/iPark_title.jpg') no-repeat top right;
margin-left: 212px;
color: transparent;
}
#site-name a:link,
#site-name a:visited
{
color: transparent;
text-decoration: none;
display: block;
height: 100%;
filter: alpha(opacity=50);
font-size:1em;
}
EDIT: addition of html markup:
<div id="logo-title">
<div id="logo"><img src="/sites/all/themes/zen/ipark2/logo.png" alt="Home" id="logo-image" /></div>
<div id="site-name"><strong>
Teaching and Learning Innovation Park
</strong></div>
</div> <!-- /#logo-title -->
</div></div> <!-- /#header-inner, /#header -->
You're applying an ID to two elements (your H1 and your div), make use of classes as at the moment you're just slapping an ID on everything.
I'm not sure if that will solve your issue, but it won't hurt and I know older versions of IE are more strict about recognizing an ID if it's not unique. Since you're targeting your anchor tag through that ID, it just makes me question if it isn't the issue.

Background image not displaying in chrome browser

I've created a small search widget, however the background doesn't appear when viewing it through chrome. I've tested IE, FF and safari which all appear OK.
http://paradigmsearch.co.uk/widget/?id=1
I'm usually reluctant to put layout issue on SO. However, I've been going over this for a while.
On the element:
<div class="widget" id="id_300x250">
I'm applying the following CSS definitions
.widget {
font-family: arial;
height: 250px;
width: 300px;
border: none;
background: url('/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}
The background just isn't visible. If this is a really silly mark-up / css oversight then I apologies profusely.
Currently using chrome browser Version 25.0.1364.172m
This is a pretty funny issue which I only figured out when opening your page in Chrome's incognito mode: Your background image is being blocked by AdBlock.
Also, for rendering purposes it's better practice to stick style elements in your page's head.
I've tested your code using chrome 25.0.1364.172m, all appear OK.
Check it: http://jsfiddle.net/rcHMc/
HTML
<div class="widget" id="id_300x250">
CSS
.widget {
font-family: arial;
height: 250px;
width: 300px;
border: none;
background: url('http://paradigmsearch.co.uk/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}

"text-decoration" and the ":after" pseudo-element [duplicate]

This question already has answers here:
“text-decoration” and the “:after” pseudo-element, revisited
(11 answers)
Closed 8 years ago.
Like all right-thinking people, I hate to click on a link and discover too late that it leads to a browser-crippling PDF or Microsoft Office file. I thought I'd make life a bit easier for people by displaying a little icon next to links that lead to such files. With IE8 finally supporting the :after pseudo-element, I thought the CSS declaration would be fairly simple:
a.file_pdf:after {
content:url('/images/pdf.png');
text-decoration: none;
padding-left: 5px;
}
In IE8, this works fine. In Firefox and Chrome, though, text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the icon. Is there a way to fix this without "cheating" by using an extra <span> tag?
I'm doing it in a different way, using attribute selectors, a background image and a padding (as xandy also suggested):
a[href$=".pdf"] {
padding-right: 21px; /* space for the icon */
background: url(graphics/pdf.png) no-repeat right bottom;
}
This works in IE7 too.
Here's a complete example
In IE7 the PDF icon won't be visible as it does not understand data URIs:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
color: #317408;
background: #eee;
}
a[href$=".pdf"] {
padding-right: 21px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: right bottom;
}
a:hover {
color: #eee;
outline: none;
background-color: #317408;
text-decoration: none;
}
</style>
</head>
<body>
<p>
Here's the PDF
</p>
</body>
</html>
how about using background image?
a.file_pdf {
background: url('/images/pdf.png') no-repeat right;
padding-right: 30px;
...
}
EDIT
Test and runs perfectly on my FF 3.5, should have no issue in most browser since only using traditional image replacement technique.

css background doesn't show up in ie 6 when using rules like #id.class

i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d

Disappearing Background Image in IE8

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.

Resources