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="#0099c c" width="170" valign="top">
<table width="100%" border="0">
<tr>
<td bgcolor="#00800 0">
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="#ff202 0">HEADING 1 - this heading should span the
whole width of the table column with the blue background color</td>
</tr>
<tr>
<td class="serviceB g"> 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="#ff202 0">HEADING 2</td>
</tr>
<tr>
<td bgcolor="#00ff3 3">
<table border="0">
<tr>
<td nowrap="nowrap" >
Phone: 0666 654654645645645 65
<br>
This is the culprit!
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</td>
<td bgcolor="#00800 0" nowrap>Content area...</td>
</tr>
</table>
</body>
</html>
--
remove underscore+nosp am if you want to mail me 4 6144
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/>.
Take a look at <URL:http://www.rossde.com/test/cols_n_boxes.ht ml>.
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/>. 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+nosp am if you want to mail me
In article <42************ ***@nowhere.not >, no****@nowhere. not says... Take a look at <URL:http://www.rossde.com/test/cols_n_boxes.ht ml>. 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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Toby Austin |
last post by:
I'm trying to replace <table>s with <div>s as much as possible.
However, I can't figure out how to do the following…
<table>
<tr>
<td valign="top" width="100%">some data that will 'stretch'</td>
<td valign="top" width="300">some data that won't 'stetch'</td>
</tr>
</table>
|
by: Holly |
last post by:
I'm trying to get this page to look the same in Netscape and IE.
I have a box that says 'Upcoming Events' on the lower left of the
page. It's supposed to have a gray background, but in NS 4.x it won't show
up:
http://www.wavian.com/clients/pugwash/
I'm also running into the same problem I think at the top, where I have a
navigation bar running horizontally that says 'about us' 'donate' (etc.) -
|
by: Anthony Williams |
last post by:
Good morning,
I'm currently designing a site, using CSS, and wish to create a variable
width two-column layout, with header and footer, and one fixed-width column
on the left.
Previously, I would have used a table to do this, using the following code:
<table width="100%">
|
by: Bernd Goldschmidt |
last post by:
Hi.
I've got a somewhat wired problems with an extra space between table
rows in Mozilla and Opera (IE works fine).
With the code below, cells within a row align seamlessly, but there is a
space of about 5px between table rows.
Any Idea?
|
by: Michael Rozdoba |
last post by:
I'm far from a CSS expert, but what I see of it I really like & I love
keeping content & style separate. I also hate the way table layout
produces convoluted bulky code.
However when asked why one should use CSS rather than tables,
particularly when tables work & browser support of CSS can be dodgy,
especially in IE, I usually fail to come up with a concise & convincing
argument :/
I've been having this long running discussion with a...
| |
by: Jean Pion |
last post by:
Dear readers,
Can anyone explain how to set column width of a table in ccs.
I use the following style in an external stylesheet:
table.tbl { table-layout:fixed; border-top: 5px solid #333; border-collapse:
collapse; background: #fff; width: 95%}
table.tbl td { border-bottom: 1px dashed #33ccff; padding: 2px 5px;
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
|
by: Arthur Dent |
last post by:
Hello all... i have a really frsutrating problem here...
This is only happening in IE (6 & 7b2), Mozilla and Netscape are both OK.
I have a top-level table with a width of 760px, so it should be 760 minimum
and stretching wider as needed to fit content (such as bound datagrids).
In the top TR/TD, i have a header table which is width of 100%, and has
three TD's. Each contains one image file, with the middle TD being set to
width 100%.
So...
|
by: phil-news-nospam |
last post by:
Is there really any advantage to using DIV elements with float style
properies, vs. the old method of TABLE and TR and TD?
I'm finding that by using DIV, it still involves the same number of
elements in the HTML to get everything just right. When you consider
the class attribute on the DIV elements, there's not much size savings
anymore for using DIV.
There are other disadvantages to not using TABLE/TR/TD, such as the
lack of ability...
|
by: Robert |
last post by:
Probably something simple i'm overlooking, taking the below html and
css style settings, when you view in a browser (IE or Mozilla for
example), the table is a tiny bit less wide than the div. Yet I have
set both to the exact same width (99%) and they have the same border
settings. This also happens if i use a width like "800px".
The desired effect is that the table be just above the div as a header
and in the browser both should be...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |