Re: [WSG] Overflow and inheritance problems with a 2-column layout
John Latter wrote:
You've just started? Crikey - I must have the IQ odf a banana then!
:) (see? I can't even spell off!)
No apparent IQ problems at your end ;-)
(must be the keyboard's fault...)
Call me a slow starter... :-) ...as I've been handling bits and bytes
and code since before they launched the first microprocessor. Haven't
spent all that many years in web development though, so I'm still just a
beginner in this field. It shows...
FWIW: I started off by dissecting the W3C site and picked out the parts
I needed. Took a while, but it gave me a pretty stable platform for
further investigations. You may be surprised to see how much chaos one
can create with pure standards. It'll even work at times ;-)
Taking your time is good advice for me. I'm trying to do several
things at once while I'm on the net and I tend to think
OMG-if-this-cc-isn't-right-Google-won't-index-me!. Google, of
course, couldn't care less.
I've never marked up anything for Google. I launch something for humans
at times, and some humans may occasionally pick up a piece of mine or
something I've worked on through Google or otherwise. That'll have to do.
If Google-indexing is of major concern to you, then read the following...
http://www.google.com/webmasters/seo.html
...and then forget Google ever existed and keep your work close to W3C
standards. That'll usually work out just fine with regards to Google and
other search engines.
Visitors may also be quite happy with it if you give them something they
are interested in, and present it well. That's the hard part - they say ;-)
although it does appear obvious, I would just like to make sure that
deleting div#sideBar{width:100%;} and then adding
div#sideBar{display: table;zoom:1;} will be ok?
Yes. Delete the width, and add the other stuff. Sidebar will then
self-adjust in width and form a block. You may put a temporary border
around it so you can see how it behaves and lines up alongside the float.
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Overflow and inheritance problems with a 2-column layout
Thanks Georg - not least for the idea of blaming my keyboard!
It's only the code that is for Google, the content is for humans but I'm
interested in such an unpopular are of evolution that getting the
css/html code right is quite important (cos I need all the help I can get).
I'm offline in a few minutes but tomorrow I'll try the div#sidebar
changes first and then take some time out to look at the W3C site and
read up on css.
John
Gunlaug Sørtun wrote:
John Latter wrote:
You've just started? Crikey - I must have the IQ odf a banana then!
:) (see? I can't even spell off!)
No apparent IQ problems at your end ;-)
(must be the keyboard's fault...)
Call me a slow starter... :-) ...as I've been handling bits and bytes
and code since before they launched the first microprocessor. Haven't
spent all that many years in web development though, so I'm still just a
beginner in this field. It shows...
FWIW: I started off by dissecting the W3C site and picked out the parts
I needed. Took a while, but it gave me a pretty stable platform for
further investigations. You may be surprised to see how much chaos one
can create with pure standards. It'll even work at times ;-)
Taking your time is good advice for me. I'm trying to do several
things at once while I'm on the net and I tend to think
OMG-if-this-cc-isn't-right-Google-won't-index-me!. Google, of
course, couldn't care less.
I've never marked up anything for Google. I launch something for humans
at times, and some humans may occasionally pick up a piece of mine or
something I've worked on through Google or otherwise. That'll have to do.
If Google-indexing is of major concern to you, then read the following...
http://www.google.com/webmasters/seo.html
...and then forget Google ever existed and keep your work close to W3C
standards. That'll usually work out just fine with regards to Google and
other search engines.
Visitors may also be quite happy with it if you give them something they
are interested in, and present it well. That's the hard part - they
say ;-)
although it does appear obvious, I would just like to make sure that
deleting div#sideBar{width:100%;} and then adding
div#sideBar{display: table;zoom:1;} will be ok?
Yes. Delete the width, and add the other stuff. Sidebar will then
self-adjust in width and form a block. You may put a temporary border
around it so you can see how it behaves and lines up alongside the float.
regards
Georg
--
*Model of an Internal Evolutionary Mechanism* (based on an extension to
homeostasis) linking Adaptive Mutations to the Baldwin Effect:
http://members.aol.com/jorolat/index.html
*Evolution: Where Darwin meets Lamarck?* Discussion Forum:
http://groups.yahoo.com/group/evomech
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Overflow and inheritance problems with a 2-column layout
On 18/02/2006, at 4:09 PM, Gunlaug Sørtun wrote:Just a question: is it "xhtml 1.0 which may be served as xhtml and/orhtml" or "html with an xhtml DTD, lowercase and slashes, and served ashtml" you are recommending?I have no problems with the former since I use it all the time, but thelatter is what is found on most sites, and that's "no good" and shouldnot be recommended to anyone.The basics of what I have to say on the matter can be found here...http://www.gunlaug.no/contents/wd_1_06_03.html...and that page is duplicated in several versions - valid and not -working and not - just to clarify what that is all about.The first, of course ;-)There's no such thing as 'XHTML 1.1 Strict', BTW.It is just 'XHTML 1.1', and it doesn't work in IE/win since that browserdoesn't understand what xhtml is all about, and 'XHTML 1.1' shall not beserved as 'html'.Sorry, I went back over my text and changed the 1.0 to 1.1 without taking the strict out :-$The problem with IE is that the XHTML MIME Type is "application/xhtml+xml" which no Microsoft products support properly. Until this is fixed I don't think we can move beyond XHTML 1.0. :-) pony belowI guess it's just a matter of trying to keep up the good ideals and getting more designers on board with XHTML served as XHTML HTML. I'm actually surprised how many tutorials I see that use HTML 4.01 in computer magazines in 2006. If we can't convince these people to code to XHTML 1.0 Transitional standards we have real problems.Regards,Steve
Re: [WSG] Overflow and inheritance problems with a 2-column layout
Steve Olive wrote: :-) pony below I guess it's just a matter of trying to keep up the good ideals and getting more designers on board with XHTML served as XHTML HTML. I'm actually surprised how many tutorials I see that use HTML 4.01 in computer magazines in 2006. If we can't convince these people to code to XHTML 1.0 Transitional standards we have real problems. I agree. Depending on the job I use Transitional or Strict. I tend to recommend XHTML 1.0 Strict to others though, and that they at least _test it_ by serving it as xhtml, so they will avoid nasty surprises in the future. Generally I don't have a problem with the use of Strict, valid and complete HTML 4.01. It is the latest HTML standard, and can easily be converted to its XHTML 1.0 counterpart. Myself, I prefer to hone my skills on working xhtml now, which means I can just do a bit of mime-jumping when the time comes that all the major browsers are able to handle application/xhtml+xml. Some say the MSIE team might get version 8 up to the task - in a few years time. regards Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Overflow and inheritance problems with a 2-column layout
On 2/16/06, John Latter [EMAIL PROTECTED] wrote:
http://evomech2.blogspot.com/2006/02/re-evomech-re-peer-review-and-genetic.html
Its a 2 column layout and I think the relevant css code is:
div#mainClm{float:right;width:66%;padding:30px 7% 10px
3%;border-left:dotted 1px #E0AD12;}
div#sideBar{margin:20px 0px 0px 1em;padding:0px;text-align:left;width:100%;}
The first problem (which occurs on Firefox but not IE6) can be seen at
the bottom of the above page where the sidebar text overflows into main
content area. I have tried to fix it myself but with many other things
to do I'm really stumbling about in the dark.
The second problem isn't readily apparent because I've tidied the main
column content up:
Entries in the main column are auto-added from a yahoo group and contain
tt tags which are then carried over into the sidebar and change the
text font. A similar effect is caused by posters using a variety of
composing programs. Is there any code I can add to the end of the main
div to stop _anything_ being inherited by the sidebar div?
It isn't an overflow problem. The right element floats, the left
element flows around the float. That's what the rules provide for. IE
is wrong; making erroneous columns where none exist. Have a look at
http://www.positioniseverything.net for examples and discussions of
floats and IE's excentricities.
Second problem -- haven't looked closely. It sounds like you need to
reexamine the function that converts the tt tags and be sure it only
is applied to the division you want it applied to.
drew
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Overflow and inheritance problems with a 2-column layout
John Latter wrote:
http://evomech2.blogspot.com/2006/02/re-evomech-re-peer-review-and-genetic.html
The first problem (which occurs on Firefox but not IE6) can be seen
at the bottom of the above page where the sidebar text overflows
into main content area. I have tried to fix it myself but with many
other things to do I'm really stumbling about in the dark.
IE6 will render in quirks mode with the Doctype you have now. Use a
Strict and complete DTD[1] instead and get standard mode in all browsers
- unless you want the box-model differences you have now.
This should do...
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
The difference in how IE6 and Firefox line sidebar vs the floating main
content area, is caused by a bug in IE/win, called 'Layout'[2].
This...
div#sideBar{width:100%;}
...acts as a 'hasLayout' trigger in IE/win. Delete it and IE6 will
render like Firefox (once the DTD is corrected).
In case you want all browsers to render like IE6 does now, then the most
reliable way to make standard compliant browsers create a 'new block
formatting context'[3] is to add...
div#sideBar{display: table;}
...once the width is removed. That'll make Firefox and other good
browsers render a nicely contained block in accordance with CSS standard.
In order to get IE6 back on track you'll have to add a new 'hasLayout'
trigger since IE/win doesn't understand CSS standards like the other
browsers do. This 'non-standard' addition is the most future safe one...
div#sideBar{zoom: 1;}
A bit back and forth there, but most of it is caused by IE6 bugs and
lack of standard compliance. The result will be good.
I'm not riding ponies when dealing with IE/win ;-)
regards
Georg
[1]http://www.w3.org/QA/2002/04/valid-dtd-list.html
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
[3]http://www.w3.org/TR/CSS21/visuren.html#q15
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Overflow and inheritance problems with a 2-column layout
Thank you Gunlaug, I'm quite new to css and had to read your comments
several times before they even began to sink in!
I chose the current Doctype largely out of ignorance but also because I
believed that browsers would be more tolerant of bad/incorrent css
coding - the word 'strict' made me run a mile!
It probably won't be until Sunday until I have time to implement your
suggestions (and read up on exactly what it is I'm doing), and although
it does appear obvious, I would just like to make sure that deleting
div#sideBar{width:100%;} and then adding div#sideBar{display:
table;zoom:1;} will be ok?
Finally, if a url is declared will this slow down page loading while the
browser accesses the document? I imagine it would be negligible under
most circumstances but what happens if the page isn't available?
Thanks again,
John Latter
Gunlaug Sørtun wrote:
John Latter wrote:
http://evomech2.blogspot.com/2006/02/re-evomech-re-peer-review-and-genetic.html
The first problem (which occurs on Firefox but not IE6) can be seen
at the bottom of the above page where the sidebar text overflows
into main content area. I have tried to fix it myself but with many
other things to do I'm really stumbling about in the dark.
IE6 will render in quirks mode with the Doctype you have now. Use a
Strict and complete DTD[1] instead and get standard mode in all browsers
- unless you want the box-model differences you have now.
This should do...
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
The difference in how IE6 and Firefox line sidebar vs the floating main
content area, is caused by a bug in IE/win, called 'Layout'[2].
This...
div#sideBar{width:100%;}
...acts as a 'hasLayout' trigger in IE/win. Delete it and IE6 will
render like Firefox (once the DTD is corrected).
In case you want all browsers to render like IE6 does now, then the most
reliable way to make standard compliant browsers create a 'new block
formatting context'[3] is to add...
div#sideBar{display: table;}
...once the width is removed. That'll make Firefox and other good
browsers render a nicely contained block in accordance with CSS standard.
In order to get IE6 back on track you'll have to add a new 'hasLayout'
trigger since IE/win doesn't understand CSS standards like the other
browsers do. This 'non-standard' addition is the most future safe one...
div#sideBar{zoom: 1;}
A bit back and forth there, but most of it is caused by IE6 bugs and
lack of standard compliance. The result will be good.
I'm not riding ponies when dealing with IE/win ;-)
regards
Georg
[1]http://www.w3.org/QA/2002/04/valid-dtd-list.html
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
[3]http://www.w3.org/TR/CSS21/visuren.html#q15
--
*Model of an Internal Evolutionary Mechanism*:
http://members.aol.com/jorolat/index.html
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Overflow and inheritance problems with a 2-column layout
I would recommend using the XHTML 1.0 Transitional DTD instead of HTML 4.01 - for the simple reason that there is a bit more tolerance for user-friendly options but you are following the XML standards of lower case tags and attributes, all tags being closed, preferably CSS for positioning but tables can be used when you just can't quite get that alignment, etcDo the validation of your web pages - Mozilla Firefox Extensions can help with this - and your pages can be easily updated to a XHTML 1.0 Strict DTD. You could even look at moving to XHTML 1.1 Strict DTD, or whatever the current standard has moved too, when you develop your skills and understanding.The Mozilla Firefox extensions (all under the developer section) I use to help with validation are: TAW3 View formatted source View Rendered Source Chart Web Developer HTML Validator (uses HTMLTidy)I recommend these to all the students I teach web design and I even give the students an XHTML template that uses CSS (embedded to keep it all together but that is easily converted to a linked CSS) to break the page up into Header, Horizontal Nav Bar, Left Nav Bar, Body, Right Ads Area and Footer. This template validates as XHTML 1.0 Transitional, Valid CSS and WAI. I can provide a link if you are interested John.SteveOn 18/02/2006, at 11:18 AM, Gunlaug Sørtun wrote:The choice of Transitional vs. Strict DTD doesn't affect tolerancetowards CSS - only html. A few less visitor-friendly and/or purelypresentational html elements are not accepted as part of Strict. Thehtml validator will tell you which ones...If you want a _just a little_ bit of tolerance, then just avoid using anxhtml DTD until you know the _whole_ difference between html and xhtml.That may take some time, so just use HTML 4.01 Strict for now, and makesure the source-code is all valid.
Re: [WSG] Overflow and inheritance problems with a 2-column layout
Steve Olive wrote: I would recommend using the XHTML 1.0 Transitional DTD instead of HTML 4.01 - for the simple reason that there is a bit more tolerance for user-friendly options but you are following the XML standards of lower case tags and attributes, all tags being closed, preferably CSS for positioning but tables can be used when you just can't quite get that alignment, etc Do the validation of your web pages - Mozilla Firefox Extensions can help with this - and your pages can be easily updated to a XHTML 1.0 Strict DTD. You could even look at moving to XHTML 1.1 Strict DTD, or whatever the current standard has moved too, when you develop your skills and understanding. Pony-warning :-) Just a question: is it xhtml 1.0 which may be served as xhtml and/or html or html with an xhtml DTD, lowercase and slashes, and served as html you are recommending? I have no problems with the former since I use it all the time, but the latter is what is found on most sites, and that's no good and should not be recommended to anyone. The basics of what I have to say on the matter can be found here... http://www.gunlaug.no/contents/wd_1_06_03.html ...and that page is duplicated in several versions - valid and not - working and not - just to clarify what that is all about. There's no such thing as 'XHTML 1.1 Strict', BTW. It is just 'XHTML 1.1', and it doesn't work in IE/win since that browser doesn't understand what xhtml is all about, and 'XHTML 1.1' shall not be served as 'html'. Any web developer who knows what xhtml is all about may use xhtml 1.0 at his/her discretion. No problem - as long as one get it right. I do recommend HTMLTidy for all web developers - regardless of which DTD they choose for their markup. However, Tidy's settings must be correct for the task... http://www.gunlaug.no/contents/wd_1_07.html regards Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Overflow and inheritance problems with a 2-column layout
On 2/17/06, Steve Olive [EMAIL PROTECTED] wrote: I would recommend using the XHTML 1.0 Transitional DTD instead of HTML 4.01 - for the simple reason that there is a bit more tolerance for user-friendly options but you are following the XML standards of lower case tags and attributes, all tags being closed, preferably CSS for positioning but tables can be used when you just can't quite get that alignment, etc Tolerance for user friendly options does not accurately describe XHTML over HTML 4.01. Neither doctype has anything to do with using tables for layout either. User friendly options and CSS positioning are always a should do (maybe even a must do) regardless of the doctype at the top. These go beyond standards, into best practice and effective design. /dismount I think you should use an HTML 4.01 strict doctype. I use them all the time, very reliable and no gotchas. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Overflow and inheritance problems with a 2-column layout
On 18/02/2006 Gunlaug Sørtun wrote:
John Latter wrote:
Thank you Gunlaug, I'm quite new to css and had to read your comments
several times before they even began to sink in!
:-)
...and I've just started ;-)
Just take your time and get the basics right from the beginning. Much
easier to kill browser-bugs and work around lack of standard-support
when your html/CSS is good to begin with.
You've just started? Crikey - I must have the IQ odf a banana then! :)
(see? I can't even spell off!)
Taking your time is good advice for me. I'm trying to do several
things at once while I'm on the net and I tend to think
OMG-if-this-cc-isn't-right-Google-won't-index-me!. Google, of course,
couldn't care less.
I chose the current Doctype largely out of ignorance but also because
I believed that browsers would be more tolerant of bad/incorrent css
coding - the word 'strict' made me run a mile!
The choice of Transitional vs. Strict DTD doesn't affect tolerance
towards CSS - only html. A few less visitor-friendly and/or purely
presentational html elements are not accepted as part of Strict. The
html validator will tell you which ones...
If you want a _just a little_ bit of tolerance, then just avoid using an
xhtml DTD until you know the _whole_ difference between html and xhtml.
That may take some time, so just use HTML 4.01 Strict for now, and make
sure the source-code is all valid.
It probably won't be until Sunday until I have time to implement your
suggestions (and read up on exactly what it is I'm doing), and
although it does appear obvious, I would just like to make sure that
deleting div#sideBar{width:100%;} and then adding div#sideBar{display:
table;zoom:1;} will be ok?
That is OK in that it will be working in all browsers that follow
CSS2/2.1 ( they will use 'display: table'[3] ), and IE6/IE7 ( that'll
use 'zoom:1;'[2] ).
The Microsoft-style 'zoom:1;' needed will be flagged as a
proprietary/non-standard piece of CSS, and you either have to accept
that flag or hide that bit of style from the CSS validator by using a
'conditional comment'[4].
I personally don't care about hiding something like this since it is
just ignored by the good browsers anyway, but that's just me - I guess :-)
Finally, if a url is declared will this slow down page loading while
the browser accesses the document? I imagine it would be negligible
under most circumstances but what happens if the page isn't available?
Browsers will not really check your source-code/DTD against the relevant
html standard on the W3C site, so no slow-down at all. Nothing to worry
about there.
The browsers have the basics of all valid DTDs hardwired, and will
just check which DTD you are using, and see if they can recognize it
(correct spelling and all that...). The decision to 'switch'[5] or not
is then made.
Note that some browsers will switch on incomplete DTDs, while others
will not. Complete DTDs will work most consistent across browser-land -
as they should.
regards
Georg
Thanks very much for your help Georg! As I said before, I won't have
time to look at this until tomorrow at the earliest and it's something I
have to do. I've posted here about my blog but my website is all in
muddled html and that's where I'll really get the benefit of learning css.
John
--
*Model of an Internal Evolutionary Mechanism* (based on an extension to
homeostasis) linking Adaptive Mutations to the Baldwin Effect:
http://members.aol.com/jorolat/index.html
*Evolution: Where Darwin meets Lamarck?* Discussion Forum:
http://groups.yahoo.com/group/evomech
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Overflow and inheritance problems with a 2-column layout
Thanks Steve! The Firefox extensions will be useful (providing I understand what they do) - I also have HTML-Kit which I haven't used for ages. I recently downloaded a new version but have yet to find out how to put HTML Tidy into it again. Could I have a link to your template please? John Steve Olive wrote: I would recommend using the XHTML 1.0 Transitional DTD instead of HTML 4.01 - for the simple reason that there is a bit more tolerance for user-friendly options but you are following the XML standards of lower case tags and attributes, all tags being closed, preferably CSS for positioning but tables can be used when you just can't quite get that alignment, etc Do the validation of your web pages - Mozilla Firefox Extensions can help with this - and your pages can be easily updated to a XHTML 1.0 Strict DTD. You could even look at moving to XHTML 1.1 Strict DTD, or whatever the current standard has moved too, when you develop your skills and understanding. The Mozilla Firefox extensions (all under the developer section) I use to help with validation are: TAW3 View formatted source View Rendered Source Chart Web Developer HTML Validator (uses HTMLTidy) I recommend these to all the students I teach web design and I even give the students an XHTML template that uses CSS (embedded to keep it all together but that is easily converted to a linked CSS) to break the page up into Header, Horizontal Nav Bar, Left Nav Bar, Body, Right Ads Area and Footer. This template validates as XHTML 1.0 Transitional, Valid CSS and WAI. I can provide a link if you are interested John. Steve On 18/02/2006, at 11:18 AM, Gunlaug Sørtun wrote: The choice of Transitional vs. Strict DTD doesn't affect tolerance towards CSS - only html. A few less visitor-friendly and/or purely presentational html elements are not accepted as part of Strict. The html validator will tell you which ones... If you want a _just a little_ bit of tolerance, then just avoid using an xhtml DTD until you know the _whole_ difference between html and xhtml. That may take some time, so just use HTML 4.01 Strict for now, and make sure the source-code is all valid. -- *Model of an Internal Evolutionary Mechanism* (based on an extension to homeostasis) linking Adaptive Mutations to the Baldwin Effect: http://members.aol.com/jorolat/index.html *Evolution: Where Darwin meets Lamarck?* Discussion Forum: http://groups.yahoo.com/group/evomech ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
