/    Sign up×
Community /Pin to ProfileBookmark

Table-controlled layout

Copy linkTweet thisAlerts:
Nov 06.2003

I’m using tables to control the layout of my page (sorry haven’t gotten to CSS very much yet! ? ) and am running into a problem with IE 6.0.

I have 2 columns.

The column on the right is dynamic in its height, and the left needs to be also.

The column on the left has some swapimaging nav images. The final cell in this column hosts a spacer pixel and no defined height.

Mozilla looks great ? IE stinks. ? IE tends to stretch out the left column and restricts the spacer.gif cell to that one pixel. I have hard restrictions on the other cells in width and height.

Why is this crappy browser doing this?

[URL=http://www.alloutfairytale.com]www.alloutfairytale.com[/URL] to see what it is doing. (view in IE please)

Thanks if you can solve this dilemma!

Brandon

to post a comment
HTML

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@96turnerriNov 07.2003 — i viewed you site in msie5.5 and 6.0 couldnt see anything wrong, its look fine
Copy linkTweet thisAlerts:
@Paul_JrNov 07.2003 — I looked at it with IE6, and Moz 1.4, and I saw nothing wrong.
Copy linkTweet thisAlerts:
@BrandonLauthorNov 07.2003 — I'm using IE v.6.0.2800.1106 and I have attached a file that shows exactly what I see.

I turned the borders on to help demonstrate this. I painted red arrows to point towards the cells that were stretching but aren't, and a green arrow towards the cell that *should* be stretching but isn't.

My personal thanks to those who viewed the site, though you probably saw the site normally!

Brandon

[IMG]http://www.alloutfairytale.com/links/stretch.jpg[/IMG]
Copy linkTweet thisAlerts:
@PeOfEoNov 07.2003 — try this in ur img tags

<img src="url" alt="alttext" style="margin:0px;">

I have seen this happen before in table based layouts. It happened to me once I had to basically make the whole area that this happened in one iamge and it was a pain, this was before I used css. But maybe that lil bit of css can straigten this problem out, try it and see.
Copy linkTweet thisAlerts:
@BrandonLauthorNov 07.2003 — No go with that little bit of CSS-code. ?

Brandon
Copy linkTweet thisAlerts:
@96turnerriNov 07.2003 — removed all spaces between table tags, that should do it
Copy linkTweet thisAlerts:
@96turnerriNov 07.2003 — between the <table> and </table> you have all you <td> and <tr> remove all white spaces i he an example

<table>

<tr>

<td>One</td>

<td>Two</td>

</tr>

<tr>

<td>Three</td>

<td>Four</td>

</tr>

</table>

make it

<table><tr><td>One</td><td>Two</td></tr><tr><td>Three</td><td>Four</td></tr></table>
Copy linkTweet thisAlerts:
@BrandonLauthorNov 07.2003 — This is one of the sadder days in HTML.. it still isn't working. I've simplified the code by taking out the news posting and added some line breaks.

how crazy is this???!? Darn IE!

Brandon
Copy linkTweet thisAlerts:
@FangNov 07.2003 — You don't need to put the images in seperate cells.

Put all the left-hand images in 1 cell of fixed width a they will slot together.

A 2x2 table should be ok.
Copy linkTweet thisAlerts:
@BrandonLauthorNov 07.2003 — Excellent suggestion! That cleaned it up considerably although now there is still a slight spacing between the images in IE. arrrgghh.. but it is much better than what it was !

Brandon
-------------------------------------



Update!!! With each previous suggestion I was able to do it. Now all the images in that single cell are on one line and the IE is displaying them properly! What the heck is with this browser!?!?!?


THANKS SO MUCH THOSE WHO HELPED ME OUT! Especially 96turnerri for sticking through it the whole time!
Copy linkTweet thisAlerts:
@FangNov 07.2003 — I could see no gap (ie5 a.d ie6)
Copy linkTweet thisAlerts:
@96turnerriNov 07.2003 — the gaps have gone for me too, using ie v6.0.2800.1106 and ie 5.5
Copy linkTweet thisAlerts:
@PeOfEoNov 07.2003 — ditto.
×

Success!

Help @BrandonL 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...