Solved

IE7 CSS Background Image Not Showing

Posted on 2011-02-23
11
930 Views
Last Modified: 2012-05-11
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
Comment
Question by:snobrdrt
  • 5
  • 5
11 Comments
 
LVL 14

Expert Comment

by:Dushyant Sharma
ID: 34958919
try adding left and top property as 0
0
 
LVL 1

Author Comment

by:snobrdrt
ID: 34958940
This moved my logo far left. the problem I have is with SEEING the logo in IE7, not positioning.
0
 
LVL 12

Expert Comment

by:Chad Haney
ID: 34962104
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
ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

 
LVL 1

Author Comment

by:snobrdrt
ID: 34962271
Sure can ... here's the link to the development server: http://63.135.115.128/
0
 
LVL 12

Expert Comment

by:Chad Haney
ID: 34962326
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
 
LVL 12

Expert Comment

by:Chad Haney
ID: 34962360
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
 
LVL 1

Author Comment

by:snobrdrt
ID: 34962380
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
 
LVL 12

Expert Comment

by:Chad Haney
ID: 34963856
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
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
ID: 34963873
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
 
LVL 1

Author Comment

by:snobrdrt
ID: 34966586
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
 
LVL 1

Author Closing Comment

by:snobrdrt
ID: 35027560
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question