Site works in every browser except IE 7 and before…

[nchipping]

So I’m really not quite sure what’s going on here, and honestly I feel a little embarrassed to be posting this, but for some reason, IE7 (and I’m guessing before that) won’t render my website correctly. I have tested it in Firefox, Opera, Chrome, Safari, and IE8, and they all work great.

The site is: http://www.deepfrogdesign.com

I have most everything relatively positioned, with either floated or absolutely positioned elements in them, but it’s not quite right. Any ideas? Please help. Here’s my stylesheet so you can see what’s going on when you go to the pages:

Code:

/*GENERAL STUFF*/

* {margin:0px; padding:0px;}

body {background:#FFF;}

h1,h2,h3,h4,h5,h6,p {font-family:Arial, Helvetica, sans-serif; margin:5px 25px 25px; color:#333}

p {font-size:14px;}

h1 {color:#87AE4A;}

h2 {color:#4e8fcc; font-size:18px; margin:5px 25px 15px;}

img {border:none;}

ul {list-style:none; font-family:Arial, Helvetica, sans-serif;}

a {color:#FFF; text-decoration:none;}

/*MAIN STYLING*/

#top {background:url(images/top-bg.png) repeat-x; height:554px; margin:0px auto; position:relative;}

#container {width:990px; margin:0px auto; position:relative;}

#floated_container {width:990px; margin:0px auto; float:left; position:relative;}

#header {width:990px; height:142px; margin:0px auto; position:relative;}

#site_name {background-image:url(images/logo_and_deepfrog.png); background-position:-149px -7px; width:352px; height:62px; display:block; position:absolute; left:220px; top:46px;}

#logo {background-image:url(images/logo_and_deepfrog.png); background-position:0px -7px; width:146px; height:119px; display:block; position:absolute; left:70px; top:21px;}

#nav {position:absolute; right:256px; top:138px; z-index:999;}
#nav ul {position:relative; left:185px;}
#nav ul li {float:left; margin:0px 7px;}
#nav li a {font-size:14px;}
#nav li a:hover {color:#CCC;}

#middle {width:990px; height:388px; display:block; background:#FFF; margin:0px auto; position:relative;}

#display {background:url(images/showcase-area.png) no-repeat; display:block; width:846px; height:530px; position:relative; top:4px;}
img#front_page {position:absolute; right:15px; top:85px;}
h1.display, p.display {position:relative; top:56px; left:30px; width:236px; color:#333;}
p.display {font-size:16px;}
img#learn_more {position:relative; left:48px; top:40px;}

#bottom_display {background:url(images/bottom-display.png) no-repeat; display:block; width:844px; height:362px; position:relative; top:30px; z-index:99; padding:25px;}
.left {float:left; width:269px}
.left p {float:left; width:138px; height:85px;}
.learn_more_information {position:relative; bottom:0px; left:15px;}
img.bottom_display {float:left; position:relative; bottom:-35px; left:-10px;}

#bottom {background:url(images/bottom-bg.png) repeat-x; height:334px; display:block; position:relative;}

#footer {width:300px; height:42px; position:relative; left:30px; margin:0px auto; z-index:99;}
#footer ul {top:248px;position:absolute;}
#footer ul li {float:left; margin:0px 5px; font-size:12px;}
#footer p {position:absolute; color:#FFF; font-size:14px;}
p.site_name {top:258px; left:21px; }
p.site_number {top:275px; left:62px; }

#main {position:relative; left:84px; margin:0px auto;}

#main_top {background:url(images/main_top.png) no-repeat; display:block; height:61px; position:relative; margin:0px auto; z-index:90;}

#main_middle {background:url(images/main_middle.png) repeat-y; position:relative; float:left; margin:0px auto; z-index:99;}

#main_bottom {background:url(images/main_bottom.png) no-repeat; display:block; height:134px; position:relative; left:-4px; margin:0px auto; z-index:99;}

/*************************************************************************************************/
/*******SPECIFICS FOR THE PORTFOLIO PAGE***************/
/*************************************************************************************************/

img.folio {position:relative; float:right; right:40px; top:-50px;}

#portfolio {width:840px; padding:0px 30px;}
#portfolio h2 {margin:10px 25px 0px;}
#portfolio p {float:left; width:235px; margin:0px 25px 25px;}
#portfolio a {color:#999;}

.client {position:relative;height:460px;}

a.learn_more {position:absolute; bottom:65px; left:0px;}

/*************************************************************************************************/
/**********END OF PORTFOLIO PAGE STUFF****************/
/*************************************************************************************************/

/*************************************************************************************************/
/**********SPECIFICS FOR THE SERVICES PAGE****************/
/*************************************************************************************************/

#services {width:840px; padding:0px 30px;}
#services h2 {margin:10px 25px 0px 0px; width:250px; position:relative; left:104px;}
#services p {float:left; width:250px; margin:10px 25px 25px;}

img.left_services {float:left; margin:10px; position:relative; left:14px;}
.services_left {float:left;}
.services_right {float:left; position:relative; top:60px;}

/*************************************************************************************************/
/**********END OF SERVICES PAGE STUFF****************/
/*************************************************************************************************/

/*************************************************************************************************/
/**********SPECIFICS FOR THE ABOUT PAGE****************/
/*************************************************************************************************/

#about {width:840px; padding:0px 30px;}
#about h2 {margin:10px 25px 0px; width:350px;}
#about p {float:left; width:350px; margin:10px 25px 25px;}

#about_right {float:left; position:relative; right:-50px; top:-80px;}
#about_right h3 {margin:25px 25px 0px 25px;}

img.about_left {float:left; width:200px;}

/*************************************************************************************************/
/**********END OF SERVICES ABOUT STUFF****************/
/*************************************************************************************************/

/*************************************************************************************************/
/*******SPECIFICS FOR THE CONTACT PAGE***************/
/*************************************************************************************************/

#contact {width:840px; padding:0px 30px;}
#contact h2 {margin:10px 25px 0px;}
#contact p {float:left; width:235px; margin:0px 25px 25px;}

#contact form {padding:25px; float:left;}

#contact_right {position:absolute; top:180px; left:480px;}
#contact_right h3 {margin:25px 25px 0px 25px;}

/*************************************************************************************************/
/**********END OF CONTACT PAGE STUFF****************/
/*************************************************************************************************/

/*OTHER CLASSES*/

.clear {clear:both;}

.success {background-image:url(images/success.png); background-repeat:no-repeat; background-position:5px; width:80%; margin:15px 25px; border:1px ridge #333; background-color:#9C3; padding:5px 5px 5px 30px;}

.error {background-image:url(images/error.png); background-repeat:no-repeat; background-position:5px; background-color:#F00; font-size:13px; color:#FFF; margin:2px; margin: 5px; padding:5px 5px 5px 30px;}

.errors {border:solid 1px #000; background-color:#F00; color:#FFF; width:80%; margin:15px 25px; padding:5px 5px 5px 30px;}

.white {color:#FFF;}

span.required {width:80%; background:#CCC; color:#333; margin:25px; padding:12px;}

[aspiringWebbie]

I may have over looked it, but you have styling for a footer div that is not in your markup.

If you are trying to extend the footer the entire width of the browser – I would recommend not adding a width to it (this will allow it to be the entire width of the browser) and place the footer div outside of the container div
Then you can add another div to wrap around the footer elements (i.e: #footerContent"), set the width (i.e : same as your container) and set to margin: {0 auto;}

If you wish for the footer to be only the width of the container – make a footer div and place it inside the container div and set the width of the footer div to your container’s width.

Hope this helps.

[nchipping]

The ‘#footer’ div is in my markup, within the ‘#bottom’ div. Here’s the code for my home page, so you can see how it correlates:

Code:

EDIT ‘Home’ Page

• home
• |
• about
• |
• portfolio
• |
• services
• |
• contact

HTML5 Website
Featured site:

HTML5 websites are said to be the future, by many. Along with Javascript and CSS3, new websites are going to be promising. fiftyfilms.com is one of those sites, that we, at DEEPFROG DESIGN, recently coded using HTML5, and the jQuery library.

Why DEEPFROG DESIGN?

In the Works…

Project in the works? We can help. Some developers aren’t able to do what they promise – we will.

Bright Ideas?

If you’ve got a good idea, we can turn it into a website, or web application. PHP and MySQL are just part of our skills.

Valid CSS/XHTML

We code valid XHTML, and CSS. That means your site will load faster, and works in all browsers, just to name a few…

• home
• |
• about
• |
• portfolio
• |
• services
• |
• contact

© 2010 DEEPFROG DESIGN

801.244.9524

Any ideas? I could really use some help :)

[aspiringWebbie]

ok – it is there – I did not see it off to the right.

I do no notice that in your footer style – you have margin: 0px auto – try removing the px after the 0

I do see that you have a .clear class at the end of the container – you may want to try and add clear: both to the footer styling

What exactly are you trying to accomplish?

[aspiringWebbie]

Ok – I am still new to this (can you tell by my SN :roll: ) – but I am trying to help you the best best way that I can,

Looking at your site in IE 6 – the content is scattered all over the page. I do notice that you have some Floated elements that also include a margin in the same direction. In IE 6 – remember this causes what is known as the "Double Margin Bug" so what may be expecting to be 10px margin is now 20px margin. I also notice that you have elements that are both floated and relative positioned, I may be wrong, but this may not be necessary (?) Also – in IE 6 – transparent png’s are ignored – so your transparent urls, show a white background in IE 6

In IE 7 – everything is fine except the main content is shifted down and partially underneath your background

Possible fixes:

*Remove the margins on the floated elements so it eliminates the Double Margin Bug. (If an element is floated left – remove the left margin). If necessary – try adding display:inline and this should help.

*In IE 6 & 7 – the bottom margin is ignored. I may have overlooked it – but remove any bottom margins on child elements – and apply bottom padding to their parent containers.

* You may want to include overflow: hidden to your parent containers. If a parent container has multiple floats – it can affect your layout. To be safe add the overflow: hidden

*for the transparent png issue – one of the best and easiest fixes can be found here:
http://www.dillerdesign.com/experiment/DD_belatedPNG/

* To be able to test your sites in multiple IE browsers – google IE Tester

I hope some of these thoughts put you in the right direction…

[Author]

Posts