CSS wont work in firefox

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Domsore
Forum Commoner
Posts: 46
Joined: Wed Jan 26, 2011 7:07 pm

CSS wont work in firefox

Post 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?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: CSS wont work in firefox

Post by Weirdan »

Post your html code or post a link where we could see it.
Domsore
Forum Commoner
Posts: 46
Joined: Wed Jan 26, 2011 7:07 pm

Re: CSS wont work in firefox

Post 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
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: CSS wont work in firefox

Post by Weirdan »

href="template\default\css\default.css"
You're using wrong slashes. For URLs you need to use forward slash (/).
Domsore
Forum Commoner
Posts: 46
Joined: Wed Jan 26, 2011 7:07 pm

Re: CSS wont work in firefox

Post by Domsore »

Hmn I used the php directory slashes function.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: CSS wont work in firefox

Post 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.
Domsore
Forum Commoner
Posts: 46
Joined: Wed Jan 26, 2011 7:07 pm

Re: CSS wont work in firefox

Post 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
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: CSS wont work in firefox

Post 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.
Domsore
Forum Commoner
Posts: 46
Joined: Wed Jan 26, 2011 7:07 pm

Re: CSS wont work in firefox

Post by Domsore »

Oh okay, thanks so much, this place definitely has the most helpful / friendly community.
Post Reply