...

View Full Version : CSS Issue or IE Issue?



michaelespinosa
09-21-2007, 07:38 PM
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

effpeetee
09-21-2007, 08:12 PM
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

effpeetee
09-21-2007, 08:21 PM
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


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

michaelespinosa
09-21-2007, 09:33 PM
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

michaelespinosa
09-21-2007, 10:07 PM
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;
}

effpeetee
09-21-2007, 11:47 PM
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

michaelespinosa
09-22-2007, 12:16 AM
Anybody else got any ideas?

effpeetee
09-22-2007, 10:04 AM
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.

bazz
09-22-2007, 11:20 AM
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

Fang
09-22-2007, 11:56 AM
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

michaelespinosa
09-24-2007, 05:09 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum