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 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question DIV position problem between FF and IE

    Hello,

    I'm developing a free fitness website and I'm doing it from scratch. (the URL is http://mensnaturalfitness.com/test/ ) My problem is that between browsers, IE and FF specifically, my main body DIV (which is a squeeze page for new comers) has a different vertical alignment. In FF, the main DIV is attached to the top of the page, but in IE, it is attached to the bottom of the header DIV.

    I'm sure my problem isn't uncommon.

    I apologize in advance, I'm not sure what code to post yet. I keep all my HTML and CSS seperate and use LINK tags and PHP 'Include' functions to bind it all together.

    A quick visit to my site in either browser will explain my problem. I'm trying to create a common anchor for the main DIV in both FF and IE so I can create a uniform space between the header and the body DIVs in both browsers.

    Any help is greatly appreciated.

    Thanks,
    Jared

  • #2
    me2
    me2 is offline
    New Coder
    Join Date
    Oct 2007
    Posts
    88
    Thanks
    8
    Thanked 3 Times in 3 Posts
    Hi,

    One thing is in the middle of the page there is a open script tag that is not closed properly.

    Usually to differentiate between browsers you can use
    Code:
    <![if !IE]>
    <![endif]>
    around the specifics for ie..

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'll just create specific files for the browsers themselves. I put the open script tag at the end to eliminate the javascript that would otherwise be at the top of the page and throw off the design. But good eye.

    I'm a very new coder, so how do I use the tags you suggested? The "if" statement seems kind of useless without an "else" statement. Maybe I'm not getting something here.

    Thanks for the help!
    Last edited by xlrustylx; 11-27-2008 at 06:52 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Fix the errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Between the two, always use FF as your reference for how things should work. IE is the worst browser on the planet and should never be trusted to do anything right.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by drhowarddrfine View Post
    Between the two, always use FF as your reference for how things should work. IE is the worst browser on the planet and should never be trusted to do anything right.
    May be, but don't consider this as an excuse to write sloppy code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Never is any excuse to write sloppy markup. Validate first. Test in a modern browser. Then look in clunky, incompetent IE.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello xlrustylx,
    It's not that bad, it just looks like you've cut/paste several times while editing and some things need cleaned up a bit. Like abduraooft said, validating will make a huge difference - see the links about validating in my sig below.

    Anyway, try this. I consolidated your CSS and put it in the head just for ease of quoting in this forum. I also used the full path to your images where you may not want to.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Men's Natural Fitness - Free Natural Weight Loss and Workout Program</title>
    <style type="text/css">
    /* body.css Document */
    body {
    	background:#bcbcbb url(http://mensnaturalfitness.com/test/img/bggrad.jpg) repeat-x top;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    /* header.css Document */
    #header {
    	background: url(http://mensnaturalfitness.com/test/img/hfiller.jpg) repeat-x;
    	overflow: auto;
    	width: 100%;
    	border-top: 1px solid #000;
    	border-bottom: 1px solid #000;
    }
    .h-left {
    	float:left;
    }
    /* squeezeff.css Document */
    #squeeze {
    	width:800px;
    	height:400px;
    	position:relative;
    	background:#999999;
    	margin: 0 auto;
    	border-top: none;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-left: 1px solid #000000;
    }
    </style>
    </head>
    <body>
        <div id="header">
                <img src="http://mensnaturalfitness.com/test/img/header.jpg" alt="header image" width="400" height="75" class="h-left" />	
        </div>
    <div id="squeeze">
    </div>
    </body>
    </html>
    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

  • #9
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello xlrustylx,
    It's not that bad, it just looks like you've cut/paste several times while editing and some things need cleaned up a bit. Like abduraooft said, validating will make a huge difference - see the links about validating in my sig below.

    Anyway, try this. I consolidated your CSS and put it in the head just for ease of quoting in this forum. I also used the full path to your images where you may not want to.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Men's Natural Fitness - Free Natural Weight Loss and Workout Program</title>
    <style type="text/css">
    /* body.css Document */
    body {
    	background:#bcbcbb url(http://mensnaturalfitness.com/test/img/bggrad.jpg) repeat-x top;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    /* header.css Document */
    #header {
    	background: url(http://mensnaturalfitness.com/test/img/hfiller.jpg) repeat-x;
    	overflow: auto;
    	width: 100%;
    	border-top: 1px solid #000;
    	border-bottom: 1px solid #000;
    }
    .h-left {
    	float:left;
    }
    /* squeezeff.css Document */
    #squeeze {
    	width:800px;
    	height:400px;
    	position:relative;
    	background:#999999;
    	margin: 0 auto;
    	border-top: none;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-left: 1px solid #000000;
    }
    </style>
    </head>
    <body>
        <div id="header">
                <img src="http://mensnaturalfitness.com/test/img/header.jpg" alt="header image" width="400" height="75" class="h-left" />	
        </div>
    <div id="squeeze">
    </div>
    </body>
    </html>
    Thanks! I brushed up my code (No, I didn't copy paste) and put all my <link> tags where they belong (In the <head> tag> and validated my page's HTML. Adding the "overflow:auto;" attribute to "div#header" did the trick for me.

    I have no control over the remaining 9 errors, that's goddaddy.com's free hosting crap they add to the bottom so their JS will work. I had an open <script> tag to kill GD's JS.

    Thanks for all the help,
    Jared

    PS - Can a Mod mark this post as "resolved"? Thanks
    Last edited by xlrustylx; 11-27-2008 at 05:38 PM.


  •  

    Posting Permissions

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