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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    css positioning woes in ie ...

    hey guys,

    im building this site for fun and im having some problems in IE.

    the url to the site is here and
    the style sheet is here.

    the problem i am having is that one of my div's is bigger in IE and is the right size in firefox.
    any help is appreciated.

    Thanks in advanced.
    Last edited by bear85; 06-04-2007 at 05:21 PM. Reason: fixed one of my problems

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is hard to say exactly, but IE 6 and lower messes up the box model. Because of this elements with padding/margin should never have width. The only exception i have found to this rule is when using 'margin: 0px auto' to center the main content div. However, if you can restructure the rest of your elements to not have margins and widths, you will probably fix your problem. Otherwise, you'll need a special IE hacks stylesheet. This is what I use for my IE hacks:

    Code:
    <!--[if lt IE 8]>
    	<link rel="stylesheet" type="text/css" href="css/iehacks.css" />
    	<![endif]-->

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by bear85 View Post
    the problem i am having is that one of my div's is bigger in IE and is the right size in firefox.
    Carefully look at the sizes of your elements.

    You have #area nested within #inner. But here is your CSS:
    Code:
    #inner {
    	width:674px;
    	height:706px;
    	margin: 0 auto;
    	border:solid #fe2f37;
    	background-color:#fe6e73;
    }
    #area {
    	width:550px;
    	height:547px;
    	margin: 0 75px;
    }
    Clearly, there is not enough space for #area within inner.

    Why IE6 expands #inner ? Read this: Internet Explorer and the Expanding Box Problem [fixed in IE7]

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thank you koyama & cyberlogi for your help.

    koyama, when i was reading your reply and you mentioned that there was not enough space for #area within #inner i looked at my code and saw that for #area i had the margin set at '0 75px'. so i changed '75px' to 'auto' and it fixed the problem.

    once again thank you both for your help.

    thanks


  •  

    Posting Permissions

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