Background images not showing in IE

HTML & CSS
1

HI,

I’m working on this page for a project as part of a course I’m doing,

and the background images I have declared in <div class=“tagline”> (wave) and <div class=“find”><a> (small button with arrow) are not appearing in IE, although in Mozilla they do!

http://alexanderlloyd.info/sennheiser/

Any ideas?

Thank you for your help!

2 

.find a {
background:url("../img/btn.png") no-repeat scroll left center transparent;
color:#0089CC;
display:block;
font:bold 11px Verdana,Arial,Helvetica,sans-serif;
height:30px;
outline:medium none;
padding-left:25px;
padding-top:15px;
text-decoration:none;
width:9em;
}

using firebug i had a look at your css if this is it above i would do a bit of trial and error to see what the problem is. Have a go with the following:


.find a:link,
.find a:active, //not really needed anymore but i generally add it out of habit!
.find a:visited,
.find a:hover {

display:block;
background-image: url("../img/btn.png");
background-repeat: no-repeat;
background-position: left top;
height: 30px;
width: 200px;
font-size: 11px;
font-weight: bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
padding: 15px 0px 0px 25px;
text-decoration:none;
}

changed a couple of things there, like the em width to a px value (although i dont think that is the problem) added a:link etc, changed your background to the individual elements and set the background image to the top left (before it was left center which i think may have been the problem).

If that doesnt fix it try removing the padding or the background position stuff, the main thing is to get the image showing up in all browsers and then you can work from there! :cool:

3

background-position: left top;

just realised that may be the wrong way round!

background-position: top left;

doh!

4

Thanks phillip, it seems IE doesn’t like the shortcuts :confused: also do you know why the page isn’t aligning vertically? Thanks!

5

ive never used the method you are using before but i would say for a start the vertical div is floated and doesnt have a clear:both after it like:



.clear
{
clear:both;
}

<div id="vertical"></div>
<div class="clear"></div>
<div id="content"></div>

however when doing vertical align stuff i either use the absoulte/negative margin layout:



<head>
.main_holder
{
    position: absolute; //position needs to be absolute
    height: 500px; //height of your content div
    top: 50%;
    margin-top: -250px; //half the height of your content
    width: 100%;
    text-align: center;
}
</head>
<body>


<div class="main_holder">
    <div class="content">
	test
    </div>
</div>

</body>

or the table method which although might be shunned I use for any vertical center stuff as it doesnt drop off the page if the browser is smaller than the content height


<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
	<tr>
		<td style="text-align:center;">
                            <div class="content>
                            content here
                            </div>
		</td>
	</tr>
</table>

sorry if anything is wrong btw im coding from memory, I’m sure someone else will pick up on any errors!