7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

IE-8 issue

by samual james
6 replies
  • WEB DESIGN
    • |
HI,

I'm having a problem that I've never experience before. My IE is not displaying my background image properly from my css. Everything works fine in Firefox.


Its not displaying the image in full size in IE-8 but working fine in Firefox.

here is my code:


<html>
<title> User Is Locked</title>
<style type="text/css">
BODY
{
font-size: 12px;
color: #ffffff;
font-family: helvetica, arial, sans-serif;

background: url(backimage2.png) center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}
A:link
{
font-size: 12px;
color: #ffffcc;
font-family: helvetica, arial, sans-serif;
text-decoration: underline;
}
A:hover
{
font-size: 12px;
color: #ffff80;
font-family: helvetica, arial, sans-serif;
text-decoration: underline;
}
A:visited
{
font-size: 12px;
color: #ffffcc;
font-family: helvetica, arial, sans-serif;
text-decoration: underline;
}
A.glossary:link
{
color: #ffffcc;
padding-right: 1px;
padding-left: 1px;
font-size: 12px;
}
A.glossary:hover
{
font-size: 12px;
color: #ffff80;
font-family: helvetica, arial, sans-serif;
text-decoration: underline;
}
A.glossary:visited
{
padding-right: 1px;
padding-left: 1px;
font-size: 12px;
}
#contentArea
{
margin-left: 20px;
margin-top: 30px;
width: 350px;
}
#contentArea DIV
{
margin-top: 3px;
margin-bottom: 3px;
}
#messageArea
{
margin-left: 20px;
margin-top: 30px;
margin-right:20px;
margin-bottom:30px;
width: 100%;
font-size:18px;
}
#HeaderArea
{
width: 100%;
font-size:38px;
margin-left: 20px;
margin-top: 30px;
margin-right:20px;
margin-bottom:30px;
text-decoration:underline;
}
#BackLink
{
margin-left: 10px;
margin-top: 20px;
margin-right:10px;
margin-bottom:20px;
}
</style>


<script type="text/javascript">

function PopWindow(URL) {
window.open(URL, "_blank", "status=no,toolbar=no,menubar=no");
}


</script>


</head>
<body>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQK5rqUhAoKZkp8OAqe2+JwBAvjKiMIDAo69k2dqyobz64G/Ur19ytWBvJtbl8YRvg==" />
</div>

<div id="HeaderArea">
SAP Desktop
</div>

<div id="messageArea" align="justify">
Your SAP logon attempt has failed as your user-Id is Locked. Please contact your normal technical support channels.

<br>
</div>
<br>
<div id="BackLink">
please click <a href="javascript:goBack();">here</a> to try again
</div>

</body>
</html>



Please some one help me for this.. as i am working on it past two days..
#ie8 #issue
  • Profile picture of the author samual james
    Plz help me to resolve the issue
    {{ DiscussionBoard.errors[6282638].message }}
  • Profile picture of the author benjigbird
    hmm i would think that it maybe the way the css is set up. I use the following code for my background images and always works in all browsers in all sites. try this instead:

    body {
    background: url('yourimage.png') top center repeat-x;

    change is you want image to repeat but it usually works.
    Signature

    CLICK HERE --> WSO: GUARANTEED GOOGLE 1ST PAGE RANKINGS!!! <-- CLICK HERE

    {{ DiscussionBoard.errors[6288407].message }}
  • Profile picture of the author aeboi80
    Allow me to explain the common problem you are encountering here. You are using the background cover attribute which is a CSS3 attribute. IE 8 does not support CSS3 attributes, so its not going to work.

    Do not cry just yet though, there is a work around. You simply need to add the following to your body{ } CSS tag

    filter: progidXImageTransform.Microsoft.AlphaImageLoader (
    src='backimage2.png',
    sizingMethod='scale');

    -ms-filter: "progidXImageTransform.Microsoft.AlphaImageLoade r(
    src='backimage2.png',
    sizingMethod='scale')";
    This makes use of an Internet Explorer filter to accomplish the same effect. This will work for you, but for others that may stumble upon this I just want to let you know this will only work if the background image you are using is its own self-contained image. In other words, if you have a CSS image sprite which your background image is contained it, this will NOT work.

    Cheers,

    Let me know if you have any issues.
    {{ DiscussionBoard.errors[6288828].message }}
  • Profile picture of the author aeboi80
    Dang auto smiles where you see the smiley faces you actually need to type in : D just don't have a space between the : and the D

    I also just created a pastebin of the code which you view at pastebin.com/WttNVGGK
    {{ DiscussionBoard.errors[6288843].message }}
  • Profile picture of the author aeboi80
    After looking at that code again I realized the warrior forum added a bunch of spaces to the code too. Just use the code from the pastebin url I posted above. Its accurate!
    {{ DiscussionBoard.errors[6288854].message }}
  • Profile picture of the author samual james
    thanks for your input , i will try it and get back to you guys
    {{ DiscussionBoard.errors[6302858].message }}

Trending Topics