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

DIV without line breaks

P: n/a

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
Share this Question
Share on Google+
11 Replies


P: n/a
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

P: n/a
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

P: n/a

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

P: n/a
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

P: n/a

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

P: n/a
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

P: n/a

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

P: n/a
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

P: n/a
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

P: n/a
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 &nbsp; ).

[...]

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%">
<!-- row to set column widths -->
<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>
<!-- Now for the real content -->
<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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.