Scrollable div without a fixed height

hans.kindberg

This is how my page looks like in IE6:
http://www.freewebs.com/hasodaki/default.txt (without advertising
banner, browsable with IE6 and to see the code with the other browsers)
http://www.freewebs.com/hasodaki/default.html (with advertising banner)

I would like it to look the same in Firefox 2.0 (and in Netscape
8.1.2). If possible even in Opera 9.02.

Resize the window and see how the scrolling part resizes. I want my
content to scroll without setting a specific height for the scrolling
part. If I set the #PageContentAre a height to e.g. 400px it will work
in Mozilla to.

Some of the css-elements:

* {
margin: 0;
padding: 0;
border-width: 0;
border-style: none;
text-align: left;
font-size: 100%;
}

html {
height: 100%;
overflow: hidden;
width: 100%;
}

body {
height: 100%;
width: 100%;
overflow: auto;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

div {
display: block;
display: inline-block; /* To get it working in IE */
height: auto;
overflow: hidden;
}

#PageContentAre a {
width: 75%;
}

#PageContent {
overflow: auto;
width: auto;
height: 100%;
background-color: #ffffff;
display: block;
margin: 0 10px 0 10px;
}

I also would like to know if it's possible to get it working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
For the moment I have set a comment around the doctype tag to get it
working.

Any ideas how to fix this?

Regards Hans

Nov 22 '06 #1

Subscribe Reply

11693

AndrewF

Hi Hans,

You might be approaching this back to front to be honest.

First, it is easier to build your basic layout and functionality using
FireFox/Mozilla etc as your reference point then degrading it backwards
to work in IE. Most people think designing for IE first is the way to
do it as it has biggest market share but it has the most quirks because
it uses the oldest rendering engine.

Drop IE into standards mode with the correct DocType - using XHTML
strict or transitional or whatever and then build your basic layout,
previeing your build in both browsers as you go.

Your layout isn't very difficult to achieve using CSS but it is using
nexted tables which in the first instance isn't going to help your
cause much in trying to maintain browser compatibility, secondly will
add huge amounts of bloat to your pages and thirdly won't make it as
searchable as a standards compliant layout will.

Even at this stage you've introduced some redundancy such as:

<tr>
<td id="PageFooter " colspan="3">
<div>
<a>PageFooter </a>
</div>
</td>
</tr>

Here you've used a table cell which is part of your main page table and
then stuck a div inside it so you can add a bit of margin and centre
it. You could do all of this without the table row at all...

Given that you can't have spent too much time already as this is only a
wireframe, I'd suggest a quick CSS brushup using CSS cookbook or
similar, dispense with all the tabling and do it properly and you'll
have a much easier ride down the line.

Doctypes:

If you are using a strict XHTML document type then it means your code
has to be strict XML. Technically   isn't a named entity and so it
will fail on that - you'll need to declare it in a DTD or as an entity
etc or escape it so you have &nbsp; and that should mean it won't
fail.

Cheers
AndrewF

Nov 23 '06 #2

hans.kindberg

I guess your suggestion is to use divs and position absolute. Something
like this:
http://www.cssplay.co.uk/layouts/body4.html

I just want to say I have spent a lot of time trying to fix what I want
with divs. And I haven't succeded. My experience tells me that tables
behaves more the same in different browsers than divs do. And I believe
there are things you can do with tables that you cant do with divs.
Like having % as height for certain parts mixed with px as height for
other parts.

I have also learned that using Mozilla/Firefox to start with is the
best way. It's just that I haven't succeded to get a layout like the
one I have in IE6. I'm not shor it's possible. The IE6 layout is maybe
not a good way but it is a layout I would like to have. I just don't
know how.

Is your suggestion to use divs and position absolute? Do you have a
sample/url to show me?

/Hans

Nov 23 '06 #3

Arne

Once upon a time *AndrewF* wrote:

Hi Hans,

You might be approaching this back to front to be honest.

First, it is easier to build your basic layout and functionality using
FireFox/Mozilla etc as your reference point then degrading it backwards
to work in IE. Most people think designing for IE first is the way to
do it as it has biggest market share but it has the most quirks because
it uses the oldest rendering engine.

Drop IE into standards mode with the correct DocType - using XHTML
strict or transitional or whatever and then build your basic layout,
previeing your build in both browsers as you go.

Your layout isn't very difficult to achieve using CSS but it is using
nexted tables which in the first instance isn't going to help your
cause much in trying to maintain browser compatibility, secondly will
add huge amounts of bloat to your pages and thirdly won't make it as
searchable as a standards compliant layout will.

Even at this stage you've introduced some redundancy such as:

<tr>
<td id="PageFooter " colspan="3">
<div>
<a>PageFooter </a>
</div>
</td>
</tr>

Here you've used a table cell which is part of your main page table and
then stuck a div inside it so you can add a bit of margin and centre
it. You could do all of this without the table row at all...

Given that you can't have spent too much time already as this is only a
wireframe, I'd suggest a quick CSS brushup using CSS cookbook or
similar, dispense with all the tabling and do it properly and you'll
have a much easier ride down the line.

Doctypes:

If you are using a strict XHTML document type then it means your code
has to be strict XML. Technically   isn't a named entity and so it
will fail on that - you'll need to declare it in a DTD or as an entity
etc or escape it so you have &nbsp; and that should mean it won't
fail.

It seams like both of you need some education in how to post on Usenet!

* How to quote: http://www.netmeister.org/news/learn2quote.html#toc2
* From Google: http://www.safalra.com/special/googlegroupsreply/

--
/Arne

Proud User of SeaMonkey. Get your free copy:
http://www.mozilla.org/projects/seamonkey/

Nov 23 '06 #4

Arne

Once upon a time *h************@ spray.se* wrote:

I guess your suggestion is to use divs and position absolute. Something
like this:
http://www.cssplay.co.uk/layouts/body4.html

I just want to say I have spent a lot of time trying to fix what I want
with divs. And I haven't succeded. My experience tells me that tables
behaves more the same in different browsers than divs do. And I believe
there are things you can do with tables that you cant do with divs.
Like having % as height for certain parts mixed with px as height for
other parts.

I have also learned that using Mozilla/Firefox to start with is the
best way. It's just that I haven't succeded to get a layout like the
one I have in IE6. I'm not shor it's possible. The IE6 layout is maybe
not a good way but it is a layout I would like to have. I just don't
know how.

Is your suggestion to use divs and position absolute? Do you have a
sample/url to show me?

Nov 23 '06 #5

Similar topics

5045

Liquid layout with 100% height scrollable container

by: SebiF | last post by:

Hello, It might have been asked before but since I could not find a reference here's my qustion: I want a liquid layout similar to this one: http://www.alistapart.com/d/negativemargins/ex5.htm but with the footer fixed at the bottom and the content in a scrollable area.

HTML / CSS

2756

IE and scrollable divs

by: Christopher Benson-Manica | last post by:

I have a page up at http://ataru.gomen.org/test.html with the following style: body { margin: 0px; padding: 0px; height: 100%; width: 100%; } div.left { position: fixed; left: 0px; top: 0px; bottom: 0px; right: auto;

HTML / CSS

3197

Scrollable table widget with fixed header

by: Mel | last post by:

Scrollable table widget with fixed header is there such thing ? thanks, Mel

Javascript

36370

Displaying a scrollable table with fixed head?

by: Michael Schuerig | last post by:

I'm trying to do something seemingly very simple, but it's brought me close to crushing my head on the keyboard. All I want is a table where the head row is fixed and the body columns below are scrollable (with the ordinary scrollbars, no less). Whatever I try, the columns in the head and the body aren't aligned; the widths are computed independently which gives a completely ragged look. Michael --

HTML / CSS

2789

Drop down menu vs scrollable detail rows vs frames techniques

by: Keimo Repo | last post by:

Hello I would need some advice, even just speculations... A customer of ours insists on a couple of customer specific design features for our existing multi-customer web application: - A top header with a dropdown menu which does not scroll when the page is scrolled. - A lower detail part of the screen (table) where the headers stay, and

HTML / CSS

1812

Scrollable Grid

by: tshad | last post by:

I was just looking at a site that had scrollable grids and was wondering how that is done? It was an aspx page, but I have only seen Datagrids that were non-scrollable. You can page a grid but I have never seen an option to make a grid scrollable. Does anyone know how that is done? Thanks,

ASP.NET

16979

Resizable, sortable, findable and scrollable HTML table

by: since | last post by:

I figured I would post my solution to the following. Resizable column tables. Search and replace values in a table. (IE only) Scrollable tables. Sortable tables. It is based on a lot examples I found on the web. Works in IE and mozilla. http://www.imaputz.com/cssStuff/bigFourVersion.html

Javascript

2303

Displaying a Image within a scrollable box/canvas of fixed dimensions

by: crazychrisy54 | last post by:

Hi there, I am new to JavaScript and wonder if it could be used to solve my problem, any help would be much appreciated! I have a html web page which contains a table on the left hand side and image on the right, both of which are updating. As the image updates however it gets bigger and starts to look messy next to the constant sized updating table. I just wondered is it possible to use java script to place the ever growing image...

Javascript

9690

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, 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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9551

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

Windows Server

10504

Problem With Comparison Operator <=> in G++

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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10274

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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10251

The easy way to turn off automatic updates for Windows 10/11

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

Windows Server

10033

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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

General

7576

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

Microsoft Access / VBA

6811

Couldn’t get equations in html when convert word .docx file to html file in C#.

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();...

C# / C Sharp

5469

Trying to create a lan-to-lan vpn between two differents networks

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

Networking - Hardware / Configuration