By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,786 Members | 1,142 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,786 IT Pros & Developers. It's quick & easy.

table width layout problems in IE

P: n/a
I have the following problem:
I need a simple, tabular layout in a webshop.
- left column: navigation column with approx. 170px width
- right column: content area

the goal: the left column should contain a few "boxes" (these are HTML-
tables) which should be all of the same width.

So, I attributed the left column with 'width="170"' and assigned the
attribute 'width="100%"' to all contained <table>s. This should
guarantee that the <table>s fill up the entire table column space.

The problem:
If some content of one of the <table>s is wider than 170px and thus
forces the entire left column to be wider than 170px, then all other
<table>s are shown STILL WITH A WIDTH OF 170px, thus not consuming the
available space (suggested by width=100%) but just consuming 170px.

The culprit in my sample HTML code (see below) is the table cell with
the "nowrap" attribute, which contains a phone number. It is the cell
shown with a light green background.

MY QUESTION:
How can I force IE (version 5.5) to display all <table>s in the left
column with the same width, that is, the width of 170px - or the width
of the widest table width, if it is wider than 170px and thus forces the
column width to be wider than 170px?

In Firefox it looks perfectly, but in the IE...

Thanx for all useful hints!
Alex
Here is my sample HTML code:

<html>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0099cc" width="170" valign="top">
<table width="100%" border="0">
<tr>
<td bgcolor="#008000">
This cell should be very next to the next cell (the right one,
with the same dark green background), with no pixel in between.
</td>
</tr>
</table>
<br>
<table width="100%" border="0">
<tr>
<td bgcolor="#ff2020">HEADING 1 - this heading should span the
whole width of the table column with the blue background color</td>
</tr>
<tr>
<td class="serviceBg"> This is just ordinary text, really
really ordinary
text, indeed very ordinary - this is just ordinary text,
well, it
is quite ordinary, yes it is. </td>
</tr>
</table>
<br>
<table width="100%" border="0">
<tr>
<td bgcolor="#ff2020">HEADING 2</td>
</tr>
<tr>
<td bgcolor="#00ff33">
<table border="0">
<tr>
<td nowrap="nowrap">
Phone: 0666 65465464564564565
<br>
This is the culprit!
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</td>
<td bgcolor="#008000" nowrap>Content area...</td>
</tr>
</table>
</body>
</html>

--
remove underscore+nospam if you want to mail me
Jul 24 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
You have nested a table within another table within a higher
table. Some visual browsers have trouble with that. So do many
audio browsers for the visually handicapped.

Since you are not trying to present tabular information, try doing
this without tables. You can create a similar effect with
style-sheets that define columns with nested boxes.

By the way, be careful with colors. For example, the dark-green
background is not good for black text. I can read it, but it's not
sharp. Others might have trouble.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.
Jul 24 '05 #2

P: n/a
Take a look at <URL:http://www.rossde.com/test/cols_n_boxes.html>.
It uses CSS1 to create the column with colored boxes on the left.
This does not exactly replicate the way your page looks with
Mozilla, but it might reflect your intent.

I validated this for both HTML and CSS. Your example lacked a
<HEAD> section, which is where I put most of the CSS.

Since this is now valid HTML and CSS, if IE doesn't display it
correctly, that's an IE bug and Micro$oft's problem. My philosophy
is that you should follow the W3C specifications and not worry
about browser bugs. Web pages should not be made non-compliant
merely to compensate for such bugs.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.
Jul 24 '05 #3

P: n/a
no****@nowhere.not says...
You have nested a table within another table within a higher
table. Some visual browsers have trouble with that. So do many
audio browsers for the visually handicapped.
Ugh, I thought that working with tables to structure the layout (not
pixel-wise, but semantically) would be the preferred and most compatible
way...
Since you are not trying to present tabular information, try doing
this without tables. You can create a similar effect with
style-sheets that define columns with nested boxes.
Could you point me in the right direction? Do you mean these "float"ing
DIV stuff? I'm afraid I'm not at all familiar with these. Or what do you
mean by "nested boxes"? CSS is in general no problem for me, but I have
only dug into CSS to a intermediate level.

By the way, be careful with colors. For example, the dark-green
background is not good for black text. I can read it, but it's not
sharp. Others might have trouble.


You are right, but these ugly colors were just for presentation purposes
of the problem.

Alex

--
remove underscore+nospam if you want to mail me
Jul 24 '05 #4

P: n/a
In article <42***************@nowhere.not>, no****@nowhere.not says...
Take a look at <URL:http://www.rossde.com/test/cols_n_boxes.html>.
It uses CSS1 to create the column with colored boxes on the left.
This does not exactly replicate the way your page looks with
Mozilla, but it might reflect your intent.
Thanx a lot, I will have a in-depth look into your page!
I validated this for both HTML and CSS. Your example lacked a
<HEAD> section, which is where I put most of the CSS.
I omitted the <HEAD> section, again, for illustrating purposes only.

Since this is now valid HTML and CSS, if IE doesn't display it
correctly, that's an IE bug and Micro$oft's problem. My philosophy
is that you should follow the W3C specifications and not worry
about browser bugs. Web pages should not be made non-compliant
merely to compensate for such bugs.


Well, I can follow your point, I am also one of the persons cursing the
IE for both not complying to the W3C specs and being the widest spread
browser so far (hope this is changing soon...). However, since my
customer insists in having the page look ok in IE, I can't ignore this
fact. So, I just have to get the page right, even with the sucking IE.

Cheers,
Alex
Jul 24 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.