| | |||||
| ||||||||
| Web Design Discussion Discussion of web design techniques, advice, browser issues, software, design firms. |
![]() |
| | LinkBack | Thread Tools |
| | THREAD STARTER #1 (permalink) |
| Senior Member Join Date: Jun 2004 Location: United Kingdom
Posts: 2,695
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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;
} ![]() 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.
Last edited by will7; 10-25-2005 at 07:25 AM.
|
| |
| | #2 (permalink) |
| Senior Member Join Date: May 2005
Posts: 1,538
![]() ![]() | 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!• |
| |
| | THREAD STARTER #5 (permalink) |
| Senior Member Join Date: Jun 2004 Location: United Kingdom
Posts: 2,695
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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
Last edited by will7; 10-25-2005 at 07:24 AM.
|
| |
| | #6 (permalink) |
| Account Suspended Join Date: May 2005 Location: Whitewater, WI
Posts: 3,710
![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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. |
| |
| | #8 (permalink) |
| Senior Member Join Date: May 2005
Posts: 1,538
![]() ![]() | 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!• |
| |
| | #9 (permalink) |
| NamePros Regular Join Date: Dec 2003
Posts: 207
![]() | 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. |
| |
| | #10 (permalink) |
| Eating Pie Join Date: Nov 2004 Location: Canada
Posts: 2,272
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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. |
| |
| | #11 (permalink) | ||||
| NamePros Regular Join Date: Dec 2004 Location: QLD, Australia
Posts: 713
![]() |
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. | ||||
| |
![]() |
| 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 |