# My website is not displaying properly in IE 6 and IE7



## sunumariam (Feb 27, 2010)

My website is http://plantspages.com.
This website I created using a free css template and modifying it to my requirements. 
I used dreamweaver MX for doing that and i previewed the pages in Firefox. Only after uploading it to my server I tested with IE (mine is IE6). It is not displaying things properly.All tumbled and with spaces in between.

I searched and found that, first I should validate at w3.org and I did it. There were some errors and corrected them. Now it is both css and xhtml validated.

But still the problem persists. Now I tested with IE7 and IE8 at IE NetRenderer. In IE7 there is a small problem but overall it is OK and in IE8 it is perfectly OK.

Tell me, what I should I do? Please help me..

I posted about this in digital point forum but didn't got a solution. I am really stuck!


----------



## Fyzbo (Feb 6, 2002)

Most of your problems seem to revolve around the box model. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

I would fix your problems in IE7 and ignore IE6 until you see how many users you have using it. IE6 is dead and major websites are phasing out support for it, including all Google sites. Microsoft even recommends no one use IE6, it might not be worth worrying about.

You could try Dean Edwards IE7 javascript for a quick fix.
http://code.google.com/p/ie7-js/
It attempts to correct IE6's rendering problems through the use of javascript.


----------



## tomdkat (May 6, 2006)

Fyzbo said:


> http://code.google.com/p/ie7-js/[/url]
> It attempts to correct IE6's rendering problems through the use of javascript.


:up:

Peace...


----------



## sunumariam (Feb 27, 2010)

I used the script, but the problem persisted. Then i tried another option - debugging for floats from here 
http://www.positioniseverything.net/explorer/doubled-margin.html

Now it is slightly better than before. I am searching for better solutions.

I am attaching images of my website in IE6 before and after the debugging.


----------



## Fyzbo (Feb 6, 2002)

It looks good in IE8. If you need to have it look correct in IE6 you will probably need to an an IE only stylesheet. Create a stylesheet caled ie6.css or something similar and add it to the top inside conditional tags.



Make sure it is after your main stylesheet. Override any styles to correspond with IE's width setup instead of the box model widths. That should correct your problems. Debugging styles for IE6 is tedious so good luck. Also pay attention to the white-space bug in IE.


----------



## sunumariam (Feb 27, 2010)

oops! I am not very good at coding. Now what shall i do???


----------



## lordsmurf (Apr 23, 2009)

www.ie6nomore.com --- forget about IE. Users should upgrade.

Even Google and Yahoo are discontinuing all IE6 support this spring, due to the unsafe nature of thie *DECADE OLD BROWSER*.

Seriously *TEN YEARS OLD* ---- IE6 is closer to a stone tablet than it is to IE8, Firefox, Chrome, K-Meleon, Safari, Opera, etc


----------



## sunumariam (Feb 27, 2010)

Still I am stuck.. i haven't made any progress in the web page's display in IE6 and 7!


----------



## tomdkat (May 6, 2006)

I would add a 1px border to the "plantspages_search" DIV to see if it's wide enough for IE7 to display the button where you want.

That should be a good starting point for you. 

EDIT: How do the attached screenshots look to you? I made these changes to create those shots:

HTML file:

```
<link href="plantspages_style.css" rel="stylesheet" type="text/css" />
[b][color=red]<!--[if lte IE 7]>
<link href="plantspages_style-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->[/color][/b]
```
plantspages_style-ie.css:

```
#plantspages_search {
	width: 350px;
	margin: 4px 8px 0 0;
}
```
Hope that helps! 
Peace...


----------



## sunumariam (Feb 27, 2010)

Thank you very much for the help .. Now it is rendering fine in IE7. In IE6 it is still causing some minor trouble. The search button is ok there but the top menu not coming out right.

But overall it is very much better than the initial stage..Thanks for all suggestions.


----------



## tomdkat (May 6, 2006)

Again, turn on a border for that DIV to see how it's laying out. Then, you can make test adjustments in the "ie" CSS file I created above to see what is needed to get IE6 to behave. Once you have those changes identified, we can go through how to deal with IE6 separately from IE7.

EDIT: Ok, I've found the problem and the solution for that, and the position of the "Search" button is much simpler than I had originally thought AND won't require any conditional CSS or anything. 

Post an update of what you tried and what your results were and I'll post what I found.  For now, attached is a screenshot in IE6. With this change, the conditional CSS file I mentioned above is NOT needed and it's not needed for either this issue or the search button placement issue (which is a GOOD thing! ).

Peace...


----------



## sunumariam (Feb 27, 2010)

Hi _tomdkat _, I did somemore debugging.. added the following codes in the main css style sheet. ( I got some help)


```
#plantspages_logo{display:inline;}
```


```
#plantspages_menu ul{margin-top:1em;}
```
Now my top menu and logo are rendering correctly. Just as the picture you got..

Now some very very minor appearance issue that's all. Thanks once again..I was stuck and it is you who really pushed me forward.


----------



## tomdkat (May 6, 2006)

sunumariam said:


> Hi _tomdkat _, I did somemore debugging.. added the following codes in the main css style sheet. ( I got some help)
> 
> 
> ```
> ...


Great! Glad you came up with a solution. Here is the one I discovered, which is a bit simpler (I think):


```
#plantspages_menu {
	float: right;
	height: 41px;
[b][color=red]	width: auto;[/color][/b]
	margin: 60px 0 0 0;
	padding: 0;
	display: inline;
}

#plantspages_search {
	float: right;
[b][color=red]	width: auto;[/color][/b]
	height: 30px;
	margin: 4px 26px 0 0;
	padding: 5px 0 0 0;
	display: inline;
}
```
Making the width of the above DIVs "auto" fixes both the "Search" button issue in IE6/IE7 *and* the navigation menu placement problem in IE6 *without* any conditional comments or IE-centric CSS files. With the width changes above, the "plantspages_style-is.css" file is NOT needed (which is a GOOD thing).

Experiment with these changes (and yours) and see which ones work out best for you.

Good luck!

Peace...


----------

