Page 1 of 1
CSS wont work in firefox
Posted: Mon Feb 07, 2011 6:00 pm
by Domsore
Im not 100% this is the right place for this.
In chrome my layout works fine, in firefox however the css does not work at all.
I dont know if it makes a difference but it has 2 stylesheets.]
I checked the source and in the source it says that it is calling the stylesheets, but wont display properly?
Any suggestions?
Re: CSS wont work in firefox
Posted: Mon Feb 07, 2011 6:45 pm
by Weirdan
Post your html code or post a link where we could see it.
Re: CSS wont work in firefox
Posted: Tue Feb 08, 2011 5:50 am
by Domsore
Oh, well my HTML is generated by PHP but this is what it end up looking like when I view source:
Code: Select all
<head><title>.: TestSite :.</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="template\default\css\default.css" /><link rel="stylesheet" type="text/css" href="template/component/component.css" /></head><body>
<div id="wrapper">
<div id="header">
<div id="headertext">Test Site</div>
<div id="slogan">Create and control your own ladder for free.</div>
<div id="login" align="center">Login<form action="" method="post" name="login">
<table width="150" border="0"><tr><td>Username:</td>
<td><input name="log_user" type="text" size="10" /></td>
</tr><tr><td>Password:</td><td><input name="log_pass" type="password" size="10" />
</td></tr></table><input name="sub_log" type="submit" value="Login" /></form></div>
</div>
<div id="nav">NavFunc</div>
<div id="contwrap">
<div id="leftnav">
<div id="recepContain">
<div id="recepHead" align="center">Navigation</div>
<div id="recepBody">Nav Recep Here</div>
</div>
</div>
<div id="rightnav">
</div>
<div id="maincont">
<div id="contenthead">TestSite</div>
<div id="contentcont">Default Page</div>
</div>
</div>
<div id="footer">Test.comĀ®, 2011. Author: Dom Sore</div>
</div>
</body>
and my css:
default.css:
Code: Select all
@charset "utf-8";
/* CSS Document */
/* Custom CSS */
body {
background-color:#CCC;
}
#wrapper {
margin-left:auto;
margin-right:auto;
margin-top:-8px;
width:980px;
background-color:#FFF;
border-left:#000 solid 1px;
border-right:#000 solid 1px;
}
#header{
background-image:url(../images/header.jpg);
height:150px;
}
#headertext{
width:600px;
height:40px;
position:absolute;
top: 70px;
left: 250px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:30px;
color:#FFF;
text-shadow:#000 2px 2px 2px;
}
#slogan{
width:500px;
height:30px;
position:absolute;
top: 105px;
left: 400px;
font-family:Arial, Helvetica, sans-serif;
}
#login{
background-image:url(../images/login.png);
position:absolute;
width:193px;
height:96px;
margin-left:760px;
top:20px;
padding-top:4px;
padding-left:7px;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
#login table{
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
#login input{
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
#nav{
border-top:#999 solid 1px;
border-bottom:#999 solid 1px;
background-image:url(../images/nav.jpg);
height:22px;
margin-top:5px;
text-align:center;
padding-top:3px;
padding-right:300px;
font-family:"Courier New", Courier, monospace;
font-size:14px;
color:#333;
}
#contwrap{
margin-top:5px;
}
#leftnav{
width:200px;
float:left;
}
#rightnav{
width:200px;
float:right;
}
#maincont{
background-color:#CCC;
width:570px;
margin-left:205px;
}
#contenthead{
background-image:url(../images/conthead.jpg);
text-align:center;
font-family:"Courier New", Courier, monospace;
font-size:14px;
height:20px;
}
#contentcont{
border:#999 1px solid;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#contentcont table{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#contentInnerHeader {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
padding-left: 10px;
margin-bottom:5px;
font-weight: 500;
}
#contentInnerBox {
border:#999 1px solid;
margin:5px;
}
#footer{
background-image:url(../images/footer.jpg);
margin-top:5px;
height:18px;
text-align:center;
font-size:10px;
font-family:Verdana, Geneva, sans-serif;
padding-top: 2px;
}
/* RECEPTICLE CONTROLLERS - DO NOT CHANGE #<name> OR REMOVE */
#recepContain{
width:193px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}
#recepHead{
background-image:url(../images/recephead.jpg);
font-family:"Courier New", Courier, monospace;
font-size:14px;
height:20px;
}
#recepBody{
border:#999 1px solid;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding-left: 3px;
padding-right:3px;
}
and component.php is empty
Re: CSS wont work in firefox
Posted: Tue Feb 08, 2011 7:36 am
by Weirdan
href="template\default\css\default.css"
You're using wrong slashes. For URLs you need to use forward slash (/).
Re: CSS wont work in firefox
Posted: Tue Feb 08, 2011 1:51 pm
by Domsore
Hmn I used the php directory slashes function.
Re: CSS wont work in firefox
Posted: Tue Feb 08, 2011 1:53 pm
by John Cartwright
Domsore wrote:Hmn I used the php directory slashes function.
You mean DIRECTORY_SEPERATOR constant? That is for the internal filesystem. You want to use forward slashes here.
Re: CSS wont work in firefox
Posted: Tue Feb 08, 2011 1:58 pm
by Domsore
That's what I meant I couldn't remember off the top of my head so I said directory slashes function , whoops.
But thanks, so how come this works in Chrome?
Dom
Re: CSS wont work in firefox
Posted: Tue Feb 08, 2011 2:00 pm
by John Cartwright
Domsore wrote:That's what I meant I couldn't remember off the top of my head so I said directory slashes function , whoops.
But thanks, so how come this works in Chrome?
Dom
You'll soon find when dealing with browsers, they do not all conform perfectly to standards. Some are more lenient, some more strict. Better to be strict.
Re: CSS wont work in firefox
Posted: Tue Feb 08, 2011 8:30 pm
by Domsore
Oh okay, thanks so much, this place definitely has the most helpful / friendly community.