...

View Full Version : Not Working with FF4 or IE (Please Help)



hakarune
07-20-2011, 12:10 AM
The Page: B12B (http://b12b.weebly.com/)

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:


#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:


<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:


<!--[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]-->




$(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;
}
}
}
);




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;
}
}

Lerura
07-20-2011, 12:34 AM
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.

hakarune
07-20-2011, 12:53 AM
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
postition:relative and on the
position:absolute I added
top:0px;

It still works in Chrome (in fact I think that made it load a split faster.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum