FF being smelly, help needed for website

unwashed potato! · 3 Jan 2007 at 16:34

trying to make another website layout but having problems with it in FF, weird as its usually IE.

anyways i have a content-wrapper which is whats wrapping all the content together which a blueish background, then i got like the left/right sidebars and main part within that.

in IE the blue is fine and is going 100% down with the content, but in FF it does nothing, i can only see a small amount which is because of a padding i put.

here is the css, if html is needed i will post that too:

Code:

/* CSS Document */

body {
	background-color: #CCCCCC;
	background-image: url(bg_images/body_bg.gif);
	background-repeat: repeat-x;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	text-align: left;
	color: #666666;
}



/*-------------- SITE WRAPPER -------------- */

#site-wrapper{
	margin: 0px auto 0px auto;
	width: 1000px;
	position: relative;
	height: 100%;
}	

				

/*-------------- HEADER -------------- */

#header-wrapper{
		height: 84px;
		width: 1000px;
		overflow: hidden;
		position: relative;
}

.header-left{
		 float: left;
		 height: 84px;
		width: 552px;
		background: #217fbd;
		overflow: hidden;
}


.header-middle {
		float:right;
		 height:84px;
		width:243px;
		background: #919191;
		overflow:hidden;
}

.header-right {
		 float:right;
		 height:84px;
		width:205px;
		background: #217fbd;
		overflow:hidden;
}



/*-------------- SEARCH BAR -------------- */

.searchbar-wrapper {
		height: 38px;
		width: 1000px;
		overflow: hidden;
		position: relative;
		background: #1967b1;
		border-right: 2px solid #616161;
}



/*-------------- CONTENT AREA -------------- */

#content-wrapper {
		height: 100%; /* ---- change this when i have content sorted out */
		width: 1000px;
		position: relative;
		padding-top: 10px;
		background: #217fbd;
		border-bottom: 2px solid #54a3e8;
		border-right: 2px solid #616161;

}

/*-------------- LEFTBAR -------------- */

#leftbar-wrapper {
		width: 194px;
		height: 100%;
		margin: 0px 10px 10px 10px;	
		float: left;
		display: inline;	
}

#leftbar-box {
		width: 194px;
		height: 100%;
		background: #ffffff;
		position: relative;
		border: 1px solid #ffffff;
		margin-bottom: 10px;
		border-bottom: 6px solid #e7e7e7;
}

.leftbar-header {
		width: 194px;
		height: 36px;
		position:relative;
		background: #77cf04;
		font-weight: bold;
		color: #ffffff;
		vertical-align: 50%;
		text-transform: capitalize;
		border-bottom: 4px solid #e7e7e7;
}

.leftbar-content {
		width: 184px;
		height: 100%;
		background: transparent;
		color: #666666;
		text-align: left;
		padding:5px;
		overflow: hidden;
		margin-bottom: 1px;
		border-bottom: 1px solid #ececec;		
		
}


/*-------------- RIGHTBAR -------------- */

#rightbar-wrapper {
		width: 274px;
		height: 100%;
		margin: 0px 10px 10px 10px;	
		float: right;
		display: inline;	
}

#rightbar-box {
		width: 274px;
		height: 100%;
		background: #ffffff;
		position: relative;
		border: 1px solid #ffffff;
		margin-bottom: 10px;
		border-bottom: 6px solid #e7e7e7;
}

.rightbar-header {
		width: 274px;
		height: 36px;
		position:relative;
		background: #77cf04;
		font-weight: bold;
		color: #ffffff;
		vertical-align: 50%;
		text-transform: capitalize;
		border-bottom: 4px solid #e7e7e7;
}

.rightbar-content {
		width: 264px;
		height: 100%;
		background: transparent;
		color: #666666;
		text-align: left;
		padding:5px;
		overflow: hidden;
		margin-bottom: 1px;
		border-bottom: 1px solid #ececec;
		
}



/*-------------- MIDDLEBAR -------------- */

#middlebar-wrapper {
		width: 492px;		
		_width: 486px;
		height: 100%;
		margin: 0px 0px 10px 0px;	
		float: right;
		display: inline;
}

#middlebar-box {
		width: 492px;		
		_width: 486px;		
		height: 100%;
		background: #ffffff;
		position: relative;
		border: 1px solid #ffffff;
		margin-bottom: 10px;
		border-bottom: 6px solid #e7e7e7;
}

.middlebar-header {
		width: 492px;
		_width: 486px;
		height: 36px;
		position:relative;
		background: #44a5df;
		font-weight: bold;
		color: #ffffff;
		vertical-align: 50%;
		text-transform: capitalize;
		border-bottom: 4px solid #e7e7e7;
}

.middlebar-content {
		width: 482px;
		_width: 476px;
		height: 100%;
		background: transparent;
		color: #666666;
		text-align: left;
		padding: 5px;
		overflow: hidden;
		margin-bottom: 1px;
		border-bottom: 1px solid #ececec;
		
}



/*-------------- FOOTER -------------- */

#footer {
		height: 59px;
		width: 1000px;
		overflow: hidden;
		position: relative;
		background: #3ba0ff;
		border-top: #1967b1;
		float: left;
}

anything?

also while im here can anyone tell me why only in IE does the last part of the text get repeated and appear outside of where is supposed to be. here a piccy of it happening?

Wimnat · 3 Jan 2007 at 16:38

Can you post a link to the test server? I prefer to debug that way.

unwashed potato! · 3 Jan 2007 at 16:39

Wimnat said:
Can you post a link to the test server? I prefer to debug that way.

its not hosted anywhere yet so give me a few minutes and ill post a link

unwashed potato! · 3 Jan 2007 at 16:43

ok heres link: http://www.mammalianmedia.com/new/index.html

Wimnat · 3 Jan 2007 at 16:56

add

float: left;

to your #content-wrapper

unwashed potato! · 3 Jan 2007 at 17:00

Wimnat said:
add

float: left;

to your #content-wrapper

genius, worked perfect, well almost

the footer is now a million miles away from the content area, though i will sort that out myself.

any clues on the random text problem in IE? has happened to me before and i still ahven't firgured a solution for it.

finally does anyone know why in IE and FF the text in the boxes appears different heights? i want it to be what its like in IE view.

weird as IE is usually the problem maker

Wimnat · 3 Jan 2007 at 17:06

That footer problem might be to do with you setting the height in each of your header divs. IE has a problem with maths addition.

Not sure about the random text problem.

The reason for the different heights is the default alignment of text is different in each browser (it'll probably look different in Opera too).

I'll look at the problems for you, post back if you find a solution before me!

unwashed potato! · 3 Jan 2007 at 17:09

Wimnat said:
post back if you find a solution before me!

ok will do, though have only mintes before i got to go to work so may not find a solution until later tonight. Like i said with the random text i have had this problem for a long time and no solution, the html as you may have seen has only 1 bit of text saying the repeated bit, so from no where IE has got another part.

also the footer bit i will try and figure out for myself as im sure that i could with that one, just need to examine my code a bit more.

the text appears the same in FF and opera, just IE that does both the text pborlems.

thanks so far for the help.

Wimnat · 3 Jan 2007 at 18:30

I redid your code a bit. I solved the problem but I did my own css so i've lost a few of your styles. It shouldn't be too hard to add them back in though.

HTML...

Code:

<!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" xml:lang="en" lang="en" >
<head>
	
	<title>OCUK - addy_010</title>
	
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<link rel="stylesheet" href="Wimnat.css" type="text/css" />
	
</head>

<body>

<div id="site-wrapper" >
	<div id="header-wrapper" > Head 
	</div>
	<div id="wrapper" class="clearfix" > 
		<div id = searchbar-wrapper>
		</div>
		<div id="twocols" class="clearfix"> 
			<div id="mainbar" >
				<div id="mainbar-box">
					<div id="mainbar-header">
						<a>Middle Bar 1</a>
					</div>
					<div class="mainbar-content">
						<p>hello world hello world hello world hello world </p>
						<ul>
							<li>green</li>
							<li>blue</li>
							<li>red</li>
						</ul>					
					</div>
				</div>
			</div>
			<div id="rightcol" >
				<div id="rightbar-box">
					<div id="rightbar-header">
						<a>Right Bar 1</a>
					</div>
					<div class="rightbar-content">
						<p>hello world hello world hello world hello world </p>
						<ul>
							<li>green</li>
							<li>blue</li>
							<li>red</li>
						</ul>					
					</div>
				</div>
			</div>
		</div>
		<div id="leftbar" >
			<div id="leftbar-box">
				<div id="leftbar-header">
					<a>Left Bar 1</a>
				</div>
				<div class="leftbar-content">
					<p>hello world hello world hello world hello world </p>
					<ul>
						<li>green</li>
						<li>blue</li>
						<li>red</li>
					</ul>					
				</div>
			</div>
		</div>
	</div>
	
	<div id="footer" >
		Footer 
	</div>
	
</div>

</body>

</html>

CSS...

Code:

/* CSS: 3 Column Layout + Header & Footer */

html, body{ 
	background-color: #CCCCCC;
	margin:0; 
	padding:0; 
	text-align:center; 
} 
 
#site-wrapper{ 
	width:1000px; 
	text-align:left;  
	margin-left:auto; 
	margin-right:auto;  
} 
 
#header-wrapper{
	position:relative; 
	height:84px; 
	background-color:#FFFFFF; 
	width:100%;
}

#searchbar-wrapper {
	height: 38px;
	width: 1000px;
	overflow: hidden;
	position: relative;
	background: #1967b1;
	border-right: 2px solid #616161;
	margin-bottom: 3px;
}
 
#leftbar {
	width:20%; 
	float:left; 
	position:relative; 
	margin-left: 5px;
	margin-bottom: 5px;
}


#leftbar-box {	
	width:99%; 
	float:left; 
	position:relative; 
	border: 1px #ffffff solid;
	padding: 0px;
}
 
#leftbar-header {
	border-bottom: 4px solid #e7e7e7;
	height: 40px;
	width:100%; 
	float:left; 
	position:relative; 
}

#leftbar-header a {
	display: block;
	height: 40px;
	background-color: #000000;
	color: #fff;
	width: 100%;
}

.leftbar-content {
	background-color: #ffffff;
	border-bottom: 4px solid #e7e7e7;	
	padding: 3px;
}
 
#twocols {
	width:75%; 
	float:right; 
	position:relative; 
}
 
#rightcol{
	width:30%; 
	float:right; 
	position:relative; 
	margin-right: 5px;
	margin-bottom: 5px;
}
 
#rightbar-box {	
	width:99%; 
	float:left; 
	position:relative; 
	border: 1px #ffffff solid;
	padding: 0px;
}
 
#rightbar-header {
	border-bottom: 4px solid #e7e7e7;
	height: 40px;
	width:100%; 
	float:left; 
	position:relative; 
}

#rightbar-header a {
	display: block;
	height: 40px;
	background-color: #000000;
	color: #fff;
	width: 100%;
}

.rightbar-content {
	background-color: #ffffff;
	border-bottom: 4px solid #e7e7e7;	
	padding: 3px;
}
 
#mainbar{
	background-color: #FFFFFF;  
	float: left; 
	display:inline; 
	position: relative; 
	width:66%; 
}

#mainbar-box {	
	width:100%; 
	float:left; 
	position:relative; 
	border: 1px #ffffff solid;
	padding: 0px;
}
 
#mainbar-header {
	border-bottom: 4px solid #e7e7e7;
	height: 40px;
	width:100%; 
	float:left; 
	position:relative; 
}

#mainbar-header a {
	display: block;
	height: 40px;
	background-color: #44a5df;
	color: #fff;
	width: 100%;
}

.mainbar-content {
	background-color: #ffffff;
	border-bottom: 4px solid #e7e7e7;	
	padding: 3px;
}
 
#footer {
	height:59px; 
	clear:both;
	background-color: #3ba0ff;
	border-top: 1px #1967b1 solid;
} 
 

 
 /* *** Float containers fix: */ 
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

#wrapper {
	background: #217fbd;
}

unwashed potato! · 4 Jan 2007 at 01:33

thanks for the relpy but i think i will stick with my own code as i wrote it and know the layout etc.

also was hoping for a solution to the problems so i know also for future, and for example the repeated text i have the same problem with another site so would like to learn how to fix these sort of problems.

well im take another stab in the dark with it and do aload of googling, so pray for me in finding a working solution.

does no one at all have a clue as to why the text would be repeated? thats my main annoyance atm

Wimnat · 4 Jan 2007 at 02:36

Fair enough, but why not compare your code to mine and check for differences? It'll probably be something trivial.

unwashed potato! · 4 Jan 2007 at 02:52

Wimnat said:
Fair enough, but why not compare your code to mine and check for differences? It'll probably be something trivial.

got point, will do. already can see the indent layout in the html is much easier to read so will be incorporating that into my design.

unwashed potato! · 4 Jan 2007 at 02:56

Wimnat said:
add

float: left;

to your #content-wrapper

forgot to ask why it is that FF needed this? just for future refernce or if anyone every asks, why you putting that there, i can say "well you see its because FF is the best blah blah blah"