18 replies [Last post]
pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

hello,

I need your urgent help :

I am just about to deliver a website, just to find out that it runs super slow on Internet Explorer 6 !

I 've been developing mainly with Firefox, checking every now and then with IE, and it was fine... until today. I have no idea what got wrong. True, i didn't check recently because most of the layouting was made, and i focused on dynamic data integration.
The site is developed using php, css, html and some javascript.
test site

I suspected that maybe something from the database was doing something wrong, but if you test a purely static page
test site the same happens.

IF i remove all the javascript, it does not solve it.
But if i remove the link to the css, (of course) rendering is immediate. So i assume this is a CSS problem.
anyone has an idea ?

Thank you for your prompt help !

Alexandre

PS: for your convenience, here is the whole CSS contained in the css files

/* file 1 */

html, body {
width: 100%;
height: 100%;
}

body{
background:white url("../_img/body-bckgrnd-blue.gif") top right no-repeat;
margin:0;
padding:0;
overflow:hidden;
}

#fullpage{
width:100%;
height:100%;
margin:0;
padding:0;
border-collapse:collapse;
border-spacing:4px;
}
#fullpage tr{vertical-align:top;}
#header-row{height:160px;margin:0;padding:0}
#header-row a {
	white-space:nowrap;
	font:10pt "Trebuchet MS", Arial, sans-serif;
	text-decoration:none;
	color:#000000;
	height:18px;
	margin:0;
	padding:0;
	display:block;
	background:none;
}
#header-row a.selected, #header-row a:hover{
font-weight:bold;

}
#header-left{border-top:4px solid #000000;width:180px;}
#header-right{border-top:4px solid #000000;width:200px;}
#header-mid{text-align:left;}
#menucontainer{
margin:0;
padding:0;
border-collapse: separate;
border-spacing:4px;
width:100%;
height:160px;
}
#menucontainer td{
border-top:4px solid #000000;
margin:0;
padding:0;
/*background: transparent url(../_img/transparent.gif)*/
}
#level0{width:178px;}
#level1{width:50px;}
#level2{width:195px;}
#level3{width:240px;}
#level4{width:80px;}
#level4{width:auto;

}


p,input,span,div,td,th,h1,h2,h3,h4,li,a{
font-family:"Trebuchet MS", Arial, sans-serif;
color:#000000;
}
h1{
font-size:16pt;
font-weight:normal;
margin:0;
margin-left:200px;
width:500px;
height:24px;
}
td#main-left, td#main-right {
background:transparent url(../_img/background-pixel.gif) top left repeat;
margin:0;
padding:0;
border-bottom:4px solid #4D4D4D;
width:180px;
}
td#main-right{
vertical-align:bottom;
text-align: center;

}
#main-center{
background:transparent url(../_img/transparent.gif);
padding:0 10px 0 50px;
margin:0;
border-bottom:4px solid #4D4D4D;
text-align:justify;
text-indent:0;
font-size:10pt;
color:black;
vertical-align: top;
}

#viewport{
margin:0;
padding:0px 5px;
overflow: auto;
color:black;
}
#main-center img {
border:1px solid #DDDDDD;
padding:0px;
margin:10px;
float:left;
}
#main-center a:link, #main-center a:visited{
color:#0066FF;
font-weight:bold;
text-decoration:none;
}
#main-center a:hover{
}

#main-center ul {
list-style-type:square;
}
#main-center li {
margin-bottom:2ex;
}

#footer{
width:100%;
text-align: center;
height:16px;
font-size:10px;
background:url("../_img/footer-bckgrnd.gif") top left repeat-x;
font-family:"Trebuchet MS", Arial, sans-serif;
color:#666666;
margin:0;
margin-top:10px;
}
#footer td{
	width:20%;
}
#footer a:link, #footer a:visited {background:none;text-decoration:underline;color:#666666;border:none}
#footer a:hover{text-decoration:overline;border:none}

h1{
background:white url("../_img/title-about-the-firm-eng.gif") top left no-repeat;
padding:0;
background-color:white;
margin:0 4px;
margin-left:55px;
height:36px;
}
h1 i{
display:none;
}
h2{
font-weight:normal;
font-size:12pt;
padding-bottom:5px;
	font-weight:bold;
	font-style: italic;
}

#cleaner {clear:both;height:1px;font-size:1px}
.cleaner {clear:both;height:1px;font-size:1px}
img#logo{
margin:auto;
margin-bottom:10px;
}
.submit{
	border:2px outset #CCCCCC;
	background: #CCCCCC;
	color:black;
	width:auto;
	display:block;
	float:right;
}

#search {
margin:0;
border:4px solid white;
border-top:0px dotted #DDDDDD;
font-size:10px;
background:white;
}
#search input{
float:left;
width:100px;
font-size:10px;
border:1px solid #DDDDDD;

}
#search input.submit {
width:30px;
float:right;
background-color:#CCCCCC;
border:2px outset #CCCCCC;
color:white;
font-size:10px;
}
#search input:hover,#search input:focus{
background:#EFEFEF;
}
#search input.submit:hover{
	background:#4D4D4D;
	border:2px inset #4D4D4D;
}

#news, #quote{

	width:38%;
	float:right;
	margin:0 0 20px 20px;
	padding:10px;
	border:1px solid #CCEEFF;
	font-size:9pt;
}
#quote h2, #news h2{

font-size:small;
color: #0066FF;
border-bottom-color:#CCEEFF;
border:none;
margin:0;
padding:0;
}
#quote p {
margin:0;
padding:5px;
font-style: italic;
font-size:9pt;
text-align:center;
}
#quote a{
margin:0;padding:0;
float:right;clear:right;
font-size:x-small;
color: #99DDFF;
}
td#rightend, td#main-right, td#header-right{
width:220px;
}

/* file 2 imported file 1 */
ody{
	background:white url("../_img/body-bckgrnd-red.gif") top right no-repeat;
}
h1{background: url("../_img/title-eng-news.png") bottom left no-repeat;}
#header-row a:hover, #header-row a.selected{
color:#dc0015;
font-weight:bold;
}
h2{
	border-bottom:1px solid #DDDDDD;
}
#main-center a:link, #main-center a:visited{
color: #dc0015;
text-decoration:none;
border:none;
}


#main-center a:hover{text-decoration:underline;}


#news {
background:transparent url(../_img/transparent.gif);
	width:38%;
	float:right;
	margin:0 0 20px 20px;
	padding:10px;
	border-color:#f2bab7;
	border-color:#EEEEEE;
}
#news ul {
margin:0;
padding:0;
list-style:none;
font-size:10px;
}
#news li {
padding:10px 5px;
margin:0 0 10px 0;
border-top:0px solid #f2bab7;
background:#f2bab7;
background:#FAFAFA;
}

#news a:link, #news a:visited, #news a:hover {
text-decoration:none;
border:none;
background-color:transparent;
color:black;
}
#news a:hover{
text-decoration:underline;
}
#news li.current {
	background-color:#e76f71;
	color:white;
}
#news li.current h3, #news li.current a {
	color:white;
}
 #news li.current span.headlinesdate{
 	color:#ffc9c5;
 }

#news h2{
color:#dc0015;
color:#999999;
}
#news h3, #news h3 span{
text-transform: capitalize;
font-size:12px;
color:#dc0015;
color:black;
font-weight:normal;
margin:0;
padding:0;
}
 #news h3 span{font-size:10px;margin-left:0px;}
 #news p {margin:0;padding:0;color:#dc0015;}
 
.headlinesdate{
color:#999999;
text-transform:none;
}



#footer a:link, #footer a:visited {background:none;text-decoration:underline;color:#666666;}
#footer a:hover{text-decoration:overline}

#newsdetails {
	color:#999999;
	font-size: 11px;
}

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 10 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Link us to the site, I would like to see if it is slow on my machine.

- r

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Hi

Its because you have the div with the NEWS headline as overflow auto, which you need to hack and feed overflow:visible and height:1% to IE, maybe use the * html hack.

The overflow is taking ages to load and draw, as IE tries to squeeze it all in!

I think I made a similar answer to someone else a few days ago.

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Site fine in Firefox , deadly slow in IExplorer

Well it loads super fast on my IE6.

I would delay delivering it as a finished site though as you have some issues that you ought to sort out first.

I presume that you have deliberately opted to render in quirks mode although I cannot fathom why.

When you hover over the top links in FF you get the scrolling content and those top links doing a little jig all over the place.

In IE6 the scrolling area scrolls very badly, very jerky and slow.

Whats with the viewport.js script? are you trying to play loose and fast with my browser settings, if so this is a very bad thing to do!
Is this why with a narrow window I have no scrollbars to scroll the content into view? that's really not a very clever idea and I would rethink it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Thanks to both of you. I'll reply to each post hereunder:

ClevaTreva: can you point me to that former post ?
I tried adding this below the css call in my html code:

<!--[if IE]>
<style>
#viewport{
overflow: visible;
height:1%;
}
</style>
<![endif]-->

but it does not solve the problem. Did i do what you meant?

Hugo: i agree with your comments . The thing is that here , we want the layout to take as much space as available on the screen, and have the menu visible at all time, scrolling area being only the main center zone (div#viewport).
I tried to achieve it not using table, didn't work. I found a way to fill the screen (height:100%;width:100%), but only using quirkmode.

Now, this didn't allow to have that scrollable area, so i figured out i could make up a js that calculate the available height, substract the height value of all the other elements, and assign that value by using element.style.height= output+"px"

if you know of a better way allowing xhtml with no hack, and without using frames , i'm all ears !

thank you,

Alex

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Ah

And there was me not looking at the code!

The javascript will be the problem. I did the same thing some many months ago, and the same thing happened. You can make IE give a div a scroll bar by telling it the div's height and then feed it overflow:auto, which is what I thought you had done.

And I agree with Hugo, why quirks mode? You will get VERY variable results with it.

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

ClevaTreva wrote:

The javascript will be the problem. I did the same thing some many months ago, and the same thing happened. You can make IE give a div a scroll bar by telling it the div's height and then feed it overflow:auto, which is what I thought you had done.

i tried removing all javascript, it doesn't solve the issue, plus, i do not KNOW that div's height, since i want to fill the user's screen.
here , you can see my test page, with no javascript (and no scrollbar Crying )

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Hi

I looked at the code. HTML Tidy was NOT happy:

line 370 column 1 - Warning: <table> attribute "summary" lacks value
line 378 column 7 - Warning: <table> attribute "summary" lacks value
line 379 column 9 - Warning: missing <tr>
line 389 column 7 - Warning: discarding unexpected </table>
line 391 column 24 - Warning: discarding unexpected </td>
line 396 column 5 - Warning: <form> attribute "action" lacks value
line 420 column 30 - Warning: missing </a> before <h3>
line 420 column 156 - Warning: inserting implicit <a>
line 420 column 205 - Warning: discarding unexpected </a>
line 420 column 270 - Warning: missing </a> before <h3>
line 420 column 382 - Warning: inserting implicit <a>
line 420 column 417 - Warning: discarding unexpected </a>
line 420 column 482 - Warning: missing </a> before <h3>
line 420 column 589 - Warning: inserting implicit <a>
line 420 column 619 - Warning: discarding unexpected </a>
line 420 column 684 - Warning: missing </a> before <h3>
line 420 column 850 - Warning: inserting implicit <a>
line 420 column 940 - Warning: discarding unexpected </a>
line 420 column 1005 - Warning: missing </a> before <h3>
line 420 column 1124 - Warning: inserting implicit <a>
line 420 column 1167 - Warning: discarding unexpected </a>
line 420 column 1232 - Warning: missing </a> before <h3>
line 420 column 1368 - Warning: inserting implicit <a>
line 420 column 1428 - Warning: discarding unexpected </a>
line 421 column 9 - Warning: <div> Anchor "cleaner" already defined
line 427 column 7 - Warning: <img> attribute "alt" lacks value
line 437 column 7 - Warning: <div> Anchor "cleaner" already defined
line 370 column 1 - Warning: missing </table>
Info: Doctype given is "-//W3C//DTD HTML 4.01 Transitional//EN"
Info: Document content looks like HTML 4.01 Transitional
28 warnings, 0 errors were found!

However, given that I know next to nothing (or at least very little) about tables, and who on this forum would admit to such, I can only confirm that there are indeed real speed issues!

Trevor

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 10 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Site fine in Firefox , deadly slow in IExplorer

It loaded fine on my machine, but I also am confused about the use of <!-- quirkmode -->. :? There must be a better way because in 'quirksmode' IE can be unpredictable not always giving you the result that you want.

- r

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Hi

I'm wondering what type of connection those who see the slowness use. I've got 1MB Broadband. Is my IE reloading things all the time?

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

ClevaTreva wrote:
Hi

I'm wondering what type of connection those who see the slowness use. I've got 1MB Broadband. Is my IE reloading things all the time?

maybe i should have used a more precise term: it's not the loading that is slow, it is the rendering.

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Hi

Well, I agree, as I scroll around the page, it has a problem. BUT, if I go offline and therefore IE cannot use new content, all is fine. So, IE must be trying to constantly update the page as I move around it. Indeed, watching my connection activity monitor, that seems to be the case.

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Hello ClevaTreva,

i tried the same , but even when disconnected, IE is acting slow.
IF i scroll the content for example, the CPI goes 100% !!
In my case, it's the cpu who's suffering...

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Friends,

i just can't believe it:

if i remove this line of css:

background:transparent url("../_img/transparent.gif");

then IE works fine.

if i put it back, IE crawls.

that image is a 2X2px image, containing a transparent dot and a plain white pixel pattern.

if someone has a rational explanation, i'm interested...

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Site fine in Firefox , deadly slow in IExplorer

You try tiling a transparent 2x2 pixel image 10thousand times without slowing down :roll:

Verschwindende wrote:
  • CSS doesn't make pies

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

yes i assumed it was fine (heck a computer is first and foremost a calculating machine Smile ) since firefox didn't complain.

and since i always rely on firefox these days ... Smile

i just replaced the small transparency gif with a large one, and it's fine now...

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Hi

I did notice this error (has 2 slashes in next to each other at the end of your html:

http://www.foodlawconsultants.com/temp//_img/logo-dark.gif

Trevor

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 47 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

Site fine in Firefox , deadly slow in IExplorer

Hello Clever//Trevor,

thank you very much for letting me know : i've corrected it !

thanks,

alex

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline