CSS Issue or IE Issue?

I am working on a little page using just xhtml, css and js. It works fine in every browser except our beloved ie family. I am using the accordian effect and the buttons I'm using to trigger the effect are just <a> tags with some css to use bacground pictures. The pictures/buttons don't show up in ie and I don't know why. Any help would be great. Heres the link (http://www.rockchurchfamily.com/mensconference/test.htm)

Thanks
Michael

This was the result of a w3 validation.
May be of use to you.

Frank

URI : http://www.rockchurchfamily.com/mensconference/test.htm
60 #header Value Error : background-repeat none is not a background-repeat value : none

↑ Top

Warnings (1)
URI : http://www.rockchurchfamily.com/mensconference/test.htm
73 Same colors for color and background-color in two contexts body and a

Possible Values
Value Description
repeat Default. The background image will be repeated vertically and horizontally
repeat-x The background image will be repeated horizontally
repeat-y The background image will be repeated vertically
no-repeat The background-image will be displayed only once

Frank


--------------------------------------------------------------------------------

Frank,

They both validate now. Sorry I should have done that before posting here. But I am still having the issue in ie7. When the page first loads they images show but then they disappear. Any other suggestions?

Thanks,
Michael

Here's the code:

HTML

<p id="mission">
<a href="#mission" class="box_title activeButton">Mission</a>
</p>

CSS

#mission {
width: 790px;
height: 35px;
position: relative;
text-indent: -5000px;
overflow: hidden;
}

#mission a {
display: block;
width: 790px;
height: 35px;
background-position: top left;
background-image: url(images/mission.jpg);
background-repeat: no-repeat;
}
#mission a:hover {
background-position: bottom left;
}
#mission a:active {
background-position: bottom left;
}

Sorry Michael, but I have been unable to find what is wrong. I have a program CSSVista which enables me to watch the results as I alter the CSS, but I have not found what is causing the overlay.

The code looks OK to me.

Frank

Anybody else got any ideas?

Anybody else got any ideas?
If you alter thus, the word comes back in IE but the typeface is different.
May be this will help you.

Frank

#mission, #dates, #speakers, #trailers, #register, #highlights, #contact {
width: 790px;
height: 35px;
position: relative;
text-indent: 5px;
overflow: hidden;
}

Have you tried this?

http://litmusapp.com/cssvista/
It's well worth a look.

re,

#mission, #dates, #speakers, #trailers, #register, #highlights, #contact {
width: 790px;
height: 35px;
position: relative;
text-indent: -5000px;
overflow: hidden;
}



I think it would be easier if you made the body tag use those values as the default css settings. Then, if you have a div which wants something else, you can specifiy it for that div.

The text indent is ,I think, the cause of your disappearing images. -5000px means they finish up about two feet to the left of your browser :)

bazz

This appears to be a problem of passing 'empty' values to style color and/or background in combination with the black background.
Passing 'empty' or transparent values to styles can, with some elements in IE, result in giving that element the color/background value 'black', essentially hiding the background image.
Change this function: // Create the accordion
var myAccordion = new fx.Accordion(
myBox, myBoxOpen, {

opacity: false,

onActive: function(tog){
tog.setStyles({color: 'transparent', background: 'transparent'});
},
onBackground: function(tog){
//tog.setStyles({color: '', background: ''});
},
alwaysHide: true
}
);
}The hidden menu items images will re-appear.
I would advise asking on the mootools forum (http://mad4milk.net) for a complete solution.

The basic effects can also be achieved with css:
http://www.cssplay.co.uk/menus/tabmenu.html
http://www.tanfa.co.uk/css/examples/rollover-images-no-preload2.asp

Thanks that worked with a little change

// Create the accordion
var myAccordion = new fx.Accordion(
myBox, myBoxOpen, {

opacity: false,

onActive: function(tog){
//tog.setStyles({color: 'transparent', background: 'transparent'});
},
onBackground: function(tog){
//tog.setStyles({color: '', background: ''});
},
alwaysHide: true
}
);
}


I just commented out both "tog.setStyles" because I didn't really need either one. Thanks for the help everybody I appreciate all of your tips and ideas!