PDA

View Full Version : ie 5.5 and ie 6 problems



BigDDunc
Jan 23rd, 2009, 10:21 PM
Hi there,

I've designed a site for my dad at:
www.boomboomdesign.co.uk/client/eclipse/welcome.html

It appears fine in IE 7 and Firefox, however it doesn't appear correctly in IE 5.5 and 6 and I cannot find out what is wrong with it.

I realise some of the CSS is untidy as I'm still in the design stage where I write it messy then clean it up accordingly, however I can't get it working correctly in IE 6.

Any help is very much appreciated.

Thanks,
D

jerry62704
Jan 23rd, 2009, 10:44 PM
The left is 780 + 20 margin-left, but the ruler in iedeveloptools show a margin to the left of that. It shows (at my current width screen) it ends at 314px.

The H2 in the other side (content) starts at 264 and goes to 891. So it can't fit in next to the floated div.

The problem is IE allows things to go outside their container (the H2 for example goes on both sides of the container div). All you can do is check the true width of things and make sure they fit inside of other things.

BigDDunc
Jan 23rd, 2009, 10:57 PM
Thanks very much for your reply it helps a lot, however because I'm running vista 64bit I cannot get a browser running IE6 and get the dev toolbar running myself.

Can you suggest alterations to the code I'm using to fix the obvious problems?

As much as I love IE 8 for having a compatibility mode, I wish IE6 would run on vista 64bit...

abduraooft
Jan 24th, 2009, 09:47 AM
.left {
width:190px;
background-color:#fff;
/*left: 0;*/
margin:0 15px 10px;
float: left;
}
.content {
background-color:#fff;
/*right: 0;*/
margin-left:220px; /* > 190+10*/
/*width: 528px;*/
padding:5px;
/*float: right;*/
color: #7c7c7c;
}


Ps: since you have

* {
border:0;
margin:0;
padding:0;
} in your CSS, no need to add the same properties(with a value 0) to any of your other selectors, unless you altered it somewhere and need to reset it again.

BigDDunc
Jan 24th, 2009, 12:34 PM
Thanks for the help but that didn't appear to resolve the issue as it still doesn't look like it should as you can see:

http://www.boomboomdesign.co.uk/client/eclipse/welcome.html

Anymore suggestions? Thanks very much for your help

abduraooft
Jan 24th, 2009, 01:04 PM
.content {
background-color:#fff;
margin-left:220px;
padding:5px;
color: #7c7c7c;
}
The above is what you actually required for your .content

BigDDunc
Jan 24th, 2009, 01:59 PM
Magic, thanks.

Only 2 other problems now are the grey bar at the top is way bigger in IE6 then it should be, and the orange and red boxes are touching at the bottom.

Again any ideas?

Thanks

abduraooft
Jan 24th, 2009, 02:17 PM
the grey bar at the top is way bigger in IE6 then it should be
I'd say, this as a side effect your divitis (http://csscreator.com/?q=divitis) :)
Replace your

<div class="headerline">
<p>&nbsp;</p>
</div> woth

<hr class="headerline"/> and change its CSS like

.headerline {
height:6px;
border:0;
background-color:silver;
color:silver;
margin-bottom:5px;
}

and the orange and red boxes are touching at the bottom.
Try the following

.curvedboxG
{
margin-left:25px;
color: white;
width: 224px;
height: 219px;
background: #7a7a7a url(greybg.gif) repeat-x center bottom;
float: left;
font-weight:500;
}

.curvedboxO
{
margin-left:25px;
color: white;
width: 224px;
height: 219px;
background: #7a7a7a url(orangebg.gif) repeat-x center bottom;
float: left;
}

.curvedboxR
{
margin-left:25px;
color: white;
width: 224px;
height: 219px;
background: #7a7a7a url(redbg.gif) repeat-x center bottom;
float: left;
}

InfinityBen
Jan 24th, 2009, 10:18 PM
I just found this program for testing your site with IE 5.5 and later. Check it out I think its pretty neat. by the way, my site looks like crap in 5.5 and 6 too haha... Oh well I hope most people are 7 or later...


http://www.my-debugbar.com/wiki/IETester/HomePage

:)

BigDDunc
Jan 25th, 2009, 12:17 PM
Abduraooft you're a legend.

InfinityBen, just downloaded it and it works a charm thanks.

For the record...
2008 IE7 IE6 Chrome Fx Moz S O
December 26.1% 19.6% 3.6% 44.4% 2.7% 2.4%
November 26.6% 20.0% 3.1% 44.2% 2.7% 2.3%
October 26.9% 20.2% 3.0% 44.0% 2.8% 2.2%
September 26.3% 22.3% 3.1% 42.6% 2.7% 2.0%

http://www.w3schools.com/browsers/browsers_stats.asp

Unfortunately still a significant amount of people use IE 6 :(

Philip M
Jan 25th, 2009, 01:31 PM
Unfortunately still a significant amount of people use IE 6 :(



I use IE6 simply because a good many of my customers still use it; they are typically middle-aged to elderly gentlemen, not techies, and see no reason to change unless/until they upgrade their computers. I doubt if they have heard of Firefox, still less Opera......

sunshine_4_jt
Jan 28th, 2009, 10:32 PM
Hi everyone. I am very much a newbie to creating websites, but I took it upon myself to make one for my Church. www.coolspringbaptist.com (http://www.coolspringbaptist.com) I'm not trying to highjack this thread, but some of the same issues apply for my website as it did with BidDdunk with IE 6 and below. My homepage and some of my other pages are overlapping layers. I created the website in Frontpage, but I do know a little about editing code... very little. Here are the IE 6 and IE 7 shots to compare.
http://i11.photobucket.com/albums/a152/sunshine_4_jt/ie6.pnghttp://i11.photobucket.com/albums/a152/sunshine_4_jt/ie7.png

If anyone has any ideas on how to fix this I would greatly appreciate it!

Fisher
Jan 29th, 2009, 01:37 AM
Sunshine_4, I think the problem is this div:

<div id="header_right" style="width: 200px; height: 232px;"><p class="welcome" style="text-align: center;">&nbsp;</p></div>

Don't know what it's supposed to do, but when I cut it out everything lines up the way it should in IE 6.

demtron
Jan 29th, 2009, 05:47 AM
Your first link produces a 404, so I can't help with it any more.

I think you should strongly consider running your site through a validation checker such as http://validator.w3.org/. I did this for your church site and 54 markup validation errors. A number of them are closing tag mismatches, which generally will foul up a page layout.

Good luck!

sunshine_4_jt
Jan 29th, 2009, 09:46 PM
Thank you so much for looking into it. I'll try the code validator and see if that helps!

sunshine_4_jt
Jan 30th, 2009, 04:57 PM
Fisher - Thank you for letting me know about that extra snippet of code from my home page! I took it out and it fixed that page perfect! However on my Prayer page, if I take that same code out the page gets all wacky. I guess the answer there is not so simple. I was wondering if you might have a look at the code from this page and see if anything stands out that could be messing it up? I ran the validation on the site and whoa, I've got a lot of errors to fix. All my other pages seem to be okay.

http://www.coolspringbaptist.com/Prayer.html

Thanks in advance for any help!

jerry62704
Jan 30th, 2009, 05:41 PM
I just found this program for testing your site with IE 5.5 and later. Check it out I think its pretty neat. by the way, my site looks like crap in 5.5 and 6 too haha... Oh well I hope most people are 7 or later...


http://www.my-debugbar.com/wiki/IETester/HomePage

:)

Depending on who you ask, I see 19, 24 and 27% still use IE6 as of December '08.
W3School (http://www.w3schools.com/browsers/browsers_stats.asp) 19.6%
BrowserNews (http://www.upsdell.com/BrowserNews/stat.htm) 22%
W3Counter (http://www.w3counter.com/globalstats.php) 27.26%

Fisher
Jan 31st, 2009, 02:36 PM
The problem is that you have absolute positioning except on the elements that are on the left side.

Change these two blocks:

<div id="navcontainer" style="position: absolute; width: 222px; height: 150px; z-index: 6; left: 34px; top: 335px;">
<h4><font color="#654040"><span class="menu_first_letter">Navigation</span></font></h4>
<ul id="navlist">
<li id="active"><font face="Times New Roman"><font color="#006699"><a id="current" href="index.html"><font size="4" color="#6B383D">Home</font></a></font><a href="Prayer.html"><font size="4" color="#006699">In</font><font size="4" color="#006699"> Need of Prayer</font></a><a href="Youth%20&%20Children.html"><font size="4" color="#654040">Youth &amp; Children</font></a><a href="Calendar.html"><font color="#654040"><font size="4">Church</font><font size="4"> Calendar</font></font></a><a href="photos.html"><font size="4" color="#654040">Photo</font><font size="4" color="#654040"> Gallery</font><font size="4"> </font></a></font></li>
</ul>
</div> (Note that your <h4> is now inside the navcontainer div).

Then put the form in a div and apply absolute positioning too:

<div id="contact" style="position: absolute; width: 222px; height: 150px; z-index: 6; left: 34px; top: 650px;">
<h4>Contact us </h4>
<form id="form2" method="post" class="contact_us" action="mailto:[email protected]">
<p>
<label>Name
<input type="text" class="fields_contact_us" name="textfield" />
E-mail
<input type="text" class="fields_contact_us" name="textfield2" />
Your message:
<textarea name="textarea" cols rows></textarea>
<input type="submit" class="submit_button_contact" name="Submit3" value="Submit" />
</label>
</p>
</form>
<h4><font size="2">or email Pastor Kiker: </font><a href="mailto:[email protected]"><font size="2">[email protected]</font></a> </h4>
</div>

You still have a lot of validation errors, but it works at least.

BigDDunc
Feb 4th, 2009, 10:16 PM
Back to my original site...

One page slightly changes it's widths for some reason when there is more text in the content then the others.

E.g. the "International" page shifts slightly compared to the other pages present on the left sub menu.

Normal pages
http://www.boomboomdesign.co.uk/client/eclipse/bsf.html
http://www.boomboomdesign.co.uk/client/eclipse/strategic.html
http://www.boomboomdesign.co.uk/client/eclipse/cpd.html

Shifted page
http://www.boomboomdesign.co.uk/client/eclipse/international.html

This is most obvious when using the left hand sub menu to navigate through the other pages compared to the International page. The only reason I can see why this is happening is because of the length of the content, but I can't see how I can fix that?

Thanks,
Duncan