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).
Quote:
|
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;
}
}
Before you post, read our: 
Not Working with FF4 or IE (Please Help)
