PDA

View Full Version : elements not showing right in IE6 and IE7


enigma77
04-19-2010, 11:57 AM
Hi,
the page is here (not complete) : http://www.gradbenistvo-hamo.si/

the problem is that the grey bar should be under the orange header, but instead is showing right of the orange header.
I know it has something to do with spacing, but I couldn˙t fix it.
If I add space with enter after that orange header, the grey bar is pushed down and is actually showing right in IE6,7 but then I get too much space in other browser like Mozilla, IE8, Chrome. The grey sidebar is a fireworks html element. Hope you can help me.

Here is the code for that header:

<div id="container">
<div id="header">
<p><img src="header2.png" width="1001" height="162" border="0" align="left" /></p>
<p>&nbsp;</p>
<table border="0" cellpadding="0" cellspacing="0" width="1002">
<!-- fwtable fwsrc="animated.header.png" fwpage="Page 1" fwbase="animated.png" fwstyle="Dreamweaver" fwdocid = "2063408233" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="834" height="1" border="0" id="undefined_2" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="68" height="1" border="0" id="undefined_2" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="29" height="1" border="0" id="undefined_2" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="57" height="1" border="0" id="undefined_2" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="14" height="1" border="0" id="undefined_2" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td colspan="5"><img name="animated_r1_c1" src="images/animated_r1_c1.png" width="1002" height="5" border="0" id="animated_r1_c1" alt="" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="5" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td rowspan="3"><img name="animated_r2_c1" src="images/animated_r2_c1.png" width="834" height="18" border="0" id="animated_r2_c1" alt="" /></td>
<td rowspan="2"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('animated_r2_c2','','images/animated_r2_c2_f3.png',1);"><img name="animated_r2_c2" src="images/animated_r2_c2.png" width="68" height="16" border="0" id="animated_r2_c2" alt="" /></a></td>
<td rowspan="3"><img name="animated_r2_c3" src="images/animated_r2_c3.png" width="29" height="18" border="0" id="animated_r2_c3" alt="" /></td>
<td><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('animated_r2_c4','','images/animated_r2_c4_f2.png',1);"><img name="animated_r2_c4" src="images/animated_r2_c4.png" width="57" height="13" border="0" id="animated_r2_c4" alt="" /></a></td>
<td rowspan="3"><img name="animated_r2_c5" src="images/animated_r2_c5.png" width="14" height="18" border="0" id="animated_r2_c5" alt="" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="13" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td rowspan="2"><img name="animated_r3_c4" src="images/animated_r3_c4.png" width="57" height="5" border="0" id="animated_r3_c4" alt="" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="3" border="0" id="undefined_2" /></td>
</tr>
<tr>
<td><img name="animated_r4_c2" src="images/animated_r4_c2.png" width="68" height="2" border="0" id="animated_r4_c2" alt="" /></td>
<td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="2" border="0" id="undefined_2" /></td>
</tr>
</table>
<!-- end #header --></div>

Corrosive
04-19-2010, 01:19 PM
It looks correct to me in Firefox 3.5. Did you get it fixed?

enigma77
04-19-2010, 04:09 PM
no, the problem shows only in IE6 and IE7

Corrosive
04-19-2010, 04:36 PM
Ah, sorry. Late night last night ;) Just checked and I can see that they are broken. I can only suggest looking at a pure CSS and div based layout. That should improve cross-browser compatibility.

enigma77
04-19-2010, 09:04 PM
ok I manage to fix it, there is some white space now betwen two headers (in IE6,7) but I can live with that. The site runs kind of slow in IE6,7,8
I added some space after orange header and before grey one:

<p><img src="header2.png" width="1001" height="162" border="0" align="left" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<br />
<table border="0" cellpadding="0" cellspacing="0" width="1002">

Corrosive
04-20-2010, 07:17 AM
OK, do you see a correlation between this sentence;

The site runs kind of slow in IE6,7,8

And this one?

I added some space after orange header and before grey one:

<p><img src="header2.png" width="1001" height="162" border="0" align="left" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<br />
<table border="0" cellpadding="0" cellspacing="0" width="1002">

You are adding extra empty and redundant code to solve a layout issue caused by too much code. It works, yes, but if it were my site I'd revisit the fundamentals of web design and read a bit more before attempting my page again.

enigma77
04-20-2010, 08:32 AM
lets admit that Microsoft browsers just aren`t any good (IE7 and IE8), IE6 was OK :)
I also agree I could use a different aproach to make things run faster in those browsers

Corrosive
04-20-2010, 08:56 AM
lets admit that Microsoft browsers just aren`t any good

Oh yes, absolutely. They are slow, clunky and, like most MS products, try and do too much and therefore do everything badly! Excess code won't help the issue though.