Three-column css: Am I all wrong?
Mason C
MSIE-7, Opera, Firefox, Safari (PC) -- They disagree about top of right column.
( incidentally, I'd like to center it on the reader's screen, but don't know how -- and it sure isn't "liquid" )
Please, your 1- minute reaction: Am I doing it all wrong?
Container and three columns:
#boxBig { POSITION: relative; text-align: center; margin-left: 310px; margin-top: -20px; margin-right: 10px; }
#sideLeft { POSITION: relative; text-align: center; margin-left: -100px; margin-top: 20px; }
#columnCenter { POSITION: relative; text-align: center; margin-left: 80px; margin-top: -680px; width: 546px; }
#sideRight { POSITION: relative; text-align: center; margin-left: 555px; margin-top: -925px; }
BODY { POSITION: relative; MARGIN: 0px; BACKGROUND: #666633;
background: url("ranchoview-s.jpg"); background-attachment: fixed;
}
MasonC thanks for previous advise about this site-in-process
dorayme
Mason C <maso...@XXXfrontal-lobe.info> wrote:
> I'm trying to do this in html 4.01 strict, validated, and getting
> "[browser]CSS1compat"
>
> MSIE-7, Opera, Firefox, Safari (PC) -- They disagree about top of right
> column.
>
> ( incidentally, I'd like to center it on the reader's screen, but don't
> know how -- and it sure isn't "liquid" )
>
> Please, your 1- minute reaction: Am I doing it all wrong?
Please provide a URL.
--
dorayme
Chris F.A. Johnson
> I'm trying to do this in html 4.01 strict, validated, and getting "[browser]CSS1compat"
>
> MSIE-7, Opera, Firefox, Safari (PC) -- They disagree about top of right column.
>
> ( incidentally, I'd like to center it on the reader's screen, but don't know how -- and it sure isn't "liquid" )
>
> Please, your 1- minute reaction: Am I doing it all wrong?
I'm skeptical of anything that specifies everything in px.
Without a URL, I can't add anything more.
> Container and three columns:
>
> #boxBig { POSITION: relative; text-align: center; margin-left: 310px; margin-top: -20px; margin-right: 10px; }
>
> #sideLeft { POSITION: relative; text-align: center; margin-left: -100px; margin-top: 20px; }
>
> #columnCenter { POSITION: relative; text-align: center; margin-left: 80px; margin-top: -680px; width: 546px; }
>
> #sideRight { POSITION: relative; text-align: center; margin-left: 555px; margin-top: -925px; }
>
> BODY { POSITION: relative; MARGIN: 0px; BACKGROUND: #666633;
> background: url("ranchoview-s.jpg"); background-attachment: fixed;
> }
>
>
> MasonC thanks for previous advise about this site-in-process
--
Chris F.A. Johnson <http://cfajohnson.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Beauregard T. Shagnasty
> Mason C <maso...@XXXfrontal-lobe.info> wrote:
>> I'm trying to do this
>
> Please provide a URL.
I'll bet two doughnuts it is that same pseudo-three-column
jumpy-all-over page he's been asking about for days now. That
frontal-lobe.info site...
--
-bts
-Four wheels carry the body; two wheels move the soul
dorayme
"Beauregard T. Shagnasty" <a.non...@example.invalid> wrote:
> dorayme wrote:
>
> > Mason C <maso...@XXXfrontal-lobe.info> wrote:
> >> I'm trying to do this
> >
> > Please provide a URL.
>
> I'll bet two doughnuts it is that same pseudo-three-column
> jumpy-all-over page he's been asking about for days now. That
> frontal-lobe.info site...
I know you would not bet *two* doughnuts lightly. <g>
--
dorayme
Mason C
I was trying to save your time, but: http://frontal-lobe.info/new/indexcss.html
I'm *trying* to get it right. I am not a css programmer.
I naively assumed "strict" validated would make css layout work in all browsers.
>
>I know you would not bet *two* doughnuts lightly. <g>
I'll send the doughnuts -- to what address? No guarantee of freshness.
I'm just a guy trying to change from tables to css and about ready to abandon
css layout forever. If css has any advantages I'm losing sight of them.
http://frontal-lobe.info/new/indexcss.html
Thanks for any comments on those layout style lines at the top.
#boxBig { POSITION: relative; text-align: center; margin-left: 510px; margin-top: -20px; margin-right: 10px; }
#sideLeft { POSITION: relative; text-align: center; margin-left: -80px; margin-top: 60px; width: 150px; }
#columnCenter { POSITION: relative; text-align: center; margin-left: 80px; margin-top: -580px; width: 546px; }
#sideRight { POSITION: relative; text-align: center; margin-left: 555px; margin-top: -840px; width: 150px; }
Do they look silly to you? Do they have obvious misuse of the css codes?
I stuck them there so you won't have to suffer the indignities of my css file:
There is, I hope, NO LAYOUT in my css: http://frontal-lobe.info/new/1cssdemo.css (don't look)
I'll use a Hoover to tidy that up later.
I've gone to great labour not to make Beuregard nervous with jittering boxes before
he's had his day's doughnots. He was-is right about that, thanks.
MasonC
Beauregard T. Shagnasty
> I was trying to save your time, but:
> http://frontal-lobe.info/new/indexcss.html
404 error.
> I'm *trying* to get it right. I am not a css programmer.
You should learn. Best thing since sliced bread.
> I naively assumed "strict" validated would make css layout work in all
> browsers.
Using CSS and a Strict doctype have nothing to do with each other. Most
modern browsers handle basic CSS correctly. (Insert IE rant here?)
> I'm just a guy trying to change from tables to css and about ready to
> abandon css layout forever. If css has any advantages I'm losing
> sight of them.
Here is an oft-recommended tutorial:
http://htmldog.com/guides/cssbeginner/
Study this template:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm
> I've gone to great labour not to make Beuregard [sic] nervous with
> jittering boxes before he's had his day's doughnots. He was-is right
> about that, thanks.
Just consider that your jittering jumpy boxes are going to drive away
your visitors. If I wasn't looking at it to help you, I'd have hit the
Back button after the first page. It's up to you whether or not you care
about that.
Mason C
>Mason C wrote:
>
>> I was trying to save your time, but:
>> http://frontal-lobe.info/new/indexcss.html
>
>404 error.
>
http://frontal-lobe.info/new/indexcsstest.html
Sorry about that. Too many "test" url's
masonc
dorayme
Mason C <maso...@XXXfrontal-lobe.info> wrote:
> On Tue, 22 Dec 2009 16:17:44 +1100, dorayme <dorayme...@optusnet.com.au>
> wrote:
>
> I was trying to save your time, but:
> http://frontal-lobe.info/new/indexcss.html
>
> I'm *trying* to get it right. I am not a css programmer.
> I naively assumed "strict" validated would make css layout work in all
> browsers.
OK. So what was your question? How to get
<http://frontal-lobe.info/new/index.html>
*right* ?
I will just make a few remarks in no particular order and hope they
help.
* Let's start with the general background. What has this strongly
coloured picture of a road and some bush vegetation got to do with your
site about books? It is distracting, there is no point to it, there is
no good reason behind it. It merely serves to distract many and annoy
some.
Someone I know once made a site for a group whose subject was the
history of a certain area of the globe. The author got a google
satellite image and went to work on draining it of its hard colours, a
filter of some sort to abstract it a bit, it was then reduced in opacity
(in the image software) to be fairly faint but enough to see it was a
sort of pic or map of the area with recognisable lines of roads and
lakes and stuff. It was totally bloody brilliant in my eyes and I so
admired this author - how do I know how much it was appreciated by
others? <g>
But at least it did not distract, it was too bloodless for that. In
addition, not a lot of it appeared unless someone had a really big
screen. It was a sort of extra spice. Yours is right there in everyone's
face and it is not even the least bit relevant to the site.
Consider how much better the page suddenly looks if you just remove your
body {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #666633;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: relative
}
body { SCROLLBAR-FACE-COLOR: #ccffcc; SCROLLBAR-TRACK-COLOR: #AAAA66;
SCROLLBAR-ARROW-COLOR: #ffff00;
}
body {
background: url("ranchoview-s.jpg");
}
altogether. Select it *all* this and hit the delete key and take a look.
Huh? You like? Yes, I thought so! See. Here is proof that less is more!
* No, this CSS and HTML is too much to bear even for you. How can you
sleep at night? You are not as young as you used to be, sleep is
particularly important. I know. Let's keep your general text and rough
table but simplify everything to start off with. And let us start by
doing a little adjustment to the CSS. Like *select it all and hit the
delete key*. Don't worry, we will bring the css sheet back to life soon.
But first let's attend to the HTML.
to be continued... some work calls me...
--
dorayme
Beauregard T. Shagnasty
> "Beauregard T. Shagnasty" wrote:
>>Mason C wrote:
>>> I was trying to save your time, but:
>>> http://frontal-lobe.info/new/indexcss.html
>>
>> 404 error.
>>
> http://frontal-lobe.info/new/indexcsstest.html
>
> Sorry about that. Too many "test" url's
You must have a verrry wide monitor. There is about a four inch space
at the left with nothing but your overpowering landscape, and the right
half of your content is not visible except by the dreaded horizontal
scroll. My browser is currently just under 1000px wide.
I already gave you a link to a fluid 3-column layout. Study that, and
also (google turns up hundreds of hits) this, perhaps:
http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
Mason C
>In article <a8m0j5huiit47gh4f...@4ax.com>,
> Mason C <maso...@XXXfrontal-lobe.info> wrote:
>
>> On Tue, 22 Dec 2009 16:17:44 +1100, dorayme <dorayme...@optusnet.com.au>
>> wrote:
>>
>> I was trying to save your time, but:
>> http://frontal-lobe.info/new/indexcsstest.html UPDATED DEC 22 5:46 PM PST USA
>> I'm *trying* to get it right. I am not a css programmer.
>> I naively assumed "strict" validated would make css layout work in all
>> browsers.
>
>OK. So what was your question? Here it is. The original post of this thread:
I'm trying to do this in html 4.01 strict, validated, and getting "[browser]CSS1compat"
MSIE-7, Opera, Firefox, Safari (PC) -- They disagree about top of right column.
( incidentally, I'd like to center it on the reader's screen, but don't know how -- and it sure isn't "liquid" )
Please, your 1- minute reaction: Am I doing it all wrong?
Mason C
[lots of snipping]
"Study this template:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm "
This may indeed be the holy grail for me.
Learning CSS is not my business, but I need its results.
I'm going to (try to) adopt that template -- and give due credit and
link at the bottom to Matthew.
Thanks Beauregard, for the advise. (And you too, dorayme.)
Happy holidays and a good new year.
Mason C
GTalbot
> On Wed, 23 Dec 2009 08:30:00 +1100, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> >In article <a8m0j5huiit47gh4ffl9i6snnodn3ov...@4ax.com>,
> > Mason C <masonc...@XXXfrontal-lobe.info> wrote:
>
> >> On Tue, 22 Dec 2009 16:17:44 +1100, dorayme <doraymeRidT...@optusnet.com.au>
> >> wrote:
>
> >> I was trying to save your time, but:
> >>http://frontal-lobe.info/new/indexcsstest.html UPDATED DEC 22 5:46 PM PST USA
> >> I'm *trying* to get it right. I am not a css programmer.
> >> I naively assumed "strict" validated would make css layout work in all
> >> browsers.
>
> >OK. So what was your question? Here it is. The original post of this thread:
>
Hello Mason,
> I'm trying to do this in html 4.01 strict, validated, and getting "[browser]CSS1compat"
That's good and an excellent design goal.
It's document.compatMode == "CSS1compat" by the way.
> MSIE-7, Opera, Firefox, Safari (PC) -- They disagree about top of right column.
We're willing to help you here... you know,... it's almost Christmas
now... but please give a bit more details.
Opera: which version of Opera "disagree about top of right column"?
Firefox: which version of Firefox "disagree about top of right
column"?
Safari: which version of Safari "disagree about top of right column"?
How wide is your monitor screen? You've been asked this.
> ( incidentally, I'd like to center it on the reader's screen, but don't know how -- and it sure isn't "liquid" )
>
> Please, your 1- minute reaction: Am I doing it all wrong?
>
Do you want a good answer, a best answer or just any answer that
anyone can come up with in 1 min? A "Yes, you're doing it all wrong"
or "No, you're not doing it all wrong" is not going to be of much help
anyway.
> Container and three columns:
>
> #boxBig { POSITION: relative; text-align: center; margin-left: 310px; margin-top: -20px; margin-right: 10px; }
>
> #sideLeft { POSITION: relative; text-align: center; margin-left: -100px; margin-top: 20px; }
>
> #columnCenter { POSITION: relative; text-align: center; margin-left: 80px; margin-top: -680px; width: 546px; }
>
> #sideRight { POSITION: relative; text-align: center; margin-left: 555px; margin-top: -925px; }
>
> BODY { POSITION: relative; MARGIN: 0px; BACKGROUND: #666633;
> background: url("ranchoview-s.jpg"); background-attachment: fixed;
>
> }
Here's my 1 min. answer: drop position: relative everywhere and use a
known valid working CSS columnar template. I can recommend a few.
Others have already recommended a few.
Others (dorayme) also provided some good recommendations, in my
opinion. You should choose a background image that fits, meets your
website content and fit well with text being written over it. The
background image should not interfere with reading the content,
legibility or making it more difficult to read.
The body element has no padding by default in all browsers that I know
(except Opera 6 which nobody uses anyway these days). So, you can
safely remove
body { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
}
and please remove
body { SCROLLBAR-FACE-COLOR: #ccffcc; SCROLLBAR-TRACK-COLOR: #AAAA66;
SCROLLBAR-ARROW-COLOR: #ffff00; }
We can see this
-->
at the upper top and left of your webpage: so there is definitely an
error in your markup somewhere.
Gérard
Mason C
Thanks for your suggestions.
I'm now intending to use a good, professional 3-column template rather than invent my own.
As to background etc., I didn't intend to trigger comment on that or on anything but
the technique of three columns. I'll fix the design after I get the layout.
masonc
GTalbot
> On Thu, 24 Dec 2009 12:25:54 -0800 (PST), GTalbot <newsgr...@gtalbot.org> wrote:
>
> Thanks for your suggestions.
>
> I'm now intending to use a good, professional 3-column template rather than invent my own.
>
> As to background etc., I didn't intend to trigger comment on that or on anything but
> the technique of three columns. I'll fix the design after I get the layout.
>
> masonc
I downloaded your markup and css code. Here's one decisive factor:
your <DIV id="boxBig">
has no closing tag. And because of this, browsers have to do this.
Since this is invalid markup, then they can add the margin before or
after doing such internal error correction. Your post and your
webpage, as it is right now, is a good example of why validation is so
important.
Fix your remaining 5 validation errors and you'll see less differences
between browsers rendering.
There may be still a real bug with a browser though.
Markup error:
<a href="boliver/space.html">Going to Space analysis by <br>Dr. Barney
Oliver
that link has no closing </a> tag.
Checking your webpage right now...
regards, Gérard
GTalbot
>
> Thanks for your suggestions.
>
> I'm now intending to use a good, professional 3-column template rather than invent my own.
Well, here are my suggestions:
CSS webpage templates
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#CSSWebpageTemplates
and you can learn CSS and HTML with KompoZer 0.7.10 or KompoZer 0.8
here:
KompoZer User Guide
http://www.charlescooke.me.uk/web/ugs01.htm
regards, Gérard
GTalbot
>
> Thanks for your suggestions.
>
> I'm now intending to use a good, professional 3-column template rather than invent my own.
>
> As to background etc., I didn't intend to trigger comment on that or on anything but
> the technique of three columns. I'll fix the design after I get the layout.
>
> masonc
Mason,
I checked your webpage very carefully and I don't think there is any
bug in browsers.
When you use position, then it's logical and coherent to position
blocks with top and left, not with margin-top and margin-left.
Many CSS properties are inherited and inheritable. Text-align is one.
So, you don't have to repeat over and over, again and again text-align
in every single HTML elements.
Note that text-align: center makes legibility and reading harder, not
easier, as the reader can not anticipate where the start of the line
will be. Usability/speed reading studies with high-speed cameras have
proven this. So, text-align: center should be avoided, except maybe
for big heading like <h1>.
Generally speaking, you over-declare CSS rules, you over-define. You
also over-use <br>. You should instead let normal flow carry on your
text.
regards, Gérard
Jukka K. Korpela
> Many CSS properties are inherited and inheritable.
Many properties are by definition "inherited", but this does not mean what
most people think it means. "Inheritable" is not a technical CSS term. All
properties are "inheritable" in the sense that you can use the word inherit
as the property value, but this is rather useless, as important browsers
don't support that at all.
> Text-align is one.
> So, you don't have to repeat over and over, again and again text-align
> in every single HTML elements.
If you want to set text alignment for an element, set it. Inheritance does
not guarantee anything.
On the other hand, if you like, you can set e.g.
* { text-align: left; }
Your setting might still be overridden by other style sheets, but that's a
different issue.
> Note that text-align: center makes legibility and reading harder, not
> easier, as the reader can not anticipate where the start of the line
> will be. Usability/speed reading studies with high-speed cameras have
> proven this. So, text-align: center should be avoided, except maybe
> for big heading like <h1>.
There's nothing particularly wrong with centering other headings as well, or
table header cells, or image captions, or...
--
Yucca, http://www.cs.tut.fi/~jkorpela/
GTalbot
> GTalbot wrote:
> > Many CSS properties are inherited and inheritable.
>
> Many properties are by definition "inherited", but this does not mean what
> most people think it means. "Inheritable" is not a technical CSS term. All
> properties are "inheritable" in the sense that you can use the word inherit
> as the property value
Hello Jukka,
Yes, inheritable in the sense that their value can be made to inherit
from their parent; when the property has the inherit keyword value as
a possible value, in the set of possible values. Position, left, top,
margin are some properties where inherit keyword value works in recent
browsers. Opera 10.x, for example, fails when testing left: inherit
http://www.gtalbot.org/BrowserBugsSection/Opera10Bugs/inherited-left-top-position.html
but IE 8 succeeds on that one.
> , but this is rather useless, as important browsers
> don't support that at all.
Well, this is changing. inherit as a keyword value is more and better
supported now in latest Firefox, latest Opera, Safari, Konqueror.
Otherwise, I'd be happy to create and submit a test (or many) to the
CSS 2.1 test suite...
IE 8 fails in a number of tests:
border-width: inherit;
http://www.hixie.ch/tests/adhoc/css/border/width/001.html
border-color: inherit;
http://www.hixie.ch/tests/adhoc/css/inheritance/border-color/001.html
font and inherit keyword value
> > Text-align is one.
> > So, you don't have to repeat over and over, again and again text-align
> > in every single HTML elements.
>
> If you want to set text alignment for an element, set it. Inheritance does
> not guarantee anything.
Can you elaborate on this? Because I already submitted 7 dedicated
tests on text-align inheritance and table-cells:
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/text-align-002.html
all up to
text-align-008.html
season's greetings, Gérard
--
Internet Explorer 7 bugs: 185 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 58 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Jukka K. Korpela
>> If you want to set text alignment for an element, set it. Inheritance
>> does
>> not guarantee anything.
>
> Can you elaborate on this? Because I already submitted 7 dedicated
> tests on text-align inheritance and table-cells:
I wasn't referring to browser bugs in inheritance, as you seem to have
implied. Instead, I referred to the inherent feature of inheritance that the
implicit inheritance is, by definition and in browser practice, subordinate
to _all_ explicit CSS settings.
People so often set, say, color property for an element, assuming the
background will be inherited. They typically miss the point even when
explicitly reminded of the fact that if they don't set background, then
_any_ setting for it, even a setting with the lowest possible priority in
the most humble of all stylesheets being applied will take effect,
preventing any inheritance.
It's not very probable that a browser or user style sheet sets text-align.
But why take the risk when you can set it explicitly in your stylesheet?
Assuming you want to set text-align in the first place.
--
Yucca, http://www.cs.tut.fi/~jkorpela/