my css is not reading correctly in IE or Chrome

lisakoubou · 05-05-2011, 05: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

My css code is

Code:

#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, 08: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  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, 09:05 AM

There are some parse errors in your CSS, see http://jigsaw.w3.org/css-validator/v...t%2Findex.html

Fix them first.

Quote:

Have you missed the closing of conditional comment?

Dr3am3rz · 05-05-2011, 09: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, 01: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  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, 02: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, 02:33 AM

No problem. Glad it helped you. =)

abbasmotorwala · 05-19-2012, 07: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........