Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    my css is not reading correctly in IE or Chrome

    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

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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. =)
    Last edited by Dr3am3rz; 05-05-2011 at 10:08 AM.

  • Users who have thanked Dr3am3rz for this post:

    lisakoubou (05-05-2011)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    There are some parse errors in your CSS, see http://jigsaw.w3.org/css-validator/v...t%2Findex.html

    Fix them first.

    <!--[if !IE]>-->
    Have you missed the closing of conditional comment?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    lisakoubou (05-05-2011)

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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. =)

  • Users who have thanked Dr3am3rz for this post:

    lisakoubou (05-05-2011)

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    thanks for your help

    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.

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thank you thank you thank you

    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

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    No problem. Glad it helped you. =)

  • #8
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    google crome,ie7 problem

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •