Converting RedNerve to CSS - Hitting some problems!

[will7]

Well, I decided to make the jump from tables to CSS with RedNerve. I have recreated the layout in CSS as far as I can but am now hitting some problems.

Problem #1: In the right hand bar (the one with the "contact me" and "view portfolio" boxes), the background does not seem to be working. It stops half and leaves about 20 - 30px without the background and I have no idea why

Problem #2: You see either side of the main content area there is a 7px solid, dark red border? Well, it displays fine in IE, but, when I look at it in Firefox, it stops half way down the page

Problem #3: At the very bottom right of the central column, it has "ia" below the copyright notice. I think this could be that I have typed something wrong in the code where I shouldn't have or something, but, if you can see the problem, then great! Note: This problem doesn't seem to happen in Firefox

I have attached a picture of the problems in the site (I made two seperate files, one for the IE problems and one for Firefox problems).

Also, here is the CSS I used for main.css which contains all the CSS formatting for the <DIV>s and text etc. :

html,body {
margin:0px; 
padding:0px; 
height: 100%; 
font-family: Tahoma; 
font-size: 11px; 
background-image:url(background.jpg);
background-repeat:repeat-x;
background-color:#A80000;
} 
a:link {
color: #D00000;
text-decoration:none;
font-weight:bold;
} 
a:visited {
color: #D00000;
text-decoration:none;
font-weight:bold;
} 
a:hover {
color:#2F598C;
text-decoration:none;
font-weight:bold;
} 
a:active {
color:#2F598C;
text-decoration:none;
font-weight:bold;
} 
a {
color: #D00000;
text-decoration:none;
font-weight:bold;
} 
.main_text {
font-family:  Verdana; 
font-size:10px; 
font-style: normal;
line-height: 18px;
color: #737373; 
} 
.main_text_form {
font-family:  Verdana; 
font-size: 10px; 
font-style: normal; 
line-height: 19px; 
color: #000000; 
} 
.header {
font-family: Verdana; 
font-size: 10px; 
font-style: normal; 
line-height: 19px; 
color: #333333; 
font-weight: bold; 
} 
.form {
height:17px;
border : 1px solid #cccccc; 
font-family : Verdana; 
font-size : 9px;
padding-left:3px;
padding-top:3px;
background-color : #fcfcfc; 
color : #666666; 
font-weight:bold;
line-height : 15px; 
width : 190px; 
} 
.form2 {
height: 20px; 
border: 1px solid #cccccc; 
font-family: Verdana; 
font-size: 9px; 
padding-left:3px;
padding-top:1px; 
background-color: #fcfcfc; 
color: #666666;
font-weight: bold;
line-height: 15px; 
width: 196px; 
} 
.form_text {
font-family: Arial; 
font-size: 10px;  
color: #666666; 
font-weight:bold;
} 

#main_container {
	width:687px;
	height:100%;
	margin:auto;
	background-color:#FFFFFF;
	background-image:url(borders.jpg);
	background-repeat:repeat-y;
	}
	
#container_top {
	width:673px;
	height:100px;
	margin:auto;
	border-bottom:1px solid #E6E6E6;
	}

#logo {
	width:257px;
	height:100px;
	float:left;
	background-color:#FFFFFF;
	border-bottom:1px solid #e6e6e6;
	}
	
#spacer {
	width:165px;
	height:100px;
	float:left;
	background-color:#FFFFFF;
	border-bottom:1px solid #e6e6e6;
	}
	
#quote {
	width:250px;
	height:100px;
	float:left;
	background-color:#FFFFFF;
	border-bottom:1px solid #e6e6e6;
	}
	
#navigation {
	width:672px;
	height:40px;
	margin:auto;
	background-color:#FFFFFF;
	background-image:url(navigation_bg.jpg);
	background-repeat:no-repeat;
	background-position:bottom right;
	}
	
#content_container {
	width:673px;
	height:100%;
	margin:auto;
	}
	
#left_main {
	width:467px;
	height:100%;
	float:left;
	padding-left:20px;
	padding-right:20px;
	padding-top:20px;
	padding-bottom:60px;
	background-image:url(main_background.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	background-color:#FFFFFF;
	}
	
#right_main {
	width:145px;
	height:100%;
	float:left;
	padding:10px;
	background-image:url(form_left.jpg);
	border-left:1px solid #e6e6e6;
	background-color:#F8F8F8;
	background-repeat:repeat-y;
	}
	
#footer_container {
	width:673px;
	height:5%;
	margin:auto;
	}
	
#footer_left {
	width:326px;
	height:30px;
	float:left;
	background-image:url(form_left.jpg);
	padding-left:10px;
	padding-top:14px;
	background-color:#FFFFFF;
}

#footer_right {
	width:326px;
	height:30px;
	float:left;
	background-image:url(form_left.jpg);
	padding-right:10px;
	text-align:right;
	padding-top:13px;
	border-top:1px solid #e6e6e6;
	background-color:#FFFFFF;
}

I know this may be a complicated matter to solve, but I'm sure that Namepros can guide me to the solutions :D

Please Note: I have only done the first page (index.php) in CSS and none of the other links work yet. I want to get these problems sorted before I move onto doing the other pages.

Thank you for your time,

Will.

 

[def1]

i think i know whats wrong let me test it first tho

ok the problem with your border i think has something to do with your css.
You have it set to your main container and in firefox your main contanier only is half the screen. This is what i could tell but i could be wrong

 

[will7]

I have set the "main_container" to 100% height though

 

[LeetPCUser]

It would help to see the coding of the site also. I need to know how you are calling them.

 

[will7]

Go to View > Source

There's also been a few changes to the main.css file (original post edited) so please take them into account.

Also, it works fine in IE now (with the changes to main.css), but Firefox still has problems

 

[LeetPCUser]

Will, I would recommend chaning the borders.jpg file. I would say you should put in a border left and a border right. You can call that grey piece seperate on the right, but I don't exactly know what that is doing. Play around with it maybe...

boder-left: 8px solid #HEX;

I think this would be more efficient and work, try it out. It at least will cut down load time.

 

[will7]

I'm sorry, I don't really understand what you're saying, Bryan

 

[def1]

yea will but when i viewed it in dreamweaver your main container only reaches half the screen. This is probably the same effect that firefox is having. Instead on using 100% hieght just take it out the hieght all together and dreamweaver and firefox will know to make it stretch full page

 

[treatist]

Set your left container to 90% instead of 100%. I know it takes a little more work, but just as an FYI, I never use percentages because of just this type of problem. Browsers have a bad tendency to add other layers into what it considers it's real height.

 

[iNod]

The main problem with CSS & FireFox is the height function. It hardly ever works and alot of the time height will not work on FireFox. (I don't mean sometimes it will sometimes it won't) I mean height: 10px; may work for some versions while height:10; may work for others and height: 10px; may not work for others. By others I mean versions. IE is too stuborn to want to work like FireFox so we got problems. IE and FireFox have always been different and they will always make web-developers work harder. Once you get it looking good in both it will look good in ass browsers as other browsers (Opera, Netscape,etc) look and function like FireFox.

I know long and confusing :P

iNod.

 

[Rowan W]

The main problem with CSS & FireFox is the height function. It hardly ever works and alot of the time height will not work on FireFox. (I don't mean sometimes it will sometimes it won't) I mean height: 10px; may work for some versions while height:10; may work for others and height: 10px; may not work for others. By others I mean versions. IE is too stuborn to want to work like FireFox so we got problems. IE and FireFox have always been different and they will always make web-developers work harder. Once you get it looking good in both it will look good in ass browsers as other browsers (Opera, Netscape,etc) look and function like FireFox.

I know long and confusing :P

iNod.

First of all this thread is over a month old, secondly, there's no 'functions' in CSS or HTML. Thirdly, there's nothing wrong with FF's rendering of height and width.

height:10; cannot work because the unit type is not specified.

Also, by "ass" did you mean bad? Because Opera and Netscape are no worse than IE or FF, infact Netscape uses IE's and Mozilla's rendering engines so it can't be any different in the first place. Opera has differences but those differences aren't serious.