IE Good, Firefox Bad!

**MiniMad** · Jun 20, 2004 09:35

Well, I've designed the basic layout for my new page.

I'm having a couple of problems that I know you gurus (!) can help with.

CSS

Code:

 html,body {margin:0;padding:0}
 
 BODY 
 {
 background-color: #f4FFFF;
 background-position: 0% 0%;
 background-repeat: no-repeat;
 font-family: Verdana, sans-serif;
 font-size: 12px;
 color: #000000;
 text-align:left;
 } 
 a
 {
 color: #FFFFFF;
 text-decoration: none;
 }
 a:hover 
 {
 text-decoration: none;
 color: #FFFFFF;
 }
 a:visited 
 {
 text-decoration: none;
 color: #FFFFFF;
 }
 #logo
 {
 position: float;
 margin:auto;
 width:100%;
 left: 0px;
 padding: 10px;
 top: 0px;
 border: 1px Solid;
 }
 * html #logo {height:50px}
 
 #right
 {
 position:absolute;
 top:80px;
 right:5px;
 padding: 5px;
 width: 150px;
 height: 60px;
 border: 1px Solid;
 }
 #left 
 {
 position: absolute;
 left:5px;
 padding: 5px;
 width: 150px;
 top: 80px;
 border: 1px solid;
 text-align:left;
 }
 
 #content 
 {
 position: float;
 margin-top:0px;
 margin-left:175px;
 margin-right:175px;
 padding: 5px;
 min-height: 100px;
 text-align:center;
 border: 0px Solid;
 }
 * html #content {height:400px;}
 
 #footer
 {
 position: float;
 margin:auto;
 width:100%;
 left: 0px;
 padding: 10px;
 top: 0px;
 border: 1px Solid;
 }

HTML:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <html>
 <head>
 <LINK href="layout.css" rel=stylesheet type=text/css>
 <title>Page Title</title>
 </head>
 <body>
 
 <div id=logo> Logo</div>
 <div id=right>menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br></div>
 <div id=left>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br>
 menu item 1<br>
 menu item 2<br></div>
 
 <div id=content align="center">
 This will be the main page for the Mini Club Website.<br>
 asdkufyhafsd; yiawevronawevfyonaevwfyounawef vyounavwef#awe <br>
 awevaevwfpoaevwfpmawevfmue vfawuimoea wvfuiomawevfumievawf<br>
 This is just padding to find out what happens with the text.  I hope that it will hit the margin and roll to the next line.
   We'll see!!!!
 </div>
 <div id=footer>
 footer
 </div>
 </body>
 </html>

Now the problems:

1. This is good in IE. In Firefox it's jumbled - the footer is half way up the main content.

2. I would like to add individual sections down the left and right side of the page so that I can declare individual PHP includes (for content) into their own DIVs. Anyone got an idea of how to do this please?

If it helps, I am aiming for the sections down the left and right as in this site: http://62.254.205.205/hc/

Thanks in advance for your help folks!

Collin

**xDev** · Jun 20, 2004 10:48

You got that mixed up! IE Bad, Firefox Good!

You should validate your document and CSS, it will give you insight as to what's wrong with your code. For one, position: float; doesn't mean anything.

http://www.w3schools.com/css/pr_class_position.asp
http://www.w3schools.com/css/pr_class_float.asp

There's all kinds of CSS layouts for the taking that have varying degrees of stability. I've compiled a few in my link directory:

http://www.xdevdesign.com/search.php...t=all&type=all

**MiniMad** · Jun 20, 2004 11:02

Sport the newbie at this!

Thanks xDev, I'll have a play.

Colli

**xDev** · Jun 20, 2004 11:13

Also, our resident CSS guru Paul O'B has a whole whack of near perfect CSS layouts for the taking, here:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

**Ian R. Gordon** · Jun 20, 2004 11:47

Paul is definately your man, we have him chained to a computer to output our CSS Complaint code, we pay him in scraps of food and torture him with propriety tags and code that only works in IE.

**Paul O'B** · Jun 20, 2004 12:03

Hi,

Thanks xdev for the link (btw your site looks good

)

Collin, heres your code tidied up a bit and the columns floated so that they stay in the flow and push the footer down.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
BODY 
 {
 margin:5px;
 padding:0;
 background-color: #f4FFFF;
 font-family: Verdana, sans-serif;
 font-size: 12px;
 color: #000000;
 text-align:left;
 } 
 a
 {
 color: #FFFFFF;
 text-decoration: none;
 background-color: #f4FFFF;
 }
 #logo
 {
 padding: 10px;
 border: 1px solid #000;
 min-height:50px;
 }
 * html #logo {height:50px}
 
 #right
 {
 float:right;
 width: 160px;
 margin:10px 0;
 text-align:left;
 }
 #left 
 {
 float:left;
 margin:10px 0;
 width: 160px;
 text-align:left;
 }
 .columninner {
  padding:0 5px;
 border:1px solid #000;
 margin-bottom: 10px;
 }
 #content 
 {
 margin-left:175px;
 margin-right:175px;
 padding: 5px;
 min-height: 100px;
 text-align:left;
 }
 * html #content {height:400px;}
 
 #footer
 {
 clear:both;
 margin-top:10px;
 padding: 10px;
 border: 1px solid #000;
 }
p {margin-top:0}
</style>
</head>
<body>
<div id="logo"> Logo</div>
<div id="right"> 
  <div class="columninner"> 
	<p>Right content goes here : Right content goes here : Right content goes 
	  here : Right content goes here : Right content goes here : Right content 
	  goes here : Right content goes here : Right content goes here : Right content 
	  goes here : </p>
  </div>
  <div class="columninner"> 
	<p>Right content goes here : Right content goes here : Right content goes 
	  here : Right content goes here : Right content goes here : Right content 
	  goes here : Right content goes here : Right content goes here : Right content 
	  goes here : </p>
  </div>
</div>
<div id="left"> 
  <div class="columninner"> 
	<p>Left content goes here : Left content goes here : Left content goes here 
	  : Left content goes here : Left content goes here : Left content goes here 
	  : </p>
  </div>
  <div class="columninner"> 
	<p>Left content goes here : Left content goes here : Left content goes here 
	  : Left content goes here : Left content goes here : Left content goes here 
	  : </p>
  </div>
  <div class="columninner"> 
	<p>Left content goes here : Left content goes here : Left content goes here 
	  : Left content goes here : Left content goes here : Left content goes here 
	  : </p>
  </div>
</div>
<div id="content"> 
  <p> This is the centre content : This is the centre content : This is the centre 
	content : This is the centre content : This is the centre content : This is 
	the centre content : This is the centre content : This is the centre content 
	: This is the centre content : </p>
  <p> This is the centre content : This is the centre content : This is the centre 
	content : This is the centre content : This is the centre content : This is 
	the centre content : This is the centre content : This is the centre content 
	: This is the centre content : </p>
  <p> This is the centre content : This is the centre content : This is the centre 
	content : This is the centre content : This is the centre content : This is 
	the centre content : This is the centre content : This is the centre content 
	: This is the centre content : </p>
</div>
<div id="footer"> footer </div>
</body>
</html>

Hope that helps.

Paul

**MiniMad** · Jun 20, 2004 15:34

Oh so simple when you know how! I was looking at a much more complicated solution.

Paul & xDev (I like your site too!) many many thanks for your help!

Ian - If you're paying this guy with "scraps" of food, they must be scraps of {insert favourite food here}!

**Ian R. Gordon** · Jun 20, 2004 16:30

What can I say, the tortore system works

**Paul O'B** · Jun 21, 2004 01:43

Originally Posted by Ian

What can I say, the tortore system works

lol - Feels like torture sometimes

**MiniMad** · Jun 22, 2004 04:35

Me again!

Not a problem, thought you might like a laugh:

Discussing the layout with a friend and he made this suggestion:

id reconmend using tables, it will make life easier when you start getting more and more content on. but its upto you. that stylesheet seems to do its job quite wel..

....