Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Well, I decided to make the jump from tables to CSS with RedNerve (www.rednerve.com). 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. :

    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 the WDF community 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 Attached Images
    Rednerve
    Creative Freelance Design

  2.  

  3. #2
    Senior Member DanielOliver's Avatar
    Join Date
    Jun 2003
    Location
    Cornwall, England.
    Posts
    1,202
    Member #
    1879
    For your right hand side column not stretching the whole way down the page, rather then using just that single image for the right hand side use a image the width of the page x about 5-10px high and apply that to a container div that wraps around all the code in the body (or the body tag for that matter). This then stetches the whole way down the page and both columns are the exact same height.

    If my explanation isn't clear enough check out http://www.alistapart.com/articles/fauxcolumns/ by Dan Cederholm. It's a handy technique to use on multiple column layouts when working with CSS.

    Include your border in this image. It will save having to do it with CSS and is a piece of cake to do.

  4. #3
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Well, after a lot of help from Dan, I've fixed the problems in IE and it displays fine in IE. However, the problems in Firefox are still there

    I've removed the IE screenshot because it's fixed and also updated the code for main.css in my original post.

    If anyone can help me further to fix the Firefox problems, that'd be great!

    Thanks,

    Will.
    Rednerve
    Creative Freelance Design

  5. #4
    Senior Member
    Join Date
    May 2005
    Location
    Essex, United Kingdom
    Posts
    200
    Member #
    10131
    Nice site , haven't got firefox at the moment as my comp has a virus and has crashed but was looking at your css file and realised it was quite big. I noticed that you have many color references like: #000000 these can be shortened to #000, overall this will save quite a bit of space. Also in this code:
    Code:
    #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;
    	}
    You can save a lot of space by combining the background properties to:
    Code:
    background:#F8F8F8 url(form_left.jpg) repeat-y;
    There is a few instance where you can do similar things. Just thought would make a comment about it as overall it could save a bit of space

  6. #5
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Thanks dchesterton, probably consider making some of those changes after, but, for now, my main concern is on fixing these Firefox issues
    Rednerve
    Creative Freelance Design


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com