#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2005
    Posts
    14
    Rep Power
    0

    Position relevant in firefox


    Im creating a website for somebody and using CSS for positioning.

    Ive created a main content container which is a DIV and have several child DIVS which are the content themselves. The problem I am positioning the divs using relevant positioning but in firefox the webpage is still leaving lots of space underneath the positioned divs like they are stacked on top of each other.

    Safari isnt giving me this problem and I havent even looked at it in IE so i dont know yet. But could somebody please tell me how I can get firefox to get rid of all the space underneath because my DIVS are not stacked.

    http://christopher-ball.com/Craig/

    visit that in firefox and you will see what I mean, theres a big chunk of red UNDER the footer that shouldnt be there. If i take out the awards and sponsors DIVS then the block disappears.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Location
    Los Angeles, CA
    Posts
    28
    Rep Power
    0
    using height: 1000px; in the .contentcontainer class is one of the problems. i haven't messed with it much but i know taking that way took out about 90% of the red area. check with anywhere else you have used the height tag. you need to make sure the content can expand the div's else when you go to add content it will go right over the div like it's not even there. you should be able to do use min-height: 1000px; though if necessary.
  4. #3
  5. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    152
    Rep Power
    0
    Realtive positioning can get a little tricky, can't you use absolute positioning instead?

    I find it helps to add the following code, to iron out the slight differences between browsers, called a CSS Reset - "CSS Missing Manual"

    Code:
    /*
    ##################################
    ##################################
    ########### CSS RESET ############
    ##################################
    ##################################
    */
    html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, 
    variable, form, fieldset, input, blockquote, textarea, td, table {
    	padding: 0px;
    	margin: 0px;	
    	font-size: 100%;	
    	font-weight: normal;
    }
    ol {
    	padding: 1.4em;	
    	list-style: decimal;
    }
    ul {
    	padding-left: 2em;	
    	list-style: square;
    }
    img {
    	border: 0;
    }
    I wouldn't apply height propertys to divs that are guranteed to vary in height. Allow height to flow like water, or add an overflow property of scroll, hidden or auto.
    Last edited by The_Coder; July 26th, 2010 at 11:50 PM.

IMN logo majestic logo threadwatch logo seochat tools logo