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,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    [...] 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
    •