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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Not Working with FF4 or IE (Please Help)

    The Page: B12B

    Ok so I've been building a sites a bit differently, I've been using a new free host & I've been trying to build with CSS3 and little to no Java/JavaScript/Jquery but I'm at my whits end right now... I've designed a layout that I love using and is CSS3 of course and no J, but FF & IE don't work with it (chrome works, my droid views the page 100%, and all other droids I've checked on use it just fine regardless of browser on the phone).

    Oddly enough If I use just images instead of text it does work...
    I've tried adding in code (Jquery & IE hacks) but nothing (out the main 3 I tried at the bottom, tried other methods but they failed too, unless I'm doing something wrong)...


    Here is the CSS:
    Code:
    #box {
    	text-align: left;
    	width: 700px;
    	margin: 30px auto 0 auto;
    	background:transparent;
    	overflow: hidden;
    }
    
    ul#slider{
    	-webkit-border-radius: 10px;
            text-align:center;
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	position: relative;
    	width: 700px;
    	height: 650px;
    	overflow: hidden;	
    }
    
    ul#slider li {	
    	width: 700px;
    	height: 650px;
    	position: absolute;
            background-color:#646464;
            background: url(bodybg.jpg) left repeat-y;
    	}
    	
    ul#slider li p {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	z-index: inherit;
    	color: #fff;
    	background: rgba(0, 0, 0, .5);
    	width: 100%;
    }
    
    ul#slider li p span {
    	line-height: 1.2em;
    	padding: 10px;
    	display: block;
    }
    
    /* Animation for the :target image. Slides the image in. */
    
    @-webkit-keyframes moveTarget {
    	0% {
    		left:-700px;
    		
    	}
    	
    	100% { 
    		left:0px;
    	}
    }
    
    
    ul#slider li:target {
    	-webkit-animation-name: moveTarget; 
    	-webkit-animation-duration: .5s; 
    	-webkit-animation-iteration-count: 1;
    	top:0px;
    	left: 0px;
    	z-index: 10;
    }
    
    /*
    Animation for the current image. Slides it out the frame and back to the starting position. 
    Adds a lower z-index than the now current image.
    */
    
    @-webkit-keyframes moveIt {
    	0% {
    		left:0px;
    		
    	}
    	50% {
    		left:700px;
    		
    	}
    	100% { 
    		left:-700px;
    		z-index: 5;
    	}
    }
    
    ul#slider li:not(:target) {
    	-webkit-animation-name: moveIt; 
      	-webkit-animation-duration: 1.5s; 
      	-webkit-animation-iteration-count: 1;
    	top:0px;
    	left: 0px;
    }
    Here is the HTML:
    Code:
    <div id="box"> 
     <ul id="slider"> 
    <!-- do not remove ;)--> 
        <li id="home"> 
          <div id="loader" class="loader"></div>
    <h1 class="title">B-12-B</h1>
    <br />
    <img src="http://img.photobucket.com/albums/v322/Hakarune/XS/xs.png"  height="550" width="auto">
        </li> 
        <!--end section--> 
    
        <li id="events"> 
           <h2>Events</h2> 
          <div id="loader" class="loader"></div>
         <iframe src="https://www.google.com/calendar/b/0/embed?showNav=0&showTabs=0&showCalendars=0&height=500&wkst=1&bgcolor=%23666666&src=oosdlqv0tpkuopep6ci31ieuts%40group.calendar.google.com&color=%23691426&ctz=America%2FLos_Angeles" style=" border-width:0 " width="700" height="500" frameborder="0" scrolling="no"></iframe> 
        </li> 
    <!--end section--> 
    
    
        <li id="buy"> 
           <h2>Buy</h2> 
          <div id="loader" class="loader"></div>
            <img src="http://img.photobucket.com/albums/v322/Hakarune/picture.jpg" width="300px" height="auto">
            <p><span>This will be a link to the buy site or an iframe embeding.</p></span> 
        </li> 
    <!--end section--> 
    
    
        <li id="promote"> 
            <h2>Promote</h2>  
          <div id="loader" class="loader"></div>
            <img src="http://img.photobucket.com/albums/v322/Hakarune/picture.jpg" width="300px" height="auto"> 
            <p><span>This will have some sort of info about getting in contact with Andy or something maybe via a form, idk</p></span> 
        </li> 
    <!--end section--> 
    
        <li id="about"> 
            <h2>Meet our Team</h2> 
          <div id="loader" class="loader"></div>
    <div id="profiles">
    <div id="left">
    <span  class="profile"><img src="http://img.photobucket.com/albums/v322/Hakarune/XS/blank_profile.gif"></span>
    <h3>Andy</h3>
    Location: ?
    <br />
    Contact Info: ?
    </div>
    <div id="left">
    <span  class="profile"><img src="http://img.photobucket.com/albums/v322/Hakarune/XS/Blank_Profile.jpg"></span>
    <h3>Tony</h3>
    Location: ?
    <br />
    Contact Info: ?
    <br />
    </div>
    <div id="left">
    <span  class="profile"><img src="http://img.photobucket.com/albums/v322/Hakarune/XS/blankprofile.png"></span>
    <h3>David</h3>
    Computer Repair
    <br />
    Location: ?
    <br />
    Contact Info: ?
    <br />
    </div>
    <div id="left">
    <span  class="profile"><a href="https://lh3.googleusercontent.com/-zFL-sCtaviY/ThflxwtUUvI/AAAAAAAAJ20/fk2WUr7St3s/s640/DSCN2951%2525282%252529.jpg">
    <img src="https://lh3.googleusercontent.com/-zFL-sCtaviY/ThflxwtUUvI/AAAAAAAAJ20/fk2WUr7St3s/s144/DSCN2951%2525282%252529.jpg" alt="Ace"></span>
    </a>
    <h3>Ace</h3> 
    Graphic & Web Design
    <br />
    Location: Battle Ground, WA
    <br />
    Contact Info: 
    <a href="mailto:trevor.d.elliott@gmail.com" target="_blank"><img src="http://img.photobucket.com/albums/v322/Hakarune/XS/envelope.png"></a>
    <a href="https://plus.google.com/103460798847241997563" target="_blank">
    <img width="16" height="16" alt="Google Plus" border="0" src="http://img.photobucket.com/albums/v322/Hakarune/XS/Googlexs.png" /></a>
    <a href="http://www.facebook.com/hakarune" target="_blank">
    <img width="16" height="16" alt="Facebook" border="0" src="http://images.wisestamp.com/facebook.png" /></a>
    <a href="http://www.linkedin.com/in/hakarune" target="_blank">
    <img width="16" height="16" alt="LinkedIn" border="0" src="http://images.wisestamp.com/linkedin.png" /></a>
    <a href="http://twitter.com/#!/hakarune" target="_blank">
    <img width="16" height="16" alt="Twitter" border="0" src="http://images.wisestamp.com/twitter.png" /></a>
    <a href="skype:hakarune?call">
    <img width="16" height="16" alt="Skype" border="0" src="http://images.wisestamp.com/skype.png" /></a>
    </div>
    </div>
        </li> 
    <!--end section--> 
    
        <li id="contact"> 
            <h2>Contact</h2> 
          <div id="loader" class="loader"></div>
    <hr />
    Please fill out this form and we will get in touch with you shortly.
          <iframe allowtransparency="true" src="http://form.jotform.com/form/11961556115" frameborder="0" style="width:100%; height:469px; border:none; z-index:-1;" scrolling="no">
    </iframe>
    Here is are the just 3 of the codes I tried:
    Code:
    <!--[if IE]>
            #box {
    	text-align: left;
    	width: 700px;
    	margin: 30px auto 0 auto;
    	background:transparent;
    	overflow-x: hidden;
            overflow-y: scroll;
    }
    
    ul#slider{
    	-webkit-border-radius: 10px;
            text-align:center;
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	position: relative;
    	width: 700px;
    	height: 650px;
    	overflow-x: hidden;
            overflow-y: scroll;	
    }
    <![endif]-->
    Code:
    $(document).ready ( 
      function() {
        if ( $.browser.mozilla == true && $.browser.version == '1.9.1' ) {
                 #box {
    	text-align: left;
    	width: 700px;
    	margin: 30px auto 0 auto;
    	background:transparent;
    	overflow-x: hidden;
            overflow-y: scroll;
    }
    
    ul#slider{
    	-webkit-border-radius: 10px;
            text-align:center;
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	position: relative;
    	width: 700px;
    	height: 650px;
    	overflow-x: hidden;
            overflow-y: scroll;	
    }
        }
      }
    );
    Code:
    if (BrowserDetect.browser == 'Firefox' && BrowserDetect.version == '3.5')
    {
              #box {
    	text-align: left;
    	width: 700px;
    	margin: 30px auto 0 auto;
    	background:transparent;
    	overflow-x: hidden;
            overflow-y: scroll;
    }
    
    ul#slider{
    	-webkit-border-radius: 10px;
            text-align:center;
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    	position: relative;
    	width: 700px;
    	height: 650px;
    	overflow-x: hidden;
            overflow-y: scroll;	
    }
    }

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    911
    Thanks
    0
    Thanked 121 Times in 120 Posts
    in some of your css-rules you have position:absolute or position:relative, but no top:, bottom:, left: or right: values.

    Especially with position:absolute, as the element is taken out of the document float, you need to specify a top: or bottom:, and a left: or right:

    the position: parameter only tells how the element should be placed (respecting or ignoring other elements), but not where.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lerura View Post
    in some of your css-rules you have position:absolute or position:relative, but no top:, bottom:, left: or right: values.

    Especially with position:absolute, as the element is taken out of the document float, you need to specify a top: or bottom:, and a left: or right:

    the position: parameter only tells how the element should be placed (respecting or ignoring other elements), but not where.
    ok, fixed. still nothing though...

    (I deleted the 2 or 3 empty
    Code:
    postition:relative
    and on the
    Code:
    position:absolute
    I added
    Code:
    top:0px;
    It still works in Chrome (in fact I think that made it load a split faster.)


  •  

    Tags for this Thread

    Posting Permissions

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