...

View Full Version : DIV position problem between FF and IE



xlrustylx
11-27-2008, 06:45 AM
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

me2
11-27-2008, 06:58 AM
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

<![if !IE]>
<![endif]> around the specifics for ie..

xlrustylx
11-27-2008, 07:36 AM
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!

abduraooft
11-27-2008, 08:14 AM
Fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fmensnaturalfitness.com%2Ftest%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

drhowarddrfine
11-27-2008, 02:00 PM
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.

abduraooft
11-27-2008, 02:40 PM
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.

drhowarddrfine
11-27-2008, 03:47 PM
Never is any excuse to write sloppy markup. Validate first. Test in a modern browser. Then look in clunky, incompetent IE.

Excavator
11-27-2008, 05:32 PM
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.

<!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>

xlrustylx
11-27-2008, 06:33 PM
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.

<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum