Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    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

    Thanks
    Michael

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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


    --------------------------------------------------------------------------------
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    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

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    Here's the code:

    HTML
    Code:
    <p id="mission">
    <a href="#mission" class="box_title activeButton">Mission</a>
    </p>
    CSS
    Code:
    #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;
    		}

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    Anybody else got any ideas?

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by michaelespinosa View Post
    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.
    Last edited by effpeetee; 09-22-2007 at 11:18 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    re,
    Code:
    #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

  • #10
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    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:
    Code:
    		// 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 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/...o-preload2.asp

  • Users who have thanked Fang for this post:

    michaelespinosa (09-24-2007)

  • #11
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    The Solution

    Thanks that worked with a little change
    Code:
    		// 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!
    Last edited by michaelespinosa; 09-24-2007 at 06:14 PM. Reason: update


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •