Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div box not moving up on page ie7

    Hi all
    I currently was working on a page and everything was good looking in firefox. Then I checked it out in ie7. All hell broke loose.
    so far i created a seperate css file for ie7
    and things were ok except one part of the page.
    Its a div box with 9 small boxes inside it. Everything is intact except its not at the center of the page like in firefox but at the bottom of the browser in ie7

    this is what the div is coded as

    #ccfbox {
    width:100%;
    zoom:1;
    margin-left:120px;
    }

    and looks fine in firefox.
    also the logo on right not lining up with the one of left. There are not floated

    advice?
    Last edited by crosswire; 04-08-2011 at 08:17 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello crosswire,
    In FF, with #wrapper set at 984px width, how can 95% wide #ccfbox have room for a 120px left margin?

    In IE, how can 100% wide #ccfbox have room for any margin at all?

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    To demonstrate, use some temporary background colors like this -
    Code:
    #wrapper{
    	text-align: left; /* Following line center aligns the layout */ margin: 0 auto; width: 984px;
    	
    background: #F5F5F5;
    
    	
    	}
    
    #ccfbox {
    	width:100%;
    	zoom:1;
    	margin-left:120px;
    background: #f00;
    }
    In a set width container, why use % at all?
    Why even a width at all???
    Put a left margin on #ccfbox and no width, it will take all the room remaining.

    Look at this example for another approach at building a simple 2 column layout.
    Last edited by Excavator; 04-08-2011 at 11:31 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks will take a look at your options
    appreciate the response


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •