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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2008
    Posts
    115
    Thanks
    11
    Thanked 0 Times in 0 Posts

    website not working in webkit eg chrome and safari

    hi there i am in the midle of making an template in joomla i now done 80% off my template but for some reaon when i view the website in webkit based browsers it just show up white with no css to the pages eg chrome and safari

    my code is as below
    css
    @charset "UTF-8";
    /* CSS Document */

    body{
    background-color:#000;
    font:Verdana, Geneva, sans-serif;
    color:#F00;
    background-image:url(background: url(http://hauntedrooms.co.uk/templates/...ckground.jpg);
    /*background-repeat:repeat-y;*/
    }

    #main{
    margin:auto;
    width:1000px;
    height:auto;
    }
    #logo_header{
    height:auto;
    width:auto;
    }
    #banner{
    width:830px;
    height:333px;
    margin-left:auto ;
    margin-right:auto;

    }
    /* links */

    a:link {
    text-decoration:none;
    color:#F00;
    }
    a:visited{
    text-decoration:none;
    color:#F00;
    }
    .in_banner_links{
    color:#F00;
    float:right;
    font-size:12px;
    font-family:"TrajanPro", Arial, Helvetica, sans-serif;
    text-align:center;
    }


    .in_banner_links:alink{
    font-size:16px;
    padding:4px;
    color:#F00

    }
    #top_menu{
    text-align:center;
    align:center;
    margin-right:auto;
    margin-left:auto;
    margin-top:30px;
    width:800px;
    color:#F00;
    font-size:10px;
    font-family: Trebuchet, Arial, Helvetica, sans-serif;
    text-decoration:none;
    }

    #top_menu ul{
    list-style:none;
    color:#F00;
    text-decoration:none;
    }
    #top_menu li {
    text-decoration:none;
    display:inline;
    padding-right:20px;
    padding-left:20px;
    text-align:center;
    }


    #top_menu:alink{
    color:#F00;
    font-size:10px;
    font-family:"TrajanPro", Arial, Helvetica, sans-serif;
    margin-bottom:40px;
    text-decoration:none;
    margin-right:20px;
    }

    #right_menu{
    float:right;
    width:200px;
    height:auto;
    margin-left:110px;
    }
    #left_menu{
    float:left;
    width:190px;
    height:auto;
    font-size:10px;
    }
    #left_menu ul{
    list-style:none;
    color:#F00;
    text-decoration:none;
    font-size:10px;
    }
    #left_menu li {
    text-decoration:none;
    font-size:10px;
    }
    #main_content{
    margin-top:50px;
    height:auto;
    margin-right:220px;
    margin-left:190px;
    text-align:center;
    font-family:Trajan Pro, Geneva, sans-serif;
    font-size:15px;
    }
    .main_content_box{
    background-color:#000;
    color:#ffffff;
    text-align:center;
    margin:auto;
    font-family:Trajan Pro, Geneva, sans-serif;
    font-size:15px;
    }

    .rightmenu_box{
    width:140px;
    border-style:solid;
    text-align:center;
    }

    #fotter{
    clear:both;
    width:650px;
    background:#000;
    color:#F00;
    margin:auto;
    text-align:center;
    }

    #fotter ul{
    list-style:none;
    color:#F00;
    text-decoration:none;
    font-size:10px;
    }
    #fotter li {
    text-decoration:none;
    display:inline;
    padding-right:20px;
    padding-left:20px;
    text-align:center;
    }

    .copyright_fotter{
    font-size:15px;
    color:#FFF;
    text-align:center;
    }
    .dare_sleep{
    text-align:center;
    align:center;

    }
    .menu{
    font-size:10px;
    text-decoration:none;
    }
    .menu li{
    text-decoration:none;
    list-style:none;
    font-size:10px;

    }
    .menu ul{
    text-decoration:none;
    }
    .menu:alink{
    text-decoration:none;
    color:#F00;
    }
    .menu:a:visited{
    text-decoration:none;
    color:#F00;
    }
    #mainlevel{
    margin-right:auto;
    margin-left:auto;
    width:auto;
    color:#F00;
    font-size:10px;
    font-family: Trebuchet, Arial, Helvetica, sans-serif;
    text-decoration:none;
    }

    #mainlevel ul{
    list-style:none;
    color:#F00;
    text-decoration:none;
    }
    #mainlevel li {
    text-decoration:none;
    display:inline;
    padding-right:10px;
    padding-left:10px;
    text-align:center;
    margin:auto;
    }


    #mainlevel:alink{
    color:#F00;
    font-size:10px;
    font-family:"TrajanPro", Arial, Helvetica, sans-serif;
    margin-bottom:40px;
    text-decoration:none;
    margin-right:20px;
    }
    #toplinks{
    margin-left:700px;
    text-align:right;
    align:right;
    }
    #logo_box{
    margin-right:100px;
    margin-left:100px;
    }
    .hotlemonthbox{
    color:#FFF;
    text-align:center;
    font-size:10px;
    border:1px solid red;
    }
    .hotleheader{
    color:#F00;
    text-align:center;
    font-size:15px;
    border:1px solid red;
    }
    /* boxes for content */
    #box1{
    width:510px;
    height:auto;
    color:#FFF;
    text-align:right;
    font-size:10px;

    }
    #box2{
    width:510px;
    height:auto;
    color:#FFF;
    text-align:center;
    font-size:10px;
    margin-top:50px;

    }

    index.php for joomla
    Code:
    <?php 	
    // no direct access 
    		defined( '_JEXEC' ) or die( 'Restricted access' ); 
    		?> 
    
    	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > 
    		<head> 
    		<jdoc:include type="head" /> 	
    		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> 
    		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
            <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/hauntedrooms/css/style.css" type="text/css" /> 
    		
            
    	</head>
    
     <body>
    <div id="main">
    <div id="toplinks">
     <jdoc:include type="modules" name="topmenu" />
     </div>
    <div id="logo_header">
    <div id="logo_box">
     <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" width="auto" height="auto" />
    </div>
      <div id="banner">
      <div class="in_banner_links">
     <jdoc:include type="modules" name="top" />
      </div>
       <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/banner.png" width="830" height="319" />
      </div>
    </div>
       <div id="top_menu">
     <jdoc:include type="modules" name="mid" />
       </div>
       <div id="right_menu">
        <jdoc:include type="modules" name="right" />
    </div>
       <div id="left_menu">
    <jdoc:include type="modules" name="left" />
       </div>
       <div id="main_content">
       <div class="main_content_box">
       <jdoc:include type="message" />
    <jdoc:include type="component" />
       </div>
       </div>
       <div class=".dare_sleep">
       <center>
     <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/footer_logo.png" width="auto" height="auto" /></center>
       </div>
       <div id="fotter">
      <jdoc:include type="modules" name="footer" />
    <div class="copyright_fotter">
    Copyright 2009-<?php echo date("Y");?> &copy; website
       </div>
    </div>
    </body>
    </html>
    my goal is to make the website looks like this

    link to my website
    http://tinyurl.com/yfjfghj
    Last edited by char; 01-11-2010 at 11:55 AM.

  • #2
    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
    Validate your site using w3's markup and CSS validators and fix all errors in it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Posts
    115
    Thanks
    11
    Thanked 0 Times in 0 Posts
    i dont seen any bad erros that i can see that would mess up the css ?

  • #4
    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
    What about these errors?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    115
    Thanks
    11
    Thanked 0 Times in 0 Posts
    are they really going to mess up the site as they seem small problems to me

    also

    what dose it mean by ul id="mainlevel"><li><a href="#" class="mainlevel" >CONTACT US</a></li><li><a>

    as that seem ok code to me its the code joomla out puts when it makes menu and you output them to the page back end stuff

  • #6
    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
    [...] as they seem small problems to me
    Why?

    A DOCTYPE at the top is the first and foremost step to make a valid document, read http://www.alistapart.com/articles/doctype/. Add a suitable one and then validate again.

    I'd recommend
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    for your current markup.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    115
    Thanks
    11
    Thanked 0 Times in 0 Posts
    so where do i put the doc type as its based around joomla

    do i change it in this line <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

    also most of what the validator picked up is just alt tags on images that is not going to make the hole page mess up is it ?


  •  

    Posting Permissions

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