Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 953
  • Last Modified:

IE7 CSS Background Image Not Showing

I'm having a problem with a background image not showing in IE7. I saw a few other solutions where they say to use position: relative. When I do this it BREAKS my header. The current code is position: absolute. It works fine in all relevant browsers EXCEPT IE7.

Here is the CSS:

.logo {
      height:149px;
      width:671px;
      background-image:url(../images/logo.jpg);
      background-color: #ffffff;
      padding:0px;
      margin: 0px;
      position:absolute;
}

Here is the HTML:

<div class="logo"></div>

Any help would be appreciated!

Thanks,

Tony
0
snobrdrt
Asked:
snobrdrt
  • 5
  • 5
1 Solution
 
Dushyant SharmaCommented:
try adding left and top property as 0
0
 
snobrdrtAuthor Commented:
This moved my logo far left. the problem I have is with SEEING the logo in IE7, not positioning.
0
 
Chad HaneyChief Technology OfficerCommented:
can you provide some more context?  Do you have a link we can use to see the problem or can you attach the code?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
snobrdrtAuthor Commented:
Sure can ... here's the link to the development server: http://63.135.115.128/
0
 
Chad HaneyChief Technology OfficerCommented:
Hmm nice IE8 running IE7 mode can see it, but IE7 can't.   Try changing the path of the image to  background-image:url(/images/logo.jpg); since there isnt any directory higher than the root.
0
 
Chad HaneyChief Technology OfficerCommented:
On a separate note, you may want to change the center_curve arrows to link to something like javascript:return false; or javascript:void 0;.  Right now if you click them to the end they let you hit # which jumps you to the top of the page if you were scrolled down and clicking the arrows.
0
 
snobrdrtAuthor Commented:
Still not working .... my IE8 running in IE7 mode doesn't see at all. It's strange because the top background shows up no problem!
0
 
Chad HaneyChief Technology OfficerCommented:
looks like IE is reading the css wrong.  might have something to do with background-repeat:none; since this is invalid.  It should be background-repeat:no-repeat;

Below is some valid css you could modify to:
.logo {
	height:149px;
	width:671px;
	background:#ffffff url(../images/logo.jpg) no-repeat top left;
	padding:0px;
	margin: 0px;
	position: absolute;
}

Open in new window

0
 
Chad HaneyChief Technology OfficerCommented:
Oh and I forgot to mention IE looks like it is reading the background-image(../images/logo.jpg) as being on the same line as POSITION:absolute.  Based on how your code is reading the repeat is the only thing that is making sense of what could be confusing IE.
0
 
snobrdrtAuthor Commented:
Al of the things you gave me did not work. Not your fault. the absolute positioning was just not working in IE7 no matter what. So what I did was rebuilt the CSS altogether.

What I came up with is below:

.logo {
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      float: left;
      padding-top: 0px;
      height: 149px;
}

As far as the JS on the arrows go, can you suggest how to do this? I'm a JS novice. The file which controls this is 2-jcarousellite_1.0.1.js.

At the bottom of this file it looks like after the string of photos finish, it's supposed to disable the next arrow. Actually on both the beginning "previous" button and the "next" button at the end.
0
 
snobrdrtAuthor Commented:
The solutions given did not fix the problem unfortunately. I had to rebuild the CSS altogether to get it to work. Good effort though. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now