What a PITA!

I have people that must view my page on IE because of work constraints. I have problems where IE is blowing up some of the lines to insane sizes. I am trying to research to problem and do something to get past it, but it twarts me.

I know that IE isn't compliant with the web standards. Believe me I know. I am looking for ways to get around it. I have found some things on the web but they aren't helpful.

Anyone have any thoughts that could help me?

And why the hell won't IE show pngs?

--
Eleipher, The Warlock Extraordinaire
The New Beginning
Thorium Brother Hood



Guild Webmaster

Like...not at all?!?! I know IE's PNG support has always been shady, but it typically at least shows it, just not correctly. I'm pretty sure that the IE7 at least does PNGs correctly (is does for me, anyway).

I'll see what I can dig up on your layout. Is this messing up in both IE6 and 7. If it's only IE6, tell them to upgrade or quit crying

--
It's all in the reflexes.

OMG, I have posted pages on the stupidity of using IE for anything at all. Trust me, if I have I had any control at all, we would all be firefox users. The problem seems to be that, among others, the astrophysicist's work PCs are out of date. At a @#$&ing high tech lab, they are using IE6! God how I want to hack them.

Yeah they aren't showing up at all. I'll just convert then to gifs. Don't waste any time on it.

The biggest problem I am having is that IE is not displaying certain table rows, it is tiling a 14px img in a 14px wide cell, or it is blowing up 2px high images to 800px. It is so insane.

I will keep playing with it, but I was wondering if anyone had any information off the top of their head.

--
Eleipher, The Warlock Extraordinaire
The New Beginning
Thorium Brother Hood



Guild Webmaster

I use IE6, and quite frankly... standards or not, IE produces the future of W3C. I've been a browser-based application designer for 9 years. Firefox doesn't have the power in programming that IE6 does, which is why from a B-to-B standpoint, you can't give up IE. That said, IE is also far more flexible with its coding constraints, which is both a curse and a blessing. More a curse though as it causes industry-wide incompatibilities as people get used to coding something only to find that it isn't supported in other browsers... that and it also as a result can be inconsistent with its behavior.

Anyway, I digress...
Firefox has some serious weaknesses of its own, but at least its almost rock solid in its consistancy. Your page is working in IE6 (I have my business reasons for not switching to IE7) however, you need to fix the background-repeat styles on your Table Backgrounds, because Firefox renders Cell border spacing differently than IE, thus you can't rely on merely setting the width.

I honestly can say that I do not have enough experience to disagree, but I am having some serious problems with it.



The problems are with the way that IE is rendering the table.
1- The left side is breaking up the table
2- The top row is not being displayed
3- On the right side of the table, there is extra black

Here it is in Firefox:


Here is the code:


<table id="Table_Search" class="Standard">
<col width=14>
<col width=300>
<col width=300>
<col width=300>
<col width=300>
<col width=14>
<tr style="height:28;">
<td style="background-image:url('/settings/tnb/files/TopLeftSide2.gif');background-repeat:no-repeat;">

</td>
<td colspan=4 style="background-image:url('/settings/tnb/files/TopSide.gif');">

</td>
<td style="background-image:url('/settings/tnb/files/TopRightSide2.gif');background-repeat:no-repeat;">

</td>
</tr>
<tr>
<td style="background-image:url('/settings/tnb/files/LeftSide.gif');">

</td>
<td class="BlackBG">
<form name="sa" action="http://wow.allakhazam.com/search.html" method="get" style="margin-bottom:0;margin-top:0;margin-right:0;margin-left:0;">
<img src="/settings/tnb/files/blank.gif" width=20px height=28px alt=""><img src="/settings/tnb/files/Alla.gif" alt="Search Allakhazam's" style="width: 110px;height: 32px; vertical-align: middle;">
<input type="text" name="q" style="border: 1px solid black; width: 100px;"/>
<input type="submit" value="Go"/></form>
</td>
<td class="BlackBG">
<form name="stb" action="http://www.thotbott.com/?s=" method="get" style="margin-bottom:2;margin-top:0;margin-right:0;margin-left:0;">
<img src="/settings/tnb/files/blank.gif" style="width:30px;height:28px;" alt=""><img src="/settings/tnb/files/Thottbot.jpg" alt="Search Thottbot" style="width: 100px;height: 28px; vertical-align: middle;">
<input type=text name="s" style="border: 1px solid black; width: 100px;">
<input type=submit value="Go"/></form>
</td>
<td class="BlackBG">
<form name="swh" action="http://www.wowhead.com" method="get" style="margin-bottom:2;margin-top:0;margin-right:0;margin-left:0;">
<img src="/settings/tnb/files/blank.gif" style="width:47px;height:28px;" alt=""><img src="/settings/tnb/files/WowHead.gif" alt="Search Wow Head" style="width: 83px;height: 41px; vertical-align: middle;">
<input type=text name="search" style="border: 1px solid black; width: 100px;">
<input type=submit value="Go"/></form>
</td>
<td class="BlackBG">
<form name="swh" action="http://www.wowwiki.com/Special:Search?ns0=1&search=" method="get" style="margin-bottom:2;margin-top:0;margin-right:0;margin-left:0;">
<img src="/settings/tnb/files/Wiki.gif" alt="Search Wowwiki" style="width: 130px;height: 29px; vertical-align: middle;">
<input type=text name="search" style="border: 1px solid black; width: 100px;">
<input type=submit value="Go"/></form>
</td>
<td style="background-image:url('/settings/tnb/files/RightSide.gif');">

</td>
</tr>
<tr style="height:38;">
<td style="background-image:url('/settings/tnb/files/BottomLeftSide.gif');background-repeat:no-repeat;">

</td>
<td colspan=4 style="background-image:url('/settings/tnb/files/BottomSide.gif');">

</td>
<td style="background-image:url('/settings/tnb/files/BottomRightSide.gif');background-repeat:no-repeat;">

</td>
</tr>
</table>


Here is the applicable css:

Table.Standard {
margin-left:auto;
margin-right:auto;
border-collapse:collapse;}

The corner border images are all 14 pixels wide. The top are 28px high and the bottom 38px high.

What is IE doing that is causing the problem?

--
Eleipher, The Warlock Extraordinaire
The New Beginning
Thorium Brother Hood



Guild Webmaster

AH! Yeah, IE has some specific issues with rendering empty cells. Not sure if it is designed that way, or just an accidental issue, but anyway...

You can resolve this problem VERY easily. If you have a row in IE that is completely empty of content except a bg, do this in one of the cells (the first most likely).


<tr style="height:28;">
<td style="background-image:url('/settings/tnb/files/TopLeftSide2.gif');background-repeat:no-repeat;">

Create a 1px by 1px transparent .GIF image. Being super small and also purely transparent, it won't render, but IE will treat it as content, and thus will render the cell rows properly.

</td>
<td colspan=4 style="background-image:url('/settings/tnb/files/TopSide.gif');">

</td>
<td style="background-image:url('/settings/tnb/files/TopRightSide2.gif');background-repeat:no-repeat;">

</td>
</tr>
<tr>


This very reason is why you often will find spacer.gif or pixel.gif on many sites. This might not solve all your problems, but it's a fantastic place to begin. Once you do that, let us know, and we'll continue if further debugging is necessary.

[EDIT] while not necessary, for sake of consistancy, I would put the pixel GIF in ANY cell that is empty that you want to render.

Yeah, I tried a spacer that I have been using, and created a new 1x1 one and it didn't change anything. :-( I had been also trying &nbsp; but nothing that I add to the cells seems to be effecting it.

I set cellpadding and cellspacing to 0 and that removed the extra space that IE was rendering on the cells, but it also cropped off the bottom of the bottom images. :-/ I tried each independently, and it seems that cellpadding=0 is doing the work.

In case my css file helps at all:
http://dkpfiles.com/tnb/TNB4.css

Thank you so much for your time.

--
Eleipher, The Warlock Extraordinaire
The New Beginning
Thorium Brother Hood



Guild Webmaster

Problem exists here:

<table id="Table_Search" class="Standard">


you need to add:
<table id="Table_Search" class="Standard" cellspacing="0" cellpadding="0">

That will fix it totally for you. I copied your example (changing the img paths) and made a local file. It looks right if you make the above changes. Truthfully you don't need the cellspacing value... it's up to you... but you must add the cellpadding value.

The only problem with that is that it was cropping the top and bottom graphics making them look odd. I got around it with your spacer suggestion and setting the height and width appropriately to make IE render the entire cell.

Isn't border-collapse supposed to cause this to happen without having to revert to pre-css coding?

--
Eleipher, The Warlock Extraordinaire
The New Beginning
Thorium Brother Hood



Guild Webmaster

Border-Collapse only affects cellspacing as far as I know... at least in IE. I'm not sure what the global Table Stle is for Cell padding, but you could always set a TD class with Padding: 0px;