...

View Full Version : my css is not reading correctly in IE or Chrome



lisakoubou
05-05-2011, 06:39 AM
Hi, I'm kind of new to web designing. I am creating a webpage that I am struggling with the css. My page passed html validation but the css validation failed because of the jquery wowslider I am using. ( this is code provided by an application called wowslider that created a jquery slider for the site )

My problem is that my site is not working on ie and the flash header is offset for the browser Chrome ( it overlaps the bodybg image). It seems to work in Safari and Firefox.

The link to the site is Dion Clay (http://www.lisamissenda.com/DionClay2/web-content/index.html)

My css code is
#wowslider-container {
/* overflow: hidden; */
zoom: 1;
position: relative;
width:428px;
height:364px;
margin:0 auto;
z-index:100;
background-image: url(./bg.png);
background-color: transparent;
}
* html #wowslider-container{
background-image: none;
}
#wowslider-images{
position: absolute;
left:25px;
top:25px;
width:378px;
height:314px;
}

#wowslider-images img{
position:absolute;
visibility:hidden;
top:0;
left:0;
border:none 0;
}
#wowslider-container a{
text-decoration: none;
outline: none;
border: none;
}

#wowslider-container .ss_bullets {
font-size: 0px;
padding: 0px;
float: left;
position:absolute;
right: 32px;
top: 32px;
z-index:40;
}
#wowslider-container .ss_bullets a {
margin-left: 0;
width:20px;
height:20px;
background: url(./bullet.png) right top;
background-color: transparent;
float: left;
text-indent: -1000px;
}
* html #wowslider-container .ss_bullets a {
background-image: url(./bullet.gif);
background-color: transparent;
}
#wowslider-container .ss_bullets a.ss_selbull{
background-position: left top;
background-color: transparent;
}
#wowslider-container a.ss_next, #wowslider-container a.ss_prev {
position:absolute;
display:none;
top:50%;
margin-top:-37px;
opacity:0.7;
position:absolute;
z-index:1001;
height: 75px;
width: 60px;
background-image: url(./arrows.png);
background-color: transparent;
}

#wowslider-container a.ss_next{
background-position: 100% 0;
right:25px;
background-color: transparent;
}
#wowslider-container a.ss_prev {
left:25px;
background-position: 0 0;
background-color: transparent;
}



#wowslider-container .ws-title{
position: absolute;
bottom:55px;
left: 25px;
margin-right:30px;
z-index: 50;
padding:10px;
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
color: #000000;
background:#FFF;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
letter-spacing: 1px;
line-height: 18px;
text-align: left;
text-shadow: 0 0 2px #FFFFFF;
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
font-size: 14px;
background-color: transparent;
}
#wowslider-container .ws-title div{
padding-top:5px;
font-size: 12px;
}


html {
margin: 0;
padding: 0;
}

p.margin {
margin-right:auto;
margin-left:auto;
}

a {
color:#ffffff;
text-decoration: none;
outline: none;
border: none;
}

a:link {
color:#ffffff;
text-decoration: none;
outline: none;
border: none;
}

a:visited {
color:#ffffff;
text-decoration: none;
outline: none;
border: none;
}

a:hover {
color:#fff050;
text-decoration: none;
outline: none;
border: none;
}

a:active {
color:#ffffff;
text-decoration: none;
outline: none;
border: none;
}


#logo {
top: 0px;
margin-right: auto;
margin-left: auto;
height: 320px;
width: 960px;
position: relative;
z-index: 0;
visibility: visible;
}

#bodybg {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/bg2.jpg);
background-color: transparent;
outline: none;
height: 535px;
width: 960px;
left: 0px;
top: 315px;
position: absolute;
z-index: -1;
visibility: visible;
}



#tagline {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/atrue.png);
background-color: transparent;
text-decoration: none;
outline: none;
height: 30px;
width: 535px;
left: 341px;
top: 350px;
z-index: 2;
position: absolute;
visibility: visible;
}

#tagline:hover{
background-position: 0 -30px;
outline: none;
}

#tagline span{
display: none;
}

#homebut {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/home.png);
background-color: transparent;
text-decoration: none;
outline: none;
height: 20px;
width: 72px;
left: 25px;
top: 20px;
position: absolute;
z-index: 2;
visibility: visible;
}

#homebut:hover{
background-position: 0 -20px;
outline: none;
}

#homebut span{
display: none;
}

#worksbut {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/works.png);
background-color: transparent;
text-decoration: none;
outline: none;
height: 30px;
width: 142px;
left: 22px;
top: 40px;
position: absolute;
z-index: 2;
visibility: visible;
}

#worksbut:hover{
background-position: 0 -30px;
background-color: transparent;
outline: none;
}

#worksbut span{
display: none;
}

#reflectbut {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/reflections.png);
background-color: transparent;
text-decoration: none;
outline: none;
height: 20px;
width: 165px;
left: 25px;
top: 70px;
position: absolute;
z-index: 2;
visibility: visible;
}

#reflectbut:hover{
background-position: 0 -20px;
background-color: transparent;
outline: none;
}

#reflectbut span{
display: none;
}

#connectbut {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/connections.png);
background-color: transparent;
text-decoration: none;
outline: none;
height: 15px;
width: 138px;
left: 25px;
top: 90px;
position: absolute;
z-index: 2;
visibility: visible;
}

#connectbut:hover{
background-position: 0 -15px;
background-color: transparent;
outline: none;
}

#connectbut span{
display: none;
}

#contactbut {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/contact.png);
background-color: transparent;
text-decoration: none;
outline: none;
height: 20px;
width: 122px;
left: 25px;
top: 108px;
position: absolute;
z-index: 2;
visibility: visible;
}

#contactbut:hover{
background-position: 0 -20px;
background-color: transparent;
outline: none;
}

#contactbut span{
display: none;
}

#video {
height: 320px;
width: 960px;
left: 0px;
top: 0;
position: absolute;
z-index: -1;
visibility: visible;
}

#connections {
height: 271px;
width: 180px;
left: 715px;
top: 0;
z-index: 6;
position: absolute;
visibility: visible;
}

#works {
height: 227px;
width: 165px;
left: 50px;
top: 0;
position: absolute;
z-index: 6;
visibility: visible;
}

#Reflections {
height: 215px;
width: 170px;
left: 360px;
top: 0;
z-index: 6;
position: absolute;
visibility: visible;
}

#bradyad {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/bradyad.jpg);
background-color: transparent;
height: 184px;
width: 339px;
left: 0;
top: 1030px;
position: absolute;
visibility: visible;
}

#bio {
height: 396px;
width: 310px;
left: 0;
top: 555px;
position: absolute;
z-index: 4;
visibility: visible;
}

#discography {
height: 320px;
width: 385px;
left: 310px;
top: 530px;
position: absolute;
z-index: 4;
visibility: visible;
}

#contact {
height: 320px;
width: 236px;
left: 740px;
top: 555px;
z-index: 4;
position: absolute;
visibility: visible;
}

#angottiad {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/angottiad.jpg);
background-color: transparent;
height: 69px;
width: 339px;
left: 0;
top: 1228px;
position: absolute;
z-index: 4;
visibility: visible;
}

#featuredvideo {
height: 260px;
width: 386px;
left: 336px;
top: 921px;
z-index: 4;
position: absolute;
visibility: visible;
}

#videos {
height: 190px;
width: 236px;
left: 724px;
top: 924px;
z-index: 4;
position: absolute;
visibility: visible;
}

#wlpad {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/wlpad.jpg);
background-color: transparent;
height: 100px;
width: 339px;
left: 0;
top: 1311px;
position: absolute;
z-index: 4;
visibility: visible;
}

#feathuredvideotitle {
height: 69px;
width: 385px;
left: 337px;
top: 864px;
position: absolute;
z-index: 6;
visibility: visible;
}

#video1 {
height: 143px;
width: 236px;
left: 724px;
top: 1124px;
z-index: 6;
position: absolute;
visibility: visible;
}

#video2 {
height: 143px;
width: 236px;
left: 724px;
top: 1275px;
position: absolute;
z-index: 6;
visibility: visible;
}

#videospacer {
height: 18px;
width: 236px;
left: 722px;
top: 1110px;
position: absolute;
visibility: visible;
}

#videospacer2 {
height: 18px;
width: 236px;
left: 722px;
top: 1260px;
position: absolute;
visibility: visible;
}

#botnav {
height: 202px;
width: 960px;
left: 0;
top: 1480px;
position: absolute;
z-index: 4;
visibility: visible;
border: solid 2px #fffdf0;
}

#designedby {
height: 25px;
width: 413px;
left: 540px;
top: 180px;
position: absolute;
visibility: visible;
}

#Worksmenu {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/bobybg.png);
background-color: transparent;
height: 190px;
width: 200px;
left: 10px;
top: 0;
position: absolute;
visibility: visible;
padding-top: 12px;
}

#Reflectionsmenu {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/bobybg.png);
background-color: transparent;
height: 190px;
width: 200px;
left: 227px;
top: 0;
position: absolute;
visibility: visible;
padding-top: 12px;
}

#connectionsmenu {
background: url(http://www.lisamissenda.com/DionClay2/web-content/jpegs/bobybg.png);
background-color: transparent;
height: 190px;
width: 200px;
left: 445px;
top: 0;
position: absolute;
visibility: visible;
padding-top: 12px;
}

I have been searching and trying everything I could find but I'm at a loss. Based on the fact that ie is only showing the swf called "logo" I wonder if there is also some html problems.

Any help will be greatly appreciated.

Thank you in advance.

Lisa

Dr3am3rz
05-05-2011, 09:25 AM
Hmm.. I'm not a very experienced coder but from what I think it's because you put 2 videos in there so result in the google chrome displaying the non readable as well as readable together? I'm not sure whether is my explanation correct. But anyway, why not you remove the <!--If !IE>--> that section video code..the other one remains and replace your code to:

<div id="video"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="960" height="320" id="logo4-26-11edit" align="middle">

<param name="movie" value="logo4-26-11edit.swf" ></param>

<param name="quality" value="high" ></param>

<param name="bgcolor" value="#000000" ></param>

<param name="play" value="true" ></param>

<param name="loop" value="true" ></param>

<param name="wmode" value="window" ></param>

<param name="scale" value="showall" ></param>

<param name="menu" value="true" ></param>

<param name="devicefont" value="false" ></param>

<param name="salign" value="" ></param>

<param name="allowScriptAccess" value="sameDomain" ></param>

<embed src="logo4-26-11edit.swf" quality="high" width="960" height="320"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" bgcolor="#000000" play="true" wmode="window" scale="showall" menu="true" devicefont="false" salign="" allowScriptAccess="sameDomain">
</embed>
</object>

</div>

The one in red color is the additional code you need to add in to your original one. Hope this helps. =)

abduraooft
05-05-2011, 10:05 AM
There are some parse errors in your CSS, see http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.lisamissenda.com%2FDionClay2%2Fweb-content%2Findex.html

Fix them first.


<!--[if !IE]>-->
Have you missed the closing of conditional comment?

Dr3am3rz
05-05-2011, 10:34 AM
I've tried the code that I gave you already, it works but at the same time like what abduraooft said, fix your css too. =)

lisakoubou
05-05-2011, 02:26 PM
Thank you abduraooft and Dr3am3rz for your help. I know about the parse errors, they are part of the wowslider application and the code it generated. I will try to fix the errors.

Thank you as well for the swf code as well. The html I was using came from flash directly. I had tried to remove the code after <!--If !IE>--> but didn't add the code you gave me so I will try that. Thank you very much. I will let you know how it works.

lisakoubou
05-05-2011, 03:20 PM
Thank you again. I went back to flash and republished my swf file ( this time as flash lite) and copied that code into my html. I also eliminated the wowslider code that was for the ws title since I am not using a title with these slides. That left only the two css errors .... zoom and opacity that I'm not sure how to correct.

"#wowslider-container Property zoom doesn't exist : 1 1
#wowslider-container a.ss_next, #wowslider-container a.ss_prev Property opacity doesn't exist in CSS level 2.1 but exists in : 0.7 0.7 "


The good news is it is now working on both Chrome and the current IE.

I've been struggling with this for 2 weeks. Thank you so much for the help.

Lisa

Dr3am3rz
05-06-2011, 03:33 AM
No problem. Glad it helped you. =)

abbasmotorwala
05-19-2012, 08:21 AM
my problem is worth same like u all, i m lso facing the same problem regarding wow slider,,,,its not working in goole crome and ie,,,,,,,,offline every thing is but online its not wkriing.plse tell me frnds wht to do.....or give me a link for a simple and sweet jquery style........



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum