/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] problem with tables in IE only

Explorer is such a piece of shiit that doesnt allow me to put a row of different size images on a single cell align them all at the top of the cell, because then explorer adds an invisible space between the smallest images and the top so they appear misaligned with the rest. This of course doesnt happen in FireFox and my code works excellent. Here you go.

[CODE]<table valign=”top” cellpadding=”0″ cellspacing=”0″ align=”left”>
<td align=”left” valign=”top”><img src=”1.gif”></td>
<td align=”left” valign=”top” nowrap=”nowrap”><img src=”1.gif”><img src=”2.gif”><img src=”3.gif”><img src=”4.gif”><img src=”5.gif”><img src=”6.gif”><img src=”7.gif”>
</td>
</table>[/CODE]

From there only image 1.gif is higher and wider, the rest are the same. In firefox all of them appear aligned to the top as they should be. But in the fuc king explorer only image 1.gif is at the top and the rest of the images have an invisible space above between them and the top.

Also this is a similar case

[CODE]<table cellspacing=”0″ cellpadding=”0″ width=’100%’>
<td valign=”top” width=’30px’ align=’left’><img src=’1.gif’></td>
<td class=’nukexplorer’ valign=”top” width=’auto’ align=’left’>&nbsp;</td>
<td valign=”top” width=’30px’ align=’right’><img src=’2.gif’></td>
</table>[/CODE]

the center cell has a background that x repeats but it should be aligned with the first and second cells images so it results into a single bar. The 3 images have the same height. However, in explorer, only the center cell appears at the top, the other 2 images have around 1px of invisible space above them thus, they appear misaligned. Why??? why is explorer so bad?? i hate it!

Please help me to adapt this code to see it right in explorer as well.

Thank you.

to post a comment
HTML

8 Comments(s)

Copy linkTweet thisAlerts:
@FangFeb 28.2009 — Start with a valid table, not forgetting to use a DTD and a valid document:&lt;table border="0" cellpadding="0" cellspacing="0" summary=""&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;tabular data&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

Without the image dimensions it's difficult to see what you are doing.
Copy linkTweet thisAlerts:
@supercainauthorFeb 28.2009 — 1.gif is 186px &#215; 47px and the others are 65px &#215; 38px each. Why arent my tables valid? there is only one row of cells so <tr></tr> are not necessary. But i gave it a try anyway with the format you posted and it didnt work either, so i guess there is something else. Im using a valid DTD but the validator engine output over 700 errors but almost none of them were true, so i dont undestant the criteria of that thing.
Copy linkTweet thisAlerts:
@FangFeb 28.2009 — They align exactly the same in IE and Fx using the snippet given. Can you give an image of the browser screen?
...the validator engine output over 700 errors but almost none of them were true[/QUOTE]All true, a possible new record number of errors.
Copy linkTweet thisAlerts:
@supercainauthorFeb 28.2009 — No, they were not true, at least not all of them. It said things like a > is missing at the end of the statement but the > WAS there.

Here is a picture that compares the same bit in both browsers. The one on the left is the way it should be and the way it shows in firefox. The one on the right is the mess that explorer makes.
Copy linkTweet thisAlerts:
@FangFeb 28.2009 — Can't see what's wrong from those tiny images
Copy linkTweet thisAlerts:
@supercainauthorFeb 28.2009 — Its very clear, look at the tips of the bars. In explorer they dont match the texture of the body. Im making them bigger so you can see them.
Copy linkTweet thisAlerts:
@FangFeb 28.2009 — Put the images in a <div> then apply [I]div img {vertical-align:top;}[/I]
Copy linkTweet thisAlerts:
@supercainauthorFeb 28.2009 — Yes, the problem was in the css. Some idiot put img { vertical-align: middle} that was it...

Thank you anyway!
×

Success!

Help @supercain spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...