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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Centering DIV in IE

    I'm redesigning my site using CSS, and am having issues with my float elements. They are all floating the the left side of the screen in IE6, (in firefox everything looks great). I created a centering DIV (contentContainer) that has a set width, and a margin of 0 auto, and placed everything inside of that, but that DIV is not centering.

    I think it may be a doctype issue, and I'm using iframes, but I believe I need to use a transitional doctype so my iframes validate, correct?

    Here are the links.

    Link: http://www.tincanstudios.com/redesign/

    CSS: http://www.tincanstudios.com/redesign/styles.css

    Thanks in advance, this board and its members are a great resource.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    No, HTML 4.01 permits the use of iframes. They are deprecated in XHTML 1 and will be brought back in HTML5.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Goodmorning bofa,
    In your CSS you have margin: 0 auto on the body. It's kind of hard to center something that is the full width of the browser window.
    Instead, your outer-most div - #dropShadowRepeat, should be the width of your website and then you can center that.
    Like this:
    Code:
    body{
    	background-color: #9FC5D0;
    	background-image: url(images/bg.jpg);
    	background-repeat: repeat-x;
    }
    h1 {
    	margin: 0;
    	padding: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	color: #000000;
    }
    #dropShadowRepeat{
    	background-image: url(images/dropShadowRepeat.jpg);
    	background-repeat: repeat-y;
    	width: 778px;
    	margin: 0 auto;
    	padding: 0;
    }
    
    #dropShadowNoRe
    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

  • #4
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the prompt replies.

    I tried the CSS fix you recommended Excavator, and now everything is slammed to the left, (I uploaded the CSS fix to the server so it can be viewed).

    In the future, I plan on having one of those elaborate backgrounds that extends the width of the screen, which is why I wanted a width of 100%. However, if I can get everything centered as is, that idea might take a back seat.

    So the problem still exists. The div's aren't centering in IE. What's up with that?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    How about applying a proper doctype that will put IE into standards mode, and hence adhere to standards rather than falling back to IE 5 behavior (where margin: auto; centering didn’t work)?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    That’s the one you should use.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yup, check my sig about DocTypes.
    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

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    He used a Transitional DocType because he thought he needed it to validate iframes. Right?

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Although iframes are unnecessary (having been superceded by the object tag) it has not yet been officially deprecated in HTML.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by CyanLight View Post
    He used a Transitional DocType because he thought he needed it to validate iframes. Right?
    Still, if you thoroughly study and compare his doctype and the one I proposed you might see that there’s something missing in his one.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I think IE renders in standards with HTML 4.01 Strict w/URL & Firefox not, or the other way around. I'm not sure.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Firefox renders reasonably close to the standards regardless of the Doctype. IE renders as close as it can to the standards with a complete valid doctype as the first statement. IE with an incomplet, misplaced or missing doctype will go into quirks mode. Whether you use a strict or transitional doctype affects how you access certain information about the browser in JScript in IE but doesn't affect the interpretation of the stylesheet.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    And if you put this DOCTYPE in your document:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    This tells modern browsers that you want to display your HTML 4.01 page in strict compliance with the DTD. These browsers will go into "strict" or "standards" mode and render the page in compliance with the standards.
    Yeah, URL minimization is valid &, in this case, triggers standards mode.


  •  

    Posting Permissions

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