NamePros
Welcome, Guest! Ready to make a name for yourself in the domain business? We welcome both the hobbyist and professional domainer to join the discussion as part of the NamePros community.

Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
FAQ & TOS Register Search Today's Posts Mark Forums Read

Go Back   NamePros.com > Website Development Discussion Forums > Web Design Discussion
Reload this Page Converting RedNerve to CSS - Hitting some problems!

Web Design Discussion Discussion of web design techniques, advice, browser issues, software, design firms.

Advanced Search


Closed Thread
 
LinkBack Thread Tools
Old 10-24-2005, 12:48 PM THREAD STARTER               #1 (permalink)
Senior Member
Join Date: Jun 2004
Location: United Kingdom
Posts: 2,695
will7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud of
 



Converting RedNerve to CSS - Hitting some problems!


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
????: NamePros.com http://www.namepros.com/web-design-discussion/134562-converting-rednerve-css-hitting-some-problems.html

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
????: NamePros.com http://www.namepros.com/showthread.php?t=134562

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. :

Code:
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

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.
Attached Images
File Type: jpg firefox_problems.jpg (104.6 KB, 18 views)
__________________
Will Narburgh | Graphic design | Twitter | Email me
Last edited by will7; 10-25-2005 at 07:25 AM.
will7 is online now  
Old 10-24-2005, 08:19 PM   #2 (permalink)
Senior Member
 
def1's Avatar
Join Date: May 2005
Posts: 1,538
def1 has a spectacular aura aboutdef1 has a spectacular aura about
 



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
__________________
Did you try my toolbar? Works in Firefox and IE!
http://www.bumrecords.net - Fun Games, Music, Discussion, And Much More!
upload²
•Pick the Web Hosting Company most NamePros Members Use Pick Chronichosting!•
def1 is offline  
Old 10-25-2005, 03:04 AM THREAD STARTER               #3 (permalink)
Senior Member
Join Date: Jun 2004
Location: United Kingdom
Posts: 2,695
will7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud of
 



I have set the "main_container" to 100% height though
__________________
Will Narburgh | Graphic design | Twitter | Email me
will7 is online now  
Old 10-25-2005, 06:46 AM   #4 (permalink)
Account Suspended
 
LeetPCUser's Avatar
Join Date: May 2005
Location: Whitewater, WI
Posts: 3,710
LeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to behold
 


AIDS/HIV
It would help to see the coding of the site also. I need to know how you are calling them.
LeetPCUser is offline  
Old 10-25-2005, 06:59 AM THREAD STARTER               #5 (permalink)
Senior Member
Join Date: Jun 2004
Location: United Kingdom
Posts: 2,695
will7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud of
 



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
__________________
Will Narburgh | Graphic design | Twitter | Email me
Last edited by will7; 10-25-2005 at 07:24 AM.
will7 is online now  
Old 10-25-2005, 08:31 AM   #6 (permalink)
Account Suspended
 
LeetPCUser's Avatar
Join Date: May 2005
Location: Whitewater, WI
Posts: 3,710
LeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to beholdLeetPCUser is a splendid one to behold
 


AIDS/HIV
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.
LeetPCUser is offline  
Old 10-25-2005, 08:42 AM THREAD STARTER               #7 (permalink)
Senior Member
Join Date: Jun 2004
Location: United Kingdom
Posts: 2,695
will7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud ofwill7 has much to be proud of
 



I'm sorry, I don't really understand what you're saying, Bryan
__________________
Will Narburgh | Graphic design | Twitter | Email me
will7 is online now  
Old 10-25-2005, 04:16 PM   #8 (permalink)
Senior Member
 
def1's Avatar
Join Date: May 2005
Posts: 1,538
def1 has a spectacular aura aboutdef1 has a spectacular aura about
 



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
__________________
Did you try my toolbar? Works in Firefox and IE!
http://www.bumrecords.net - Fun Games, Music, Discussion, And Much More!
upload²
•Pick the Web Hosting Company most NamePros Members Use Pick Chronichosting!•
def1 is offline  
Old 10-30-2005, 08:09 PM   #9 (permalink)
NamePros Regular
Join Date: Dec 2003
Posts: 207
treatist is an unknown quantity at this point
 



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.
treatist is offline  
Old 12-13-2005, 08:07 PM   #10 (permalink)
Eating Pie
 
iNod's Avatar
Join Date: Nov 2004
Location: Canada
Posts: 2,272
iNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud ofiNod has much to be proud of
 


Special Olympics AIDS/HIV Cystic Fibrosis Save The Children Baby Health Cystic Fibrosis
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.
????: NamePros.com http://www.namepros.com/showthread.php?t=134562

I know long and confusing

iNod.
__________________
I feel old.
iNod is offline  
Old 12-13-2005, 08:45 PM   #11 (permalink)
NamePros Regular
 
Rowan W's Avatar
Join Date: Dec 2004
Location: QLD, Australia
Posts: 713
Rowan W will become famous soon enough
 



Originally Posted by 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.
????: NamePros.com http://www.namepros.com/showthread.php?t=134562

I know long and confusing

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.
Rowan W is offline  
Closed Thread


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


Similar Threads
Thread Thread Starter Forum Replies Last Post
css browser problems betontech Programming 0 05-07-2005 11:42 AM
css internet explorer problems (driving me crazy) lionscub613 Web Design Discussion 3 04-08-2005 02:23 PM
css problems with ie, and a couple other things thecatat Programming 0 08-23-2004 06:16 PM
Some problems with CSS tables. Nevsan Programming 13 03-21-2004 08:35 AM

Liquid Web Smart Servers  
All times are GMT -7. The time now is 01:28 PM.

Managed Web Hosting by Liquid Web
Domain name forum recommended by Domaining.com Powered by: vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.6.0 Ad Management plugin by RedTyger