...

View Full Version : website not working in webkit eg chrome and safari



char
01-11-2010, 12:53 PM
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/hauntedrooms/images/background.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

<?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
http://img23.imageshack.us/img23/830/hauntedrooms.jpg
link to my website
http://tinyurl.com/yfjfghj

abduraooft
01-11-2010, 01:24 PM
Validate your site using w3's markup and CSS validators and fix all errors in it.

char
01-11-2010, 02:36 PM
i dont seen any bad erros that i can see that would mess up the css ?

abduraooft
01-11-2010, 02:39 PM
What about these errors (http://validator.w3.org/check?uri=http://hauntedrooms.co.uk/)?

char
01-11-2010, 02:51 PM
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

abduraooft
01-11-2010, 03:03 PM
[...] as they seem small problems to meWhy?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> for your current markup.

char
01-11-2010, 03:16 PM
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 ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum