I'm new(ish) to css, comfortable using tables, but trying real hard to move away.
Please see http://84.9.125.31/developer/css_test/test5.html
NB This issue is with IE & Opera - I've tried IE 6&7 and both have the same result. It works fine in FF. Thanks to Petr Stanicek for the original example.
As you can see the table is 800px wide in the middle column and it's vertical position is affected by the amount of text in the left or right hand columns - if the table is wider than the middle column, you may need your screen res set to 1024x768. If it's less than the width of the middle <div> the vertical position is fine.
Adding css position:absolu te; to the '#left' spec works in that the table is now dispalyed at the correct vertical position in the middle column, see http://84.9.125.31/developer/css_test/test6.html , but the text in the left column flows out below the grid, defeating the object.
Given that there is a solution, the tables used will be any number of columns and could be a lot wider than 800px. I've seen a lot about non-standards compliance and display:table; BUT I'm more interested in the vertical position issue than the width/scrolling.
Any help/pointers would be greafully received.
12  4193 
Haven't tested to see if this is affecting it yet but the validator complains that <table> on line 115 is not allowed there.
Haven't tested to see if this is affecting it yet but the validator complains that <table> on line 115 is not allowed there.
Thanks for the quick response, I think this must have been because I had pasted the table inside the <p> tags. I've moved it ouside now and it validates wihtout errors.
Unfortunately this has not fixed the vertical position issues.
I have to leave for a while.
I checked in IE7, Opera and FF and they all look the same to me. I don't think I quite understand where the table is to go. Is it to remain under all three columns or constrained to the middle but ride down as the left column expands?
IE has a bug where it expands divs to contain floated elements. FF honors the standard. IE, in general, screws up floats but it's all fixable.
Your table border doesn't resize in FF. When I shrink the borwser left, the right col data over-writes the table.
I have a simple 3 column design at www.hudsoft.com which doesn't do the same thing as yours (however I haven't converted it to CSS completely yet either).
It MAY be worth a look at least.
Regards, Greg.
I have to leave for a while.
I checked in IE7, Opera and FF and they all look the same to me. I don't think I quite understand where the table is to go. Is it to remain under all three columns or constrained to the middle but ride down as the left column expands?
IE has a bug where it expands divs to contain floated elements. FF honors the standard. IE, in general, screws up floats but it's all fixable.
To recreate the issue, simply click in the hyerplink to populate with longer text in the left (or right) column. The table is moved to exactly below the new height of the left (or right) column, non table text is left unaffected.
NB FF works correctly, the issue is in IE6&7 and Opera.
Your table border doesn't resize in FF. When I shrink the borwser left, the right col data over-writes the table.
I have a simple 3 column design at www.hudsoft.com which doesn't do the same thing as yours (however I haven't converted it to CSS completely yet either).
It MAY be worth a look at least.
Regards, Greg.
Thanks for the feedback Greg! I'm not too concerned about the right column overlapping the table - I'm looking at a solution to the width. The more worrying thing is the 'phantom space' of the vertical position. The www.hudsoft.com site uses a <table> around the whole grid which I was hoping to avoid.
I still don't understand the issue. All browsers work the same to me. I did click on the longer and very long links.
I still don't understand the issue. All browsers work the same to me. I did click on the longer and very long links.
Thanks for your persistence drhowarddrfine!
1. I'm probably not explaining myself very well. Pls see below.
2. Your screen res might be higher than 1024x768, so in the first link in my original post, I have changed the <table> to be wider - it's now 1800px. Please try again.
In FF and Safari the table appears directly after the text 'This is content of the MIDDLE column. It can be short, longer or very long. PLS NO GAP AFTER.' in the middle column. This is how I'm trying to get it to appear in IE and Opera.
In IE & Opera the <table> appears with a space above it and the text 'This is content of the MIDDLE column. It can be short, longer or very long. PLS NO GAP AFTER.'
The size of the gap is exactly the same as the depth of the grey box on the left. So when you click the 'short', 'long', or 'very long' hyperlinks in the the grey box, the <table> moves down/up accordingly.
Phew, I hope that explains it better.
I see it now and think I have a solution. Be back in a bit.
EDIT: Did you change anything? Since I posted this, I can't get it to break now. So weird.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Xah Lee |
last post by:
with strict HTML spec, can one have <p> tags inside table's <td> tag?
also, in strict XHTML, can one have <p> tages inside <div>?
Thanks.
Xah
xah@xahlee.org
∑ http://xahlee.org/
|
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: Alan Hoyle |
last post by:
I was using a <table border> to generate borders around some
info/images, and decided to follow the w3c guidelines and convert it
to CSS boxes with borders since it wasn't really tabular data.
It used to be something like this:
<table>
<tr>
<td><img>caption</td>
<td><img>caption</td>
|
by: slim |
last post by:
hi again all,
i am still working on the website as mentioned in earlier threads and
have hit another snag...
http://awash.demon.co.uk/index.php
http://awash.demon.co.uk/vd.css
the php is pulling a name and placing it under the thumbnail (the text is
|
by: listaction |
last post by:
Hi Folks,
can you help me by explaining how the code below can be translated
using <div> and achieve the same effect?
Thanks,
LA
<html>
<body>
<table bgcolor="#000000" width="100%" cellspacing="1">
| | |
by: Alan Silver |
last post by:
Hello,
I would like to know if it is possible to use a panel, but prevent it
from adding a <div> tag to the HTML. The reason I want to do this is
that I am using a panel to enable me to show/hide part of a page as
required. I would like the part in the panel to appear on the same line
as the controls that precede it, but when the panel is...
|
by: Alan Silver |
last post by:
Hello,
Please pardon what is probably a dumb question, but if I have HTML like
this...
<div>
<h3>Ferrets</h3>
</div>
and CSS like this...
|
by: harryusa |
last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be horizonally and vertically centered within a <TD> </TD> area. No matter what I do the two image just present one above the other, albeit centered, NOT...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
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...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
| | |
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...
|
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...
|
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...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
