Creating a frameless site - how do I position my <div>s

[Trevor L.]

Hi Trevor,

Is this link the most current version of your test site?
http://tandcl.homemail.com.au/newweb/index.html

Yes, I updated html on 29/01/2006 07:43 UTC and js on 29/01/2006 07:44 UTC
I forgot to add parch_left.gif, but I added that later, on 30/01/2006 04:18
UTC.
(All times as on my PC, which is usually synchronised to an atomic clock -
the Windows one, I think)

OK...The easy answer would be that the left div is shorter than the
right div and once any content clears the bottom of the div, they
just left justify. BUT....The right div and left div are separate and
not nested within eachother. It's almost like there's a stray tag
screwing up the design. If the table was somehow in the wrap div and
not the right div that would happen, but if the table is in the right
div, that shouldn't happen.

I am not sure about this. I have looked for unmatched <div> tags and this is
OK

Perhaps it goes like this:
Both "left " and"right" are nested within "wrap".
The "left" div is 140px wide by (say) 400px long - based on the length of
the table that I placed in it (containing the links).
The "right" <div> is not sized, but there is {float:left} on the "left"
<div>.
Therefore the "right" <div> positions its top left start position at the top
right of the "left" <div>.
It then continues until the "left" <div> ends and then any content (starting
after 400px deep) behaves as you said:
"once any content clears the bottom of the div, they (the tables) just left
justify".

I don't know enough about HTML to say.

Please feel free to look at my code and see if you can find any other
explanation.

Like I said before, it's looking good. Once you get the hang of it,
it'll come as second nature to you. Have fun! :>)

Thanks,

Trevor L.
Website: http://tandcl.homemail.com.au

 

[Trevor L.]

Kevin,
Some comments

Hi Trevor,

This sounds like you were looking at one of the frameless frameset
pages, but your remark about "lack of scrolling" is odd.

No, I was looking at the front page, which as you say was just thrown
together - rather well, I must say.

Both "frames" will scroll both horizontally and vertically if the content
is larger than the div containing it, by resizing, or for any other
reason. As I mentioned, both I and a colleague at work extensively
tested this in both IE and FireFox.

Yes. The right "frame" scrolls fine. No doubt the left does as well - I
didn't look at one with a lot of content.

In fact, it behaves just like a framed site. I will have to look into your
clever code to see whether I can use it. Even if I can't, it will be well
worth studying. I am looking forward to figuring out how it works. And no, I
am not asking for further explanation at this stage. I want to learn by
myself as much as I can.

Let me know if there are any other questions

Thanks, but I'll only came back after I have studied it and if I get stumped

 

[Kevin Spencer]

Of course, this sophisticated method goes out the window if js is turned

off.

ASP.Net goes out the window if js is turned off. Half the web goes out the
window if js is turned off.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Kevin Spencer]

BTW, the whole thing does NOT go out the window. Only the dragging of the
frame bar, and the adjusted scrolling is lost. The links still work, as they
are anchored links.

If CSS is turned off, the page also displays just fine, and the links work.
Try both out for yourself!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Kevin Spencer]

I note Murray's comment about relying on js. I am still in two minds on

this myself.

Take a look at my second reply to Murray's comment. Having JavaScript turned
off doesn't disable the links at all. The hyperlinks are links that point to
actual anchors in the page. The JavaScript that hijacks the event simply
handles it in its own way, by conserving the URL, and doing the scrolling
itself. It is also used for maintaining the scroll position when the window
is resized, which is not handled well (or consistently in different
browsers) in this format. Disabling the JavaScript prevents the collapsing
of the TOC menu on the left, but as it is not initially collapsed, does not
prevent the menu access. Disabling the JavaScript disables the sizer bar
from being dragged. Disabling JavaScript will not allow the divs to
dynamically resize if the window is resized. But that is all far from saying
that "it goes out the window."

A good developer accounts for situations like this, and I spent a lot of
time doing that accounting. When using CSS for positioning, it is also a
good practice to make sure that the document is readable with CSS turned
off. That is also the case here.

This page will function with both JavaScript and CSS turned off. It will not
function nearly as well, but that's a long way from "going out the window."

If you have misgivings about using JavaScript, take a look at any of the web
sites of the "big players" on the web. They almost *all* use JavaScript.
Here are a few examples:

http://www.google.com/
http://www.microsoft.com/
http://www.macromedia.com/
http://www.sun.com/
http://www.apple.com/
http://www.mozilla.com/
http://www.amazon.com/
http://www.wikipedia.org/
http://www.ebay.com/
http://www.yahoo.com/
http://www.oracle.com/
http://www.juno.com/
http://www.excite.com/
http://www.infospace.com/
http://www.intel.com/
http://www.zdnet.com/

In fact, while perusing the web for the most popular web sites, I came
across only one that doesn't have JavaScript in their home page:
http://www.w3.org/.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Kevin Spencer]

Hi Trevor,

In fact, it behaves just like a framed site. I will have to look into your
clever code to see whether I can use it. Even if I can't, it will be well
worth studying. I am looking forward to figuring out how it works. And no,
I am not asking for further explanation at this stage. I want to learn by
myself as much as I can.

Yes, you seem to be that type of personality (as am I). That's exactly why I
wanted you to see it. I figured you might want to analyze my solution to a
similar problem, and perhaps glean some ideas from it.

As I may have mentioned, I wish I had the time to implement a
fully-extensible version of the same thing, which could accomodate any
combination of "frames" - but that isn't likely to happen in the near
future. I initially came up with this as a solution for documenting our
software. I was aware of NDoc, but tend to "think outside the box." Rather
than taking the easy road, and creating documentation that looks exactly
like Microsoft's, with little extensibility, and a dependence upon a lot of
software, I thought of using XSL, which can easily be extended with no
software dependencies. And rather than using a FrameSet, because of the same
reasons you've given, I thought I'd take a crack at using DHTML to create a
"frameless frameset." It turned out to be a complex problem to solve, but
lots of fun.

However, at this point, my research is in other areas, and I've had to
consider that particular project "complete for now."

There are times when I wish there were 48 hours in a day...

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Murray]

Of course the links still work. But all the work to make the 'frames' is
busted. That's why I don't bother with such artifices.

 

[Trevor L.]

Thanks Murray and Viken

I have created the site http://tandcl.homemail.com.au/newweb/index.html
which appears to work OK, except that IE and FF treat this spec differently
wrap { height: 550px;}

In IE it extends to the depth of the (1024*768) page. In Firefox it does
not

Is there a way to get the height to fit the browser window ?

 

[Viken Karaguesian]

Trevor,

which appears to work OK, except that IE and FF treat this spec
differently
wrap { height: 550px;}

In IE it extends to the depth of the (1024*768) page. In Firefox it does
not

Is there a way to get the height to fit the browser window ?

The short answer? No. Unfortunately, that is a major limitation with divs.
Sometimes, I wish that the CSS specs would be changed to say that { height:
100% } means 100% *of the browser window*. Right now 100% means it expands
just enough to contain its content.

But, try doing this: along with { height: 550px }, add { max-height:
550px }. IE has spotty support for CSS2, and this is one of the commands it
chooses to ignore, but Firefox won't ignore it. I'm not sure if it'll work,
but it's worth a try. Murray may know more than me about that. In theory, IE
will ignore the command as if it wasn't there, but Firefox won't, therefore
it would look the same in both browsers.

But, again, I'm not sure it'll work. I'm just an amateur like you :>) The
difference is, I just went through the growing pains of getting rid of
frames and worrying about validation, etc. a few months before you. :>)

BTW, your Faux Column is a little wider than the left column, which makes it
extend a bit into the content (right) column. Just thought I'd let you know.

 

[Trevor L.]

The short answer? No.
But, try doing this: along with { height: 550px }, add { max-height:
550px }.

I just tried that, but it makes no difference to either IE or FF. But, the
FF Javascript console does not object to the spec.

I am thinking of experimenting with some js to find the browers height - I
think it is clientHeight. I would then have to find the height of the

BTW, your Faux Column is a little wider than the left column, which
makes it extend a bit into the content (right) column. Just thought
I'd let you know. --

Thanks, I have had a little trouble with this.

I have now added the spec
#left{ width: 140px;}
(where parchmnt.gif is 140*100)
which widens the left column.

It now looks a bit better. In fact, with this change, it looks better in FF
than it does in IE

 

[Kevin Spencer]

Hi Trevor,

The CSS for this div has a "max-height" specified. This is a W3C standard
style, but is not supported by IE. If you remove it, and replace the
"height" value of "550" with "100%" it will work in both browsers the same.

Also, you have an IFrame in the page that is throwing a JavaScript
exception. You also have several other errors in the page.

Here's a tip: FireFox has a built-in DOM inspector which can help you debug
your pages. The FireFox JavaScript console will also show you all of the
exceptions caused by JavaScript *and* CSS. And there is a "Web Developer"
Extension for Firefox that can provide you with all sorts of debugging tools
for your HTML, CSS, JavaScript, etc.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Viken Karaguesian]

Here's a tip: FireFox has a built-in DOM inspector which can help you debug

your pages.

Hi Kevin,

Where is this built in DOM inspector? I'd like to give it a whirl. I
have the Web Developer addition already, which is real handy!

Viken K.

 

[Kevin Spencer]

Hi Viken,

It's under the Tools menu, as well as is the JavaScript console. I'm
assuming you have the latest version?

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Viken Karaguesian]

It's under the Tools menu, as well as is the JavaScript console. I'm

assuming you have the latest version?

Kevin,

I do have the latest version (1.5) but I don't see it under the Tools menu.
All I see is the Javascipt Console. Maybe I don't know what I'm looking for?

 

[Trevor L.]

Viken,
I need to answer Kevin separately because what he suggested doesn't seem to
help.

But, to your question, Javascript Console is under Tools, as you know.

The Web Developer has to be downloaded separately. You get a file with a
strange extension (not a normal .msi ). You drag this file into an open page
in FF and it instals. I think you then reopen FF and it appears immediately
above the Javascript Console

I haven't tried it yet. I must give it a go and see what it does

 

[Trevor L.]

Kevin,
Great to hear from you. I am glad you are sticking with me in my mission to
create a frameless site

Hi Trevor,

The CSS for this div has a "max-height" specified. This is a W3C
standard style, but is not supported by IE. If you remove it, and
replace the "height" value of "550" with "100%" it will work in both
browsers the same.

I read that it is not IE6 but that Firefox accepts it (which it does - the
JS Console gives no error)

The problem about height:100% is that it interprets this as 100% of the
depth of the contents of the "right" <div>. I don't know why

Since the "left"<div> is longer than most of the pages in the "right" <div>,
the background image becomes too short. By specifying a height at least as
high as the longest page, this doesn't happen. Although I need to specify a
greater height in FF than in IE6 to acheive the correct result

What I would like to do is write some JS which finds the height of all divs,

Also, you have an IFrame in the page that is throwing a JavaScript
exception. You also have several other errors in the page.

Yes, I have been unable to resolve this error.
The code causing it actually works - it resizes the iframe to the height of
its contents (+20 to allow a bit more space).
function autoResize(id,tname)
{
try {var newheight =
document.getElementById(id).contentWindow.document.getElementById(tname).clientHeight
}
catch(e) { }
var newheight =
document.getElementById(id).contentWindow.document.getElementById(tname).clientHeight
+ 20
if (!newheight)
newheight = 600
document.getElementById(id).style.height = newheight + "px"
}
where
id is the frame id
tname is the id of the table in the html file loaded into the iframe which
contains all the text.

Here's a tip: FireFox has a built-in DOM inspector which can help you
debug your pages. The FireFox JavaScript console will also show you
all of the exceptions caused by JavaScript *and* CSS. And there is a
"Web Developer" Extension for Firefox that can provide you with all
sorts of debugging tools for your HTML, CSS, JavaScript, etc.

Thanks for these suggestions
To reply
1. I have heard about the DOM Inspector, but never used it.
I just found it under the Tools menu on a toolbar under the main toolbar. I
will see what it can do.

2. I have used the Javascript Console, but I can't resolve all errrors
The annoying ones have been
Error: Expected ':' but found '='. Declaration dropped.
Source File:
file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Webs/myweb/sitemap.html
Line: 28
(This line is <script type="text/javascript"
src="scripts/sitemap.js"></script> )

Error:
document.getElementById(id).contentWindow.document.getElementById(tname) has
no properties
Source File:
file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Webs/myweb/scripts/external.js
Line: 301
(This line is var newheight =
document.getElementById(id).contentWindow.document.getElementById(tname).clientHeight
+ 20
which actually works )
I removed this line on the assumption that newheight would be set in the
line:
try {var newheight =
document.getElementById(id).contentWindow.document.getElementById(tname).clientHeight
}

But Firefox is not reading the correct file
Instead of:
file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Webs/newweb/scripts/external.js
it is reading:
file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Webs/myweb/scripts/external.js
This makes life difficult

I am finding a lot of other errors now, but before these were the main ones

3. I also have the Web Developer extension, so again I can try that.

 

[Trevor L.]

I am finding something strange which may be related to problems in aligning
elements and sizing <div>'s

When I add a background-color to #right
i.e. #right {
background-color: #cccccc;}
*both* the left and right divs take this color

The CSS is
#wrap {
background-image: url("images/display/parchmnt.gif");
background-repeat: repeat-y;
height: 550px;
max-height: 550px;
}
#header { background-image: url("images/display/parchmnt.gif"); }
#left {
float: left;
width: 140px;
height: 100%;
}
#left img {float: left; }
#right {padding-top: 0.5% ;background-color: #cccccc; }

I then changed the CSS to
#right {float: left ; padding-top: 0.5% ;
background-color: #cccccc;}
and in IE6, the <div> postioned as I wanted it to - to the right of the
"left" <div>

But FF wont accept either of float: left ; or padding-top: 0.5% ;
The JavaScript Console objects to padding-top: 0.5% ; but with float: left ;
the page won't even load

I need some help in CSS especially as it works (or doesn't ) in Firefox

The site is http://tandcl.homemail.com.au/newweb/index.html and other html
files
(sitemap.html , siteinfo.html , about.html , album.html)
but not all of the CSS has been altered - I have tested locally.

 

[Kevin Spencer]

Hi Trevor,

I read that it is not IE6 but that Firefox accepts it (which it does - the
JS Console gives no error)

What you read is not necessarily reliable, depending upon where you read it!
I rely on authoritative references, including the W3C specifications, and
each browser vendor's own references. I have compiled quite a few of these,
most of which are in my Favorites, and some of which I keep in my memory
(from familiarity). For your convenience, let me share a few of them with
you:

For Internet Explorer-specific, and some standard and general HTML,
JavaScript, and CSS references (the difference is documented in the
documentation):
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp?frame=true

For FireFox-specific HTML/CSS/JavaScript reference, which is all standard
excepting some JavaScript, for which there is not yet a standard in many
cases (the W3C is playing catch-up, but the browser vendors cooperate in
many cases):
http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html
http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/guide/

For W3C standards (all):
http://www.w3.org/

For W3C HTML standards:
(HTML 4.01):
http://www.w3.org/TR/html4/
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/

For W3C CSS standards:
http://www.w3.org/TR/REC-CSS1-961217.html
http://www.w3.org/TR/REC-CSS2/
http://www.w3.org/TR/REC-CSS2/propidx.html

Generally, FireFox and Mozilla browsers now adhere to the standards, with
the exception of JavaScript, for which there are not yet standards available
for all functionality. But where there are, FireFox and Mozilla browsers do
follow them. IE6 is pretty bad with regards to standards, but still supports
quite a few. Much of the Microsoft JavaScript spec has been adopted by the
Mozilla family (where there is no existing W3C standard), and much of the
original Netscape JavaScript is supported by IE as well. CSS is where
Microsoft chiefly drops the ball, esp. with regards to margins and padding.
There are others as well, such as "fixed" positioning, etc., but IE supports
the node model well. IE 7 is purported to support almost all CSS standards,
with the promise that at some future time it will support all of them (time
constraints are blamed for any present absences).

I have found that the following methodolgy works well for me:

1. Look to the standard. If IE and FireFox both support it, use it. The
reason for this is that having a "standard first" methodology is more likely
to not need tweaking in the future.
2. If IE does not support the standard:
A. Look for some workaround method that works in both platforms, or
B. Use conditional JavaScript and browser detection

The Microsoft JavaScript reference is the best organized, so when it comes
to JavaScript, I will often start there, and then verify it against Mozilla.
It's just quicker that way, as the Mozilla and Netscape JavaScript
references are not as well organized.

If you have Visual Studio 2005, it has an excellent CSS IDE. It uses DTDs
for intellisense, which enables it to identify errors accurately. Of course,
there are other third-party CSS editors that work much better.

The problem about height:100% is that it interprets this as 100% of the
depth of the contents of the "right" <div>. I don't know why

Get rid of the absolute positioning in the right div. I'm not sure, but due
to the top div, it may be necessary to enclose both of these bottom divs in
a container div to make this work right.

What I would like to do is write some JS which finds the height of all
divs, add sets the "wrap" <div> to the appropriate height,
i.e. height of "wrap" = height of "header" + height of "right"

While this would work, I feel that it is best to avoid using JavaScript for
this sort of thing, if you can do it with CSS and HTML alone. I think of
this sort of solution as a "last resort" or a workaround.

2. I have used the Javascript Console, but I can't resolve all errrors

That's pretty typical. It's not always necessary, but does give you some
things to have a look at.

CSS errors are often caused by elements using styles that are not "legal"
for those elements to use.

But Firefox is not reading the correct file
Instead of:
file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Webs/newweb/scripts/external.js
it is reading:
file:///C:/Documents%20and%20Settings/Trevor/My%20Documents/My%20Webs/myweb/scripts/external.js
This makes life difficult

Could be a caching issue. Try emptying the browser cache.

Gotta run for now!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Who is Mighty Abbott?
A twin turret scalawag.

 

[Murray]

Trevor:

Just a comment - your CSS would be ever so much easier to understand and
troubleshoot if you eliminate all of the custom classes. I try not to use a
single one on my pages (I often fail, but one or two is not bad). Learn how
to use descendent selectors instead. That way you can build your CSS as you
build your page - top down. All the rules that affect a given container and
its contents are grouped together and it becomes much easier to grasp....

 

[Murray]

When I add a background-color to #right

i.e. #right {
background-color: #cccccc;}
*both* the left and right divs take this color

That's because you have not assigned a width to #left, thus, #left expands
to fill the width of the page. And since #right is positioned absolutely,
it floats over left the background of which is now 'shining' though #right.