/    Sign up×
Community /Pin to ProfileBookmark

IE 6&7 messing with layout

Hey,

I am currently working on this site [URL=”http://www.happyandhealthy.ca”]http://www.happyandhealthy.ca[/URL].
It displays properly on all browsers except IE 6 & 7, for some reason the middle content div is being pushed down to the bottom of the page, not sure why this is happening.
I tried to attach a picture of how it renders in IE 6 & 7, not sure if it worked.

Below is the template file code i am working from:

[code=html]<?php
// Start the session
require_once(‘startsession.php’);
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Happy and Healthy – Personal Trainer</title>
<link rel=”stylesheet” type=”text/css” href=”happy.css” />
<!–[if IE]><link rel=”stylesheet” type=”text/css” href=”happyIE.css” /><![endif]–>
</head>
<body>
<div class=”border”>
<div class=”header”>
<?php require_once(‘headimg.php’); ?>
</div><!–end header–>
<!– <hr class=”headerhr” />–>

<div class=”tempnav”>
<?php require_once(‘nav.php’);?>
</div><!–end nav–>

<div class=”content”>
<div class=”contop”>
<h2>Calander</h2>
</div>

<div class=”tempconmid”>
<?php
require_once(‘logincheck.php’);
require_once(‘connectvars.php’);

?>
</div>

<div class=”conbot”>
<textarea style=”display:none” cols=”20″ rows=”5″ wrap=”hard”>
</div>
</div><!–end content–>
<!– <hr class=”headerhr” />–>

<div class=”footer”>

</div>
</div><!–end border–>
</body>
</html>[/code]

and this is the CSS code used to style it:

[CODE].conmid {
background-image: url(“conmid.png”);
background-repeat: repeat-y;
margin-left: 23px;
margin-right: auto;
margin-top: -3%;
}[/CODE]

any help would be great,

thanks.

[upl-file uuid=805285e5-05f2-4385-bba6-649a02acebf7 size=100kB]IE6.gif[/upl-file]

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@SanderDeclerckJun 05.2011 — You can't expect the browser to correctly display a page made up with crappy html...

First of all, make sure your page validates in the w3 validator: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.happyandhealthy.ca%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

When that's done, try it again, and it'll possibly look a lot better.

When it doesn't look like you want, come back here, and post it again, then I'll have a look.
Copy linkTweet thisAlerts:
@Aslan00authorJun 12.2011 — Hey SanderDeclerck,

Thanks for the reply. I ran both my php and css files through the vaildator's and made the corrections they suggested, but nothing chnaged with IE 6 & 7. Most of the errors(11) where caused by the go daddy adverts, which i cannot fix. They are not causing the break in layout.

Would really appreciate the help,

Thanks.
Copy linkTweet thisAlerts:
@cootheadJun 12.2011 — Hi there Aslan00,

the best way to treat those two dinosaurs, IE6 and IE7, is to simply serve them with plain HTML.

To achieve peace of mind, remove this code....
[color=navy]
&lt;!--[if IE]&gt;&lt;link rel="stylesheet" type="text/css" href="happyIE.css" /&gt;&lt;![endif]--&gt;
[/color]

...and use this instead...
[color=navy][color=red]
&lt;!--[if !lt IE 8]&gt;&lt;!--&gt;[/color]
&lt;link rel="stylesheet" type="text/css" href="happy.css" /&gt;[color=red]
&lt;!--&lt;![endif]--&gt;[/color]
[/color]

For complete contentment, you might even consider using...
[color=navy]
&lt;!--[if !lt IE [color=red]9[/color]]&gt;&lt;!--&gt;[/color]


Problem over. ?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@Aslan00authorJun 16.2011 — Hey coothead,

Thanks for the reply. I tried the code you suggested and there has been no change with IE, the middle section of my content still floats down to the bottom left.

Any other suggestions?

Thanks.
Copy linkTweet thisAlerts:
@cootheadJun 16.2011 — Hi there Aslan00,

did you change this...
[color=navy]
&lt;!--[[color=red]if IE[/color]]&gt;&lt;link rel="stylesheet" type="text/css" href="happyIE.css" /&gt;&lt;![endif]--&gt;
[/color]

...to this...
[color=navy]
&lt;!--[[color=red]if gte IE 8[/color]]&gt;&lt;link rel="stylesheet" type="text/css" href="happyIE.css" /&gt;&lt;![endif]--&gt;
[/color]

...or even remove it altogether.

The whole point of this...
[color=navy]
&lt;!--[if !lt IE 8]&gt;&lt;!--&gt;
&lt;link rel="stylesheet" type="text/css" href="happy.css" /&gt;
&lt;!--&lt;![endif]--&gt;
[/color]

...is to display IE6 and IE7 as plain HTML. ?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@fagdiJul 15.2011 — I had the same problem , just don't use the include or require ...

use the original php code from that file and it will work just fine.
×

Success!

Help @Aslan00 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...