Jump to content

This is odd!? Why does one script work and the other not?


Recommended Posts

Yeah, I'm rescripting my site and the first way it doesn't work in IE:
http://www.firemelt.net/FireMelt_Rescript/index.php
[code]<html>
<body>
<table class="main" border="1" cellpadding="0" cellspacing="0" cols="2" rows="3">
<tr>
<td colspan="2">
<img src="nav_top_bann.png" alt="Banner" />
</td>
</tr>

<tr>
<td colspan="2">
<img src="nav_time.png" alt="Todays Date" />
</td>
</tr>

<tr>
<td width="192">
Nave
</td>
<td>
Lots of Text
</td>
</tr>
</table>
</body>
</html>[/code]

But this code does!???:
http://www.firemelt.net/FireMelt_Rescript/index_3.php
[code]<html>
<body>
<table class="main" border="1" cellpadding="0" cellspacing="0" cols="2" rows="3">
<tr>
<td colspan="2"><img src="nav_top_bann.png" alt="Banner" /></td>
</tr>

<tr>
<td colspan="2"><img src="nav_time.png" alt="Todays Date" /></td>
</tr>

<tr>
<td width="192">Nave</td>
<td>Lots of Text</td>
</tr>
</table>
</body>
</html>[/code]

I have 2 questions:
1.) Why doesn't the top one work? HTML ignores extra white sace. I am of course refering to the space underneath the images even though the cellpadding is set to "0".
2.) In both versions of the script, in IE, the td tag with the width does not work. Insted of makeing that cell 193px wide it makes it 192px short! Why is this?

Both of course work as they should in FF
Sometimes some browser dont ignore the wide space between or within table cells. It usually corrected by removing the white space from within and around the td tags.

Also about the width. The width of an element is calculated by adding the total border and padding sizes to the the current width of an element, such as a table cell. So for example you have a border for your table set to 1px and have set a width of 192px for one of your table cells. The browser will give the cell a total of 194px. Here its added more 2px to the total width, why? Because on each side, the left and the right, of the element will have a border of 1px so it adds those two sides up together to get the total border width.

You might want to read up on the box model. Heres an [url=http://www.redmelon.net/tstme/box_model/]Interactive demo[/url] of the box model.
I know that its 2pxs more because of my border. My problem is that even though it should only be 194pxs wide, it's not. Its actually a lot more. If you could take a look in IE you will notic that the cell (bottom left) is far greater then 200px! Thats what I can't figuer out. It seems as though the bottom right cell is the one that is being set to 192px, which of course is incorrect and shouldnt be doning that.
http://www.firemelt.net/FireMelt_Rescript/index_3.php
IE does ignore Extra Spaces (that's extra) if you have a line break after the image, that will be considered a space. You can use a line break (<br />) after the image or just close the td

If you want to width to work (using width="##") you gotta set the table width and the other cell width as well. Otherwise you can use css which works better.
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.