help please..

brown2005 · September 18, 2007

hi i have this website...

http://www.fantasy-comps.com/index/index.php?page=home

it works fine in i.e. but in firefox, opera and netscape the boxes aww in the wrong place.. please see if u can help thanks...

brown2005 · September 18, 2007

#main{

background: #EAEAEA;

padding: 10px;

}

i have that, which is the grey area on the site above that contains the stuff i want.

if i add say

height: 500px;

the site looks fine on the different browsers. but obviously i want it the height of the bottom box..... as it is appearing in internet explorer.

dbrimlow · September 18, 2007

Clear your footer tag of the floats:

#footer {
clear:both;
margin: 0 auto;
background-color: #c00;
border-bottom: 5px solid #730101;
height: 20px;
padding: 7px 10px 0px 10px;
color: #ffffff;
}

brown2005 · September 18, 2007

hey thanks for the help. but that doesnt work either...

dbrimlow · September 18, 2007

It works when I try it.

The footer now slides below the boxes in FF 2.06 and it looks the same in IE 6.0.

Here is the sample code I used:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>fantasy-comps.com - The worlds biggest fantasy games site.</title>
<style type="text/css">
/* CLEAR */

	*
	{

		margin: 0px;
		padding: 0px;

	}

/* BODY */

	body
	{

		background: #ffffff;

		margin: 0px;
		padding: 0px 15px 15px 15px;

	}	
	/* FOOTER */



	#footer 

	{
clear:both;
		margin: 0 auto;

		background-color: #c00;

		border-bottom: 5px solid #730101;

		height: 20px;

		padding: 7px 10px 0px 10px;

		color: #ffffff;



	}



/* FOOTER-LOGO */



	#footer-logo

	{



		float: left;



		width: 400px;



		font-family: Arial;

		font-size: 11px;

		font-weight: bold;



		color: #ffffff;			



	}



/* FOOTER-INFORMATION */



	#footer-information ul

	{



		font-family: Arial;

		font-size: 11px;



		position: relative;

		float: right;



	}



	#footer-information li 

	{	



		display: inline;

		position: relative;



	}



	#footer-information li a 

	{



		color: #e9e9e9;

		text-decoration: none;



	}



	#footer-information li a:hover

	{



		color: #fff;

		text-decoration: underline;



	}		
	/* HEADER */



	#header

	{



		height: 70px;



		padding: 10px 10px 0px 10px;



		background-image: url(http://www.fantasy-comps.com/include/images/header-background.jpg);			



	}



	#header-logo

	{



		float: left;			



	}		



	#header-banner

	{



		float: right;	}
		/* HOME LEFT */



	#home-left

	{

	  

		float: left;



		width: 730px;



		padding: 0px;

		margin: 0px;



	}



/* HOME LEFT LI */



	#home-left a:link

	{



		border: 1px solid #999999;

		background: #ffffff;



		height: 100px;

		width: 230px;



		text-align: center;



		padding: 5px 0px 5px 0px;



		float: left;



		margin-right: 10px;

		margin-bottom: 10px;			



	}



	#home-left a:visited

	{



		border: 1px solid #999999;

		background: #ffffff;



		height: 100px;

		width: 230px;



		text-align: center;



		padding: 5px 0px 5px 0px;



		float: left;



		margin-right: 10px;

		margin-bottom: 10px;			



	}		



	#home-left a:hover

	{



		border: 1px solid #999999;

		background: #FFFF00;



		height: 100px;

		width: 230px;



		text-align: center;



		padding: 5px 0px 5px 0px;



		float: left;



		margin-right: 10px;

		margin-bottom: 10px;			



	}					



/* HOME RIGHT */



	#home-right

	{



		float: right;



		border: 1px solid #999999;

		background: #ffffff;



		width: 210px;

		height: 233px;		



	}	
	/* MAIN */



	#main

	{



		background: #EAEAEA;

		padding: 10px;



		height: 100%;



	}



/* MAIN NAVIGATION */



	#main-navigation

	{



		border: 1px solid #999999;



		height: 25px;

		padding: 5px 10px 0px 10px;



		margin-bottom: 10px;			



		background: #808080;



		color: #ffffff;

		font-weight: bold;

		font-size: 11px;



	}



	#main-navigation-links

	{



		padding: 2px 0px 0px 0px;		

		float: left;



	}



	#main-navigation-links a:link

	{



		color: #ffffff;

		font-weight: bold;

		font-size: 11px;



	}	



	#main-navigation-links a:visited

	{



		color: #ffffff;

		font-weight: bold;

		font-size: 11px;



	}



	#main-navigation-links a:hover

	{



		color: #FFFF00;

		font-weight: bold;

		font-size: 11px;



	}					



	#main-navigation-select

	{



		float: right;



	}



	#main-navigation-select select

	{



		color: #999999;

		font-weight: bold;

		font-size: 11px;



	}									



/* MAIN HEADER */



	#main-header

	{



		border: 1px solid #999999;



		height: 70px;



		padding: 10px 10px 0px 10px;

		margin-bottom: 10px;			



		background: #ffffff;



	}



/* MAIN HEADER TITLE */



	#main-header-title

	{



		float: left;



		color: #FF0000;



		font-size: 50px;



	}



/* MAIN HEADER SPONSOR */



	#main-header-sponsor

	{



		float: right;



	}	



/* MAIN CONTENT */



	#main-content

	{



		width: 100%;



	}	
	#top

	{



		height: 20px;



		padding: 5px 25px 0px 25px;



		font-family: Arial;

		font-size: 11px;



		color:	#730101;



	}



/* TOP ACCOUNT */



	#top-account

	{



		float: left;



	}	



/* TOP HELP */



	#top-help

	{



		float: right;



	}	



/* TOP A */



	#top a:link

	{



		color:	#730101;



	}



	#top a:visited

	{



		color:	#730101;



	}		



	#top a:hover

	{



		color:	#999999;



	}												
	</style>
	<!--[if lt ie 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="ie0nly.css" />
<![endif]-->
</head><body><div id='top'><div id='top-account'>Welcome, Guest.
	   | 
 	  <a href='http://www.fantasy-comps.com/index/index.php?page=account&action=login'>Login</a>
	   | 
 	  <a href='http://www.fantasy-comps.com/index/index.php?page=account&action=register'>Register</a></div><div id='top-help'>
 	<a href='http://www.fantasy-comps.com/index/index.php?page=help'>Help</a>
 	 | 

 	<a href='http://www.fantasy-comps.com/index/index.php?page=help&action=responsible'>Responsible Gaming</a>
 	 | 
 	<a href='http://www.fantasy-comps.com/index/index.php?page=advertising&action=partners'>Partners</a>	 		 	 	
 	 | 
 	<a href='http://www.fantasy-comps.com/index/index.php?page=statistics'>Statistics</a>	 
 </div></div><div id='header'><div id='header-logo'>
	<a href='index.php?page=home'><img src='http://www.fantasy-comps.com/include/images/header.JPG' border='0' width='200' height='60'></a>	
 </div><div id='header-banner'>

	<img src='' border='0' width='468' height='60'>	
 </div></div><div id='main'><div id='main-navigation'>	<div id='main-navigation-links'>

		<a href='http://www.fantasy-comps.com/index/index.php?page=home'>HOME</a> 	</div>	<div id="main-navigation-select">

		<select>

			<option>Quick Links</option>

			<option>                                 </option>


			<option>Home</option>
			<option>Fantasy - Paid</option>
			<option>Fantasy - Free</option>								

			<option> </option>					

		</select>			

	</div></div><div id="main-header">	<div id='main-header-title'>home</div>	<div id="main-header-sponsor"><img src="" border="0" width="468" height="60"></div></div><div id="main-content"><div id='home-left'>
 	<a href='test.php'>Test1</a>

 	<a href='test.php'>Test1</a>
 	<a href='test.php'>Test1</a>
 	<a href='test.php'>Test1</a>
 	<a href='test.php'>Test1</a>	
 	<a href='test.php'>Test1</a>		 	 			 			 	 		
 </div><div id='home-right'> </div></div></div><div id='footer'><div id='footer-logo'>© Copyright 2007 - fantasy-comps.com</div><div id='footer-information'>

 	<ul>
		<li><a href=''>About Us</a></li>
		 | 
		<li><a href=''>Contact Us</a></li>
		 | 					
		<li><a href=''>Advertise</a></li>
		 | 

		<li><a href=''>Affiliates</a></li>
		 | 
		<li><a href=''>Careers</a></li>
		 | 
		<li><a href=''>Terms & Conditions</a></li>
		 | 

		<li><a href=''>Privacy Policy</a></li>										
	</ul>																				
 </div></div></body></html>

brown2005 · September 18, 2007

hi.. yeah sorry i didnt reload the page.. it has now worked.. but if u notice the grey background has not followed all the way down to the footer...

ne ideas?

and thanks very much for the help so far...

dbrimlow · September 18, 2007

I don't see any grey background in FF or IE! They now look identical to me.

brown2005 · September 18, 2007

#main{

background: #EAEAEA;

padding: 10px;

height: 100%;

}

is the grey background i am referring too... in internet explorer.. it goes directly down in a straight line from the top red bar to the bottom red bar....

but in firefox.. it stops just after it reaches the first test1 box..

dbrimlow · September 18, 2007

Okay, you must be using a high resolution LCD monitor (at least 17inch).

I use an old 15" crt monitor - because, a). if my site looks good on an old crt monitor it will look good on an LCD; b). I want to be sure my layouts will fit in screen ranges of 1024 x 768 to 800 x 600 screen; c). I want to accommodate the widest range of visitor, world-wide, as possible. Many people and businesses around the world still use old crt monitors.

As such, colors like #EEEEEE and similar, do not show up on older CRT monitors. I can't see it at all.

So, to understand what your problem is, I made it #666666.

It is a float issue. Give main a float:left and it will work.

In general, your layout, however, will blow up if anyone reduces their window size. It is fixed for a minimum of 940px wide. I would advise that the home left and home right use percentages instead of px. 74.5% for left 24.5% for right (you have to allow for padding and margin).

Just a thought.

brown2005 · September 18, 2007

cheers mate.. thanks for the help.. i saw wat u mean bout the screen thing.. so ive changed the whole thing... with 750px maximum and worked round that.. thanks..

dbrimlow · September 19, 2007

Glad to have helped.

Always glad to see people working at creating proper table-less layout css based valid code. It can be frustrating, but is worth it in the long run.

Dave

brown2005 · November 1, 2007

http://www.fantasy-comps.com/index/index.php?page=account&action=register

hi,

i was helped before on my site, but I have made a few adjustments and its not working no more on this page above. any help would be appreciated.

thanks

richard brown

dbrimlow · November 1, 2007

First, without looking at anything else, there is no such thing as "float: center;"

Change them all to float:left.

You should also check out this tutorial about floats.

http://css.maxdesign.com.au/floatutorial/

brown2005 · November 1, 2007

ok thanks mate. done that and it works fine now.. the background has stretched the whole div..

but now i face another problem.. the bottom of the page there should be a 10px gap as i have used

margin-bottom: 10px;

this works fine on internet explorer, firefox, netscape but not opera? ne ideas please?

dbrimlow · November 2, 2007

Which version of Opera?

Opera is very strange. Sometimes it follows standards and sometimes it has a mind of its own. Usually Opera has a problem with 100%. I don't know why.

I would need to see the code again. But the link is down.

brown2005 · November 2, 2007

9.23

dbrimlow · November 3, 2007

Actually, it blows up in FF, too.

There are just WAY too many individual css files for me to event get a handle on which is what.

It is very important when using PHP, to FIRST get your html markup and css layout working as a general template.

You have syntax and markup errors for the xhtml transitional doctype. you site's validation page.

xhtml requires ALL lowercase. <SCRIPT> must be <script>. Also, the <form> tag cannot be embedded in a <p> tag - change p class="select" to div class="select" .

Change the mime-type charset to utf-8, and convert your & to & (and any other characters to html characters).

Actually, you are even better off using an HTML 4 strict DOCTYPE. Since it seems as if you are more comfortable coding with less restriction and a little more "optional" tag syntax.

It's easy, all you need to do is "find and replace" the free standing closing tags from "/>" to ">", and remove the language="" from your scripts.

I'll look at the layout, but off the bat I see you have no main container.

You will have to use block level tags inside your form inputs

Sign In

help please..

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information