Solved: What gives? Site works in IE7 but NOT Firefox!?

SNewman · 18-May-2008, 11:35 AM #1

The title says it all. Below are screenshots from IE7 & Firefox, respectively.

Maybe I'm not using a cross-browser safe color and FF is not picking it up?

Code for Main Page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Phi Sigma Pi Beta Eta Chapter</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="http://psp.gamebounty.net/js/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="http://psp.gamebounty.net/js/funcLogin.js"></script>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- start header -->
<div id="header">

	<div id="logo">
		<h1><a href="#">Phi Sigma Pi<sup></sup></a></h1>
		<h2><strong>Beta Eta Chapter</strong></h2>
	</div>
	<div id="menu">
		<ul>
			<li class="active"><a href="#"> home</a></li>

			<li><a href="#">photos</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">links</a></li>
			<li><a href="#">contact </a></li>
		</ul>
	</div>
</div>

<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
	<div id="content">		<div class="post">
			<h1 class="title">Welcome</h1>
			<div class="entry">
				<p>News news news news news</p>
			</div>

			<div class="meta">
				<p class="byline">Posted on May 8, 2008 by Scott</p>
				<p class="links"><a href="#" class="more">Read full article</a> <b>|</b> <a href="#" class="comments">Comments (0)</a></p>
			</div>
		</div>
</div>	<!-- start sidebar -->

	<div id="sidebar">
		<ul>
			<li id="loginBox">
				<h2>Brother Login</h2>
				<form method="get" action="">
					<fieldset>
					Username: <input type="text" id="u" name="u" /><br />
					Password: <input type="password" id="p" name="p" /><br /><br />

					<div align="center" /><input type="button" id="x" value="Go" onClick="this.value='Wait';this.disabled=true;login();" /><br /><br /><a href="?pg=requestAccess" /><strong>Request Access</strong></a></div />
					</fieldset>
				</form>
			</li>
			<li>
				<h2>Other Stuff</h2>
blah blah blah
			</li>
		</ul>

	</div>
	<!-- end sidebar -->	</div>	<!-- end content -->
	<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
	<p id="legal">(c) 2008 Phi Sigma Pi Beta Eta Chapter</p>
</div>
<!-- end footer -->

</body>
</html>

CSS

Code:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #403543 url(images/img01.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
}

h1, h2, h3 {
	margin: 0;
	font-weight: normal;
	color: #AD732A;
}

h1 {
	letter-spacing: -1px;
	font-size: 32px;
}

h2 {
	font-size: 23px;
}

p, ul, ol {
	margin: 0 0 2em 0;
	text-align: justify;
	line-height: 26px;
	font-size: 11px;
}

a:link {
	text-decoration: none;
	color: #AD732A;
}

a:hover, a:active {
	text-decoration: underline;
	color: #AD732A;
}

a:visited {
	color: #AD732A;
}

img {
	border: none;
}

img.left {
	float: left;
	margin-right: 15px;
}

img.right {
	float: right;
	margin-left: 15px;
}

/* Form */

form {
	margin: 0;
	padding: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

legend {
	display: none;
}

input, textarea, select {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
}

/* Header */

#header {
	width: 850px;
	height: 82px;
	margin: 0 auto 17px auto;
}

#logo {
	float: left;
}

#logo h1 {
	font-size: 38px;
	color: #FFFFFF;
}

#logo h1 sup {
	vertical-align: text-top;
	font-size: 24px;
}

#logo h1 a {
	color: #FFFFFF;
}

#logo h2 {
	margin-top: 0px;
	font-size: 12px;
	color: #A0A0A0;
}

#logo a {
	text-decoration: none;
}

/* Menu */

#menu {
	float: right;
}

#menu ul {
	margin: 0;
	padding: 15px 0 0 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	background: #F5F5F5;
	margin-left: 5px;
	padding: 7px 20px;
	text-decoration: none;
	font-size: 13px;
	color: #000000;
}

#menu a:hover {
	border-top: 5px solid #C1D11C;
	border-bottom: 3px solid #C1D11C;
	text-decoration: none;
}

#menu .active a {
	border-top: 5px solid #C1D11C;
	border-bottom: 3px solid #C1D11C;
}

/* Page */

#page {
	background: #ECE7D1;
	width: 850px;
	margin: 0 auto;
}

/* Content */

#content {
	float: left;
	width: 600px;
}

/* Post */

.post {
}

.post .title {
	margin-left: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	padding: 0 0 7px 18px;
	background: url(images/img03.gif) no-repeat left 50%;
	border-bottom: 1px solid #AD732A;
}

.post .entry {
	margin-left: 20px;
}

.post .meta {
	margin-left: 20px;
	border: 1px solid #AD732A;
	padding: 15px 10px 30px 10px;
}

.post .meta p {
	margin: 0;
	line-height: normal;
	color: #999999;
}

.post .meta .byline {
	float: left;
}

.post .meta .links {
	float: right;
}

.post .meta .more {
	padding: 0 20px 0 18px;
	background: url(images/img06.gif) no-repeat left center;
}

.post .meta .comments {
	padding-left: 22px;
	background: url(images/img07.gif) no-repeat left center;
}

.post .meta b {
	display: none;
}

/* Sidebar */

#sidebar {
	margin-right: 20px;
	float: right;
	width: 195px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin-bottom: 40px;
}

#sidebar li ul {
}

#sidebar li li {
	margin: 0;
	padding-left: 12px;
}

#sidebar h2 {
	margin-bottom: 10px;
	padding-left: 15px;
	background: url(images/img04.gif) no-repeat left 50%;
	border-bottom: 1px solid #86910F;
	font-size: 16px;
}

/* Search */

#search {
}

#search h2 {
	margin-bottom: 20px;
}

#s {
	width: 110px;
	margin-right: 5px;
	padding: 2px;
	border: 1px solid #F0F0F0;
}

#x {
	padding: 4px 4px;
	background: #C1D11C;
	border: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}

/* Boxes */

.box1 {
	padding: 20px;
	background: url(images/img05.gif) no-repeat;
}

.box2 {
	color: #BABABA;
}

.box2 h2 {
	margin-bottom: 15px;
	background: url(images/img10.gif) repeat-x left bottom;
	font-size: 16px;
	color: #FFFFFF;
}

.box2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited  {
	color: #EDEDED;
}

/* Footer */

#footer {
                height: 100px;
                min-height: 74px;
	padding: 10px 0 0 0;
	background: #666159 url(images/img02.jpg) repeat-x left top;
}

#legal {
	clear: both;
	padding-top: 30px;
	text-align: center;
	color: #A0A0A0;
}

#legal a {
	color: #A0A0A0;
}

**Cookiegal** · 18-May-2008, 12:00 PM #2

I've edited the title of your thread. Please be mindful of your language when posting here, even when using acronyms.

Sequal7 · 18-May-2008, 11:50 PM #3

Hello

Are you using a template from http://www.freecsstemplates.org?
If so, which one is it and did you make any changes to the CSS page?

SNewman · 19-May-2008, 04:24 PM #4

Yes, I am. I'm using a modified copy of Colorimetry. I'm not sure exactly what changes I made, but I'm pretty sure the only thing I changed were the colors.

matt-h · 20-May-2008, 04:52 PM #5

WebDev toolbar was updated and I got to the bottom of it.

Well I'm not sure of the cause but I fixed it by adding

overflow: auto;

to #page

Something to do with heights and float properties I think, as giving #page a height fixed it, as did removing the floats from content and sidebar, but none of the solutions worked fully.

dudeking · 20-May-2008, 04:56 PM #6

just before you close the page div put this

Quote:

dudeking · 20-May-2008, 04:56 PM #7

or your method lol

thats the one I prefer but stick with yours if it works

matt-h · 20-May-2008, 05:09 PM #8

Mine involves one edit (the css file), yours involves multiple edits (all html files)

SNewman · 20-May-2008, 05:33 PM #9

Quote:

Originally Posted by matt-h

WebDev toolbar was updated and I got to the bottom of it.

Well I'm not sure of the cause but I fixed it by adding

overflow: auto;

to #page

Something to do with heights and float properties I think, as giving #page a height fixed it, as did removing the floats from content and sidebar, but none of the solutions worked fully.

Wow...thanks! IDK why that works either but it does, and that's all the matters

hahah thanks again

dudeking · 20-May-2008, 05:39 PM **#10**

meh its just what ive learnt so what ive always done. Really yours is better as the whole idea is as little html as possible. Next site I do I'll use your method

tomdkat · 20-May-2008, 08:00 PM **#11**

Quote:

Originally Posted by matt-h

Well I'm not sure of the cause but I fixed it by adding

overflow: auto;

to #page

Something to do with heights and float properties I think, as giving #page a height fixed it, as did removing the floats from content and sidebar, but none of the solutions worked fully.

Quote:

Originally Posted by dudeking

just before you close the page div put this

Quote:

Originally Posted by matt-h

Mine involves one edit (the css file), yours involves multiple edits (all html files)

Both solutions seem to work but which solution is the best solution?

Peace...

dudeking · 21-May-2008, 04:24 AM **#12**

I've just been doing some practice with them both and it seems that with overflow:auto; if its not perfect with it puts in scroll bars where as with <br /> with clear:both; it just will hide the few extra pixles.

TBH you should probibly use overflow:auto; its less markup.

tomdkat · 21-May-2008, 11:05 AM **#13**

Thanks for the experimentation. Sounds like the "clear: both" method will yield more consistent results. Maybe he could create a "clear" class and assign it to the elements that need that functionality. That way, other elements (other than line breaks) can benefit from it without requiring major "surgery" later on.

In any event, thanks for the info dudeking and matt-h.

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)