DIV without line breaks

Johnny Two Dogs

I'm strictly concerned with IE, so cross-browser compatibilty isn't
necessary. If you view the code below, I almost get exactly what I'm
looking for:
- A table of four cells that expands/contracts to the width of the
browser window. When it contracts, the cell never gets smaller (in
width) than the largest DIV item.
- When the DIV elements dynamically change, the table cells remain
the same in width (and as a result, the left positioning of the text
doesn't change on each dynamic DIV change).
But, here's my problem:

- The first DIV element appears on top, and the second appears below
when made visible (I'd like the top and left positioning of the
dynamic elements to appear in the same spot, based on where that is
per the table cell/browser window size.
- If I use absolute positioning, the table cell is still drawn larger
(in height) because it assumes the second line of the hidden DIV.
Although I've asked for a "DIV without line breaks" solution, now that
I think of it, that last bullet-point might still pose a problem.

Can anyone please help? I'd prefer to solve this through straight
HTML/CSS rather than some gimmicky JavaScript solution whereby I detect
the top-left attributes of items, then move the second DIV to that
location.

I apologize if I've done a poor job of explaining what I'm trying to
accomplish. Thanks in advance for any help you can offer me.

----------------------------------------------------------
<html>
<head>
<title>Header Work</title>
<script language="JavaScript">
var incArray = new Array (0,0,0,0);
function sfs (num) {
var a = document.getElementById(num+"a");
var b = document.getElementById(num+"b");
if (incArray[num]%2==1) {
a.style.visibility = "hidden";
b.style.visibility = "visible";
} else {
b.style.visibility = "hidden";
a.style.visibility = "visible";
}
++incArray[num];
}
</script>

</head>

<body>

<table border=1 cellpadding=0 cellspacing=0 width=100%>
<tr>
<td nowrap>
<div id="0a"
style="visibility:hidden;">xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
<div id="0b" style="visibility:visible;">aaaaaaaa</div>
</td>
<td nowrap>
<div id="1a" style="visibility:hidden;">cccccccc</div>
<div id="1b" style="visibility:visible;">aaaa</div>
</td>
<td nowrap>
<div id="2a" style="visibility:hidden;">##########</div>
<div id="2b" style="visibility:visible;">2</div>
</td>
<td nowrap>
<div id="3a" style="visibility:hidden;">cdcd</div>
<div id="3b"
style="visibility:visible;">aaaaaaaaawwwwwwwwwwwww waaaa</div>
</td>
</tr>
</table>

<a href="javascript:sfs(0);">Switch 1st space</a><BR>
<a href="javascript:sfs(1);">Switch 2nd space</a><BR>
<a href="javascript:sfs(2);">Switch 3rd space</a><BR>
<a href="javascript:sfs(3);">Switch 4th space</a>
</body>
</html>
--
Johnny Two Dogs
------------------------------------------------------------------------
Johnny Two Dogs's Profile: http://www.highdots.com/forums/member.php?userid=316
View this thread: http://www.highdots.com/forums/showthread.php?t=1543511

Jul 24 '05 #1

Subscribe Post Reply

12353

Alan J. Flavell

On Wed, 22 Jun 2005, Johnny Two Dogs wrote:

I'm strictly concerned with IE, so cross-browser compatibilty isn't
necessary.

So what on Earth are you doing here? This group is for authoring HTML
for the WWW.

Jul 24 '05 #2

Leif K-Brooks

Johnny Two Dogs wrote:

I'm strictly concerned with IE

Then perhaps you shouldn't be asking in a WWW authoring group.

Jul 24 '05 #3

Johnny Two Dogs

I'm confused. Did I post to the wrong forum, or did you not like that
my primary concern is a working solution for Internet Explorer? If
it's the latter, please pretend that 1st sentence of mine never
existed. If it's the former, would someone please direct me to the
proper forum? Either way, a useful response would be fantastic.
--
Johnny Two Dogs
------------------------------------------------------------------------
Johnny Two Dogs's Profile: http://www.highdots.com/forums/member.php?userid=316
View this thread: http://www.highdots.com/forums/showthread.php?t=1543511

Jul 24 '05 #4

Mark Parnell

Previously in comp.infosystems.www.authoring.html, Johnny Two Dogs
<Jo********************@no-mx.forums.yourdomain.com.au> said:

I'm confused. Did I post to the wrong forum, or did you not like that
my primary concern is a working solution for Internet Explorer?

Yes to the first, because of the second. This is a group for discussing
HTML authoring for the WWW. If you are only interested in a sub-section
of that (e.g. only one browser), then your question really isn't
appropriate for the group.

--
Mark Parnell
http://www.clarkecomputers.com.au

Jul 24 '05 #5

Johnny Two Dogs

I just figured I'd spare people the difficulty of coming-up with a
cross-browser solution. Never mind. If there exists a solution that
works for all browsers, then that would obviously suit my needs even
better. Sheesh!

Again, if anyone knows a way to make it work (even if going about it a
different way than what I've coded thus far), your help would be
greatly appreciated. I'm not too keen on scripting the dynamic redraw,
since the finished product will contain form fields, and re-setting them
each time would require extra hassle.
--
Johnny Two Dogs
------------------------------------------------------------------------
Johnny Two Dogs's Profile: http://www.highdots.com/forums/member.php?userid=316
View this thread: http://www.highdots.com/forums/showthread.php?t=1543511

Jul 24 '05 #6

Dan

Johnny Two Dogs wrote:

I'm strictly concerned with IE, so cross-browser compatibilty isn't
necessary.

Why? Is this for an intranet rather than the World Wide Web? Even
there, the company that uses it might decide eventually to move its
users to a better browser.

--
Dan

Jul 24 '05 #7

Johnny Two Dogs

I wish I had never written that 1st sentence in my original post. In my
experience, everything's easier to accomplish for IE. I was merely
trying to make things easier for whomever had a possible solution to
the problem at hand.

It's an Internet web application that currently has about 100 users,
but that number is steadily growing. While still small, we're able to
say "If stuff isn't displaying properly, go on and try running it
through IE." However, we obviously won't be able to do that forever.
Nevertheless, for that reason and several others, a
cross-browser-compatible solution would be great, but a lesser one (IE
only) would also suffice.
--
Johnny Two Dogs
------------------------------------------------------------------------
Johnny Two Dogs's Profile: http://www.highdots.com/forums/member.php?userid=316
View this thread: http://www.highdots.com/forums/showthread.php?t=1543511

Jul 24 '05 #8

Jim Moe

Johnny Two Dogs wrote:

I'm strictly concerned with IE, so cross-browser compatibilty isn't
necessary. If you view the code below, I almost get exactly what I'm
looking for:

About the only way to accomplish what you want is with
position:absolute for both DIVs in each table cell. IE has severe issues
with absolute positioning. It will work for simple layouts but get tricky
(like yours) and object placement will look very creative, and not what
you expect.
<aside>
People here generally do not like IE because it is so far behind
current technology. It was trailing edge stuff in 2000, just good enough
to drive Netscape Navigator out.
Since then MS has done next to nothing to fix the layout defects IE so
proudly displays. MS has even publicly stated it thinks CSS is flawed and
only grudgingly provided what it thought might be useful.
AKAIK few, if any, of those defects were addressed in the hundreds of
patches issued, mostly to fix security holes.
So those who want a world where standards are respected find it irksome
when someone chooses to frivolously ignore standards. Writing compliant
CSS+HTML is easier than a table-driven "tag soup" approach, and is a lot
easier to maintain. IE complicates this by not being compliant ("Ah! Now
that my site works in standards compliant browsers, I must spend time
working around the IE faults.").
</aside>

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jul 24 '05 #9

David Ross

While IE is still the dominant browser, it has been losing market
share steadily for more than two years. Unless you want to promote
your Web application to an ever declining audience or you want to
go through the expense and bother of redoing it later, you should
make it compliant with the W3C specifications from the beginning.

--

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 #10

RobG

Johnny Two Dogs wrote:

I'm strictly concerned with IE, so cross-browser compatibilty isn't
necessary. If you view the code below, I almost get exactly what I'm
looking for:
Hey, I guess now ya got religion, eh? ;-)

[...]
----------------------------------------------------------
You should always use a doctype, it affects the way browsers interpret
the HTML and CSS. Use HTML 4.01 strict.
<html>
<head>
<title>Header Work</title>
<script language="JavaScript">
The language attribute is depreciated, type is required.

<script type="text/javascript">
var incArray = new Array (0,0,0,0);
function sfs (num) {
var a = document.getElementById(num+"a");
var b = document.getElementById(num+"b");
if (incArray[num]%2==1) {
a.style.visibility = "hidden";
b.style.visibility = "visible";
} else {
b.style.visibility = "hidden";
a.style.visibility = "visible";
}
++incArray[num];
}
There is a much simpler way of doing this (see below).

[...] <table border=1 cellpadding=0 cellspacing=0 width=100%>
<tr>
<td nowrap>
<div id="0a"

IDs are not allowed to start with a number - even though it's just play
code, this stuff has a habit of making it into production.

<URL:http://www.w3.org/TR/html4/types.html#type-name>

Also, the 'nowrap' attribute is depreciated, you should be using CSS
(or non-breaking spaces   ).

[...]

My solution to your dilemma is to put an invisible row containing cells
with height zero as the first row of your table. Put whatever content
into these cells that you want to use to set the width of your columns.
Now the columns will size off the invisible cells and they'll take up
zero space on the page.

Probably not perfect, but it may help. It's as cross-browser as I can
think of and it doesn't rely on JavaScript or CSS weirdness - though
minimal support for styles is required.

See below - click on the cells to toggle content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Header Work</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

function toggleCell(cell) {
var x, d = cell.getElementsByTagName('div');
var i = d.length;
while ( i-- ){
x = d[i];
x.style.display = ( 'none' == x.style.display )? '' : 'none';
}
}
</script>

<style type="text/css">
..hh {visibility: hidden; height: 0; line-height: 0;}
</style>

</head>
<body>
<table id="content" border="1" cellpadding="0" cellspacing="0" width="100%">

<tr>
<td nowrap class="hh">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx
</td>
<td nowrap class="hh">
cccccccc
</td>
<td nowrap class="hh">
##########
</td>
<td nowrap class="hh">
aaaaaaaaawwwwwwwwwwwwwwaaaa
</td>
</tr>

<tr>
<td onclick="toggleCell(this);">
<div id="0a" style="display:
none;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx</div>
<div id="0b">aaaaaaaa</div>
</td>
<td onclick="toggleCell(this);">
<div id="1a" style="display: none;">cccccccc</div>
<div id="1b">aaaa</div>
</td>
<td onclick="toggleCell(this);">
<div id="2a" style="display: none;">##########</div>
<div id="2b">2</div>
</td>
<td onclick="toggleCell(this);">
<div id="3a" style="display: none;">cdcd</div>
<div id="3b">aaaaaaaaawwwwwwwwwwwwwwaaaa</div>
</td>
</tr>
</table>
</body>
</html>

--
Rob

Jul 24 '05 #11

wasntme

I used textarea's to load the text content in just because I was working
on webtv, and used fixed widths in px's, they can be changed out easy...
but it does what I think you wish it to.. I took your hidden layer and
visable layer and made two layers one on top of the other...
killed a few div's while I was at it to...
IE has a thing about 2 items in one place, even if one is hidden.. The
posting of this code will remove the periods from my class tags in the
<head> so you will need to replace them....
<html><head><title>Header Work</title>
<script type="text/JavaScript">
var incArray=new Array (0,0,0,0);
function sfs (num){
var a=document.getElementById(num+"a");
var b=document.getElementById(num+"b");
if (incArray[num]%2==1) {
a.style.visibility="hidden";
b.style.visibility="visible";
} else {
b.style.visibility="hidden";
a.style.visibility="visible";
}
++incArray[num];
}</script>
<style type="text/css">
body{background-color:#ffffff;}
div1{position:absolute; top:0px; left:0px; width:560px;
text-align:center;}
div2{position:absolute; top:0px; left:0px; width:560px;
text-align:center;}
div3{position:absolute; top:180px; left:0px; width:560px;
text-align:center;}
tabx{width:400px;}
t1{width:100px; text-align:center;}
tex1{backround-color:#dddddd; color:#000000;
width:100px;
border:1px #000000 solid;}
tex2{backround-color:#00dddd; color:#000000;
width:100px;
border:1px #000000 solid;}
sp1{visibility:visible;}
sp2{visibility:hidden;}
a{color:#000000;}
</style>
</head><body><form><div class="div1">
<table class="tabx" cellspacing="0" cellpadding="4" border="0"><tr><td
class="t1"><span id="0b" class="sp1"><textarea class="tex1" cols="10"
rows="4">0b</textarea></span></td>
<td class="t1"><span id="1b" class="sp1"><textarea class="tex1"
cols="10" rows="4">1b</textarea></span></td>
<td class="t1"><span id="2b" class="sp1"><textarea class="tex1"
cols="10" rows="4">2b</textarea></span></td>
<td class="t1"><span id="3b"
class="sp1"><textarea class="tex1" cols="10"
rows="4">3b</textarea></span></td></tr>
</table></div>
<div class="div2">
<table class="tabx" cellspacing="0" cellpadding="4" border="0"><tr><td
class="t1"><span id="0a"
class="sp2"><textarea class="tex2" cols="10"
rows="4">0aaaaaaaaaaaaaa</textarea></span></td>
<td class="t1"><span id="1a" class="sp2"><textarea class="tex2"
cols="10" rows="4">1aaaaaaaaaaaaaa</textarea></span></td>
<td class="t1"><span id="2a" class="sp2"><textarea class="tex2"
cols="10" rows="4">2aaaaaaaaaaaaaaa</textarea></span></td>
<td class="t1"><span id="3a" class="sp2"><textarea class="tex2"
cols="10" rows="4">3aaaaaaaaaaaaaaa</textarea></span></td>
</tr></table></div><div class="div3">
<a href="javascript:sfs(0);">Switch 0 space</a><br>
<a href="javascript:sfs(1);">Switch 1 space</a><br>
<a href="javascript:sfs(2);">Switch 2 space</a><br>
<a href="javascript:sfs(3);">Switch 3 space</a></div>
</form></body></html>
IE6 has my vote....and 4.0 html

Jul 24 '05 #12

Similar topics

losing leading blank line on posts

by: dan glenn | last post by:

Hi. I'm finding that if I have text entered into a <textarea ...> </textarea> in a form, and that text has leading blank lines (with no spaces or anything else), that when I retrieve the entered...

PHP

is fgets causing these line breaks

by: Bill | last post by:

I am downloading data from a website that displays it in a table $fp = fopen("a website page", 'r'); The following accesses the stream one <td> element at a time $myData = fgets($fp); Then I...

PHP

can format memo fields (line breaks, etc.) in Access reports?

by: intl04 | last post by:

I have a memo field that is included in some Access reports I created. Is there some way for the memo field to display nicely formatted text, with line breaks between paragraphs? Or is it necessary...

Microsoft Access / VBA

switch without breaks

by: Evie | last post by:

I understand that when a switch statement is used without breaks, the code continues executing even after a matching case is found. Why, though, are subsequent cases not evaluated? I wrote a...

C / C++

Line Breaks in a Textarea

by: joelbyrd | last post by:

Didn't know exactly where to post this, but: How do I get line breaks in a textarea? I'm pulling text from a database, and this text definately has line breaks in it, because I replaced all the...

PHP

removing line breaks

by: caspardh | last post by:

i was trying to code a morse code decipherer which workd fine except that the .txt file that i was converting had linebreaks built in, i cant get python to ignore the line breaks and i cant find any...

Python

Long line breaks my width

by: Harris Kosmidis | last post by:

It seems I cannot understand CSS, well. I have donw the following page: http://www.pennias.gr/home.php It's in greek but the context is of no importance. I used a big table to put in my page...

HTML / CSS

highlight_file() strange line breaks

by: =?ISO-8859-1?Q?thib=B4?= | last post by:

Hi, Taking a closer look to highlight_file() lastly, I found out that its line break policy was a bit.. strange. <?php # highlight_file() line breaks test $f = fopen('highlight_file_test',...

PHP

Re: "simple" buttons - possible without tables?

by: Anze | last post by:

Hmmm... anyone? :) Anze Anze wrote:

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

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,...

General

Changing the language in Windows 10

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...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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...

Microsoft Access / VBA