1.

Solve : Some HTML/CSS help (IE vs Firefox)?

Answer»

Hello,

I have a RATHER strange dilemma. Im not totally familiar with HTML, so I have this script that WORKS GREAT in FireFox, but I cannot get it to work in IE. 

I was hoping someone could take a look and see what the issue is? I'd appreciate it.

STYLE:
Code: [Select]<style type="text/css">

body {
background:#fff url('images/bg_body.gif') repeat-x;
color:#333;
line-height:180%;
margin:0;
padding:0;
text-align:center; font-style:normal; font-variant:normal; font-weight:normal; font-size:80%; font-family:Trebuchet MS, Arial, Helvetica, Sans-Serif
        }
h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:20px;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}

        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }

#container{
margin:0 auto;
position:relative;
text-align:left;
width:557px;
background:#fff;
margin-bottom:2em;
}
#header{
height:144px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}

#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:557px;
height:193px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:557px;
}
#prevBtn a, #nextBtn a{ 
display:block;
width:30px;
height:77px;
background:url('images/btn_prev.gif') no-repeat 0 0;
}
#nextBtn a{
background:url('images/btn_next.gif') no-repeat 0 0;
}

</style>

In the Head of the page. The reason it's in PHP is because that's what my website is based on.
Code: [Select]echo "<script type='text/javascript'>\n";
echo "$(document).ready(function(){\n";
echo "$('#slider').easySlider({\n";
echo "auto: true,\n";
echo "continuous: true\n";
echo "});\n";
echo "});\n";
echo "</script>\n";

In the Body of the page:
Code: [Select]<div id="container">
<div id="content">

<div id="slider">
<ul>

<li><a href="/modules.php?name=Reviews&rop=showcontent&id=26"><img src="images/01.jpg" width="557" height="193" /></a></li>
<li><a href="/modules.php?name=Reviews&rop=showcontent&id=23"><img src="images/02.jpg" width="557" height="193" /></a></li>
<li><a href="/modules.php?name=Reviews&rop=showcontent&id=22"><img src="images/03.jpg" width="557" height="193" /></a></li>
<li><a href="/modules.php?name=Reviews&rop=showcontent&id=21"><img src="images/04.jpg" width="557" height="193" /></a></li>
<li><a href="/modules.php?name=Reviews&rop=showcontent&id=20"><img src="images/05.jpg" width="557" height="193" /></a></li>

</ul>
</div>
</div>
</div>
So YEAH... it works great in Firefox (it's a box with sliding images). but in IE all the images just show up in a column (I'm guessing the script isnt starting?). Any help is appreciated



Discussion

No Comment Found