Hi
Spent the past week looking at CSS renderings of "liquid" 3-column
pages (with both Header and Footer that can also grow).
On testing, none of them seem fully cross-browser campatible.
In almost all of them, the left column seems fixed.
Page doesn't grow when content added to header. When it does, the
header overlaps the top of the columns.
Does anyone have the secret ?
cheers
May 7 '07
18  2430 
Beauregard T. Shagnasty wrote:
>
you have explicitly set the height of the header to 75px. Use
px only for things like borders.
.... and images and any other element that actually is pixel-based.
Use em units for everything else.
Even better - don't set an explicit height at all unless it's really
necessary.
--
Berg
BobTheBowler wrote:
>
http://www.ProBowlUK.co.uk/HolyGrail.htm
looks ok at first, but Header does not move the columns down when
content added ...
Mr Shagnasty already mentioned why this is so I won't repeat it.
I just want to comment on calling this "Holy Grail". Anything that uses
so many conditional comments and inline styles does not deserve that
title. I'm not sure where you got the original template, but you should
probably throw it back. http://www.ProBowlUK.co.uk/HolyGrail-2.htm
and this displays differently in IE and FireFox
I haven't look in IE7, but IE6 is broken where overflow is concerned, so
it's not surprising that it displays differently.
You really should learn how CSS positioning methods work if you expect
to use them effectively. Hacking away at something without understanding
it will only lead to frustration and broken layouts. Have a read at: http://brainjar.com/css/positioning/ http://www.htmldog.com/
BTW, if you're looking for 3 columns where the column background colors
all stretch the length of the document regardless of which column is
longest, an alternative method is demonstrated at http://www.bergamotus.ws/samples/3co...ull-width.html
--
Berg
On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi. com>
wrote:
>You really should learn how CSS positioning methods work if you expect
to use them effectively. Hacking away at something without understanding
it will only lead to frustration and broken layouts. Have a read at:
http://brainjar.com/css/positioning/
http://www.htmldog.com/
BTW, if you're looking for 3 columns where the column background colors
all stretch the length of the document regardless of which column is
longest, an alternative method is demonstrated at
http://www.bergamotus.ws/samples/3co...ull-width.html
thanks for those pointers.
The last example (your own ?) is what I have been looking for.
couple of questions ...
In the columns, would percentages work for the widths ?
How cross-browser friendly is it ? (Seems ok in Firefox)
cheers
--
Posted via a free Usenet account from http://www.teranews.com
BobTheBowler wrote:
On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi. com>
wrote:
>>
http://www.bergamotus.ws/samples/3co...ull-width.html
The last example (your own ?) is what I have been looking for.
I didn't come up with the idea, but that sample is my own.
couple of questions ...
In the columns, would percentages work for the widths ?
It is limited to whatever values are valid for border properties, which
excludes %.
How cross-browser friendly is it ? (Seems ok in Firefox)
You should get yourself some other browsers so you can test
compatibility yourself.
--
Berg
BobTheBowler wrote:
On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi. com>
wrote:
>>http://www.bergamotus.ws/samples/3co...ull-width.html
How cross-browser friendly is it ? (Seems ok in Firefox)
Actually, I put those demo pages together some time ago and couldn't
remember how well they had been tested, so did that this morning. IE had
some issues which are now corrected.
--
Berg
On Tue, 08 May 2007 11:14:52 -0500, Bergamot <be******@visi. com>
wrote:
>BobTheBowler wrote:
>On Mon, 07 May 2007 14:48:02 -0500, Bergamot <be******@visi. com>
wrote:
>>>http://www.bergamotus.ws/samples/3co...ull-width.html
How cross-browser friendly is it ? (Seems ok in Firefox)
Actually, I put those demo pages together some time ago and couldn't
remember how well they had been tested, so did that this morning. IE had
some issues which are now corrected.
A friend wanted to show more of his background image on his pages, so
I did an experiment with your layout ...
.wrapper {
position: relative;
float: left;
padding-left: 5%;
width: 90%;
}
This does exactly what he wants.
However, there seems to be a margin/padding on the left edge
of the navigation (left) column that shows up against the left
edges of the Header and Footer. Looks to be 0.5em or 1% ?
Is there a way of all the left edges to line up ?
--
Posted via a free Usenet account from http://www.teranews.com
BobTheBowler wrote:
On Tue, 08 May 2007 11:14:52 -0500, Bergamot <be******@visi. com>
wrote:
>>>>http://www.bergamotus.ws/samples/3co...ull-width.html
I did an experiment with your layout ...
.wrapper {
position: relative;
float: left;
padding-left: 5%;
width: 90%;
}
Why are you floating it? What benefit do you get from that? BTW, if you
don't want to use the full browser width, you might want to look at one
of the other samples I put up. That demo page links to them.
there seems to be a margin/padding on the left edge
Is there a way of all the left edges to line up ?
Adjust margins and/or padding as you see fit. Sorry, I'm not going to
spoon feed you answers to all your questions. Experiment with the sample
pages to learn how all that stuff works. Go to the Ruthsarian pages for
more detailed information.
Learn to help yourself. You'll be better for it.
--
Berg
On Tue, 08 May 2007 18:44:26 -0500, Bergamot <be******@visi. com>
wrote:
>
Adjust margins and/or padding as you see fit. Sorry, I'm not going to
spoon feed you answers to all your questions. Experiment with the sample
pages to learn how all that stuff works. Go to the Ruthsarian pages for
more detailed information.
Learn to help yourself. You'll be better for it.
Sure, if I knew exactly what I was doing
Did a small experiment .... gave each box (div) a contrasting
background-colour (red, green, teal, royalblue, etc.).
This show some gaps between them.
It also shows that the Content-column does not match the height of the
Left and Right areas.
Might be why the layout I was working on before was so complicated.
--
Posted via a free Usenet account from http://www.teranews.com
BobTheBowler wrote:
>
Did a small experiment .... gave each box (div) a contrasting
background-colour (red, green, teal, royalblue, etc.).
It also shows that the Content-column does not match the height of the
Left and Right areas.
And there is no reason why the individual columns need to be all the
same height, since it's the *container* element, the one with the wide
borders, that actually sets the background colors.
--
Berg This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: teak |
last post by:
where can somone download a Grail browser for linux? Does anyone have a link?
Thanks
Tino
|
by: Jorl Shefner |
last post by:
I've only been able to plot data with both symbols and lines by
issuing two plot commands, one for markers and one for lines. That's
perfectly fine, but it creates a problem when I try to create a legend
for it. For some reason, the legend command by default alternates
between using symbols and lines, grabbing displaying the symbol from the
first plot command for the first series, then displaying a line type
from the second plot for the...
|
by: Jorl Shefner |
last post by:
I have a problem that I run into a lot with the 'legend' command's
default behavior. I've found a work-around but I wonder if there's a
better way.
For a simple example, take the following:
________________________________
x=
a=
b=
|
by: Anne van Kesteren |
last post by:
Ok, here it goes. Originally I submitted this proposal to www-style.
Since I don't get feedback there, I think I missed a few (maybe a lot)
of points.
Proposal:
<http://lists.w3.org/Archives/Public/www-style/2003Nov/0096.html> (for
some strange reason I can't post to that list myself)
The first point I missed was of course that CSS3UI is not planning to do
anything with FIELDSET and LEGEND
|
by: Dustan |
last post by:
Does anybody know anything about Grail? I've been unable to get at
it, and I've tried on both Windows and Macintosh machines.
http://grail.sourceforge.net/
| | |
by: booktwo |
last post by:
Back from Africa, where I was a secular missionary in the Kayon
Ghozi's leprosary (Burundi) because of health reasons, I wrote these
lucky Flashes of mine, which got a resounding success ,on Turin's
HOLY SHROUD.
Prof. Harry Gove,which made the Holy Shroud date back to the
middle-ages in 1988 by the method 14C, already in 1995, in the light
on the latest scientific knowledge, realised that the dating was wrong
..
The Mystery of the Holy...
|
by: Subsciber123 |
last post by:
Does anybody know where I can download a WORKING version of the Grail web browser? The one at http://grail.sourceforge.com/ has so many errors and exceptions in it that I cannot possibly fix them all (although I managed to fix two of them; I was able to fix just enough so that it was able to display text files and very simple HTML files, instead of crashing before showing the window).
My operating system is windows, and I am using Python 2.4...
|
by: dubing |
last post by:
Hi,
We have some html source like this:
<div class="survey">
<form action="students/cbe-graduate-students/survey.html"
method="post" id="frmPbSurvey">
<fieldset class="survey_item">
<legend class="question"><span class="questionNumber">6.</span>If the
|
by: TamusJRoyce |
last post by:
Looking at various Holy Grail techniques for html layouts, I came across Faux Positioning Layout.
What I'm curious about is the differences between the two. I have no understanding of the Holy Grail, but have a working implementation of Faux Positioning (which may be a bit harder to do than the Holy Grail).
Both are compatible among various browsers, but are they really both the same thing? They both have negative margin-left css values,...
|
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...
|
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,...
| | |
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...
|
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...
|
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 launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
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...
|
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();...
|
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
