01-24-2010, 04:47 AM
Greetings Webmasters,
Due to some mild astigmatism and an unwillingness to wear glasses in front of the computer, I frequently increase my browser text size (ctrl +, cmd +, view text larger, etc) while browsing the internet. Â Unfortunately, this tends to uncover subtle website CSS formatting goofs. Â The BYYB format has such a goof.
If you view source on any of the main BYYB website pages, you will discover that there are several nested <div> clauses identified as wrapper, header, and title. Â Immediately following the close of the header division starts the unordered list (class=âmenuâ) that forms the main navigation choices, ie About the BYYB, Bookstore, BYYB Constitution, etc. Â The CSS code for the unordered list (ul) and list elements (li), contained in the style.css file, specify float: bottom; and float: left; respectively. Â The next thing you see is an empty division for breadcrums, and then the division for content. Â
Unfortunately, there is no nested size-restricted division to contain the unordered list menu, other than the main <div id=âwrapperâ>
So here is the bug. Â If you start increasing the text size, or decreasing the browser window width, the navigation links will wrap around the window starting a second floating overflow line, which will then start pushing the empty crumbs division and the content divisions off the left margin. Â For some unfortunate combinations of relative text size and browser window width, the content window moves so far to the right and gets squished so narrowly that it becomes unreadable. Â The page as coded will render correctly only when the browser window is wide enough to contain all of the navigation links on a single line.
There are multiple easy fixes for this error in formatting.
(1)add a clear: left; snippet to the CSS for the empty #crumbs division, or more correctly the #content division.
(2)Add an empty âclearingâ division between the crumbs and content divisions thusly â¦
<div style=âclear: both;â> <!-- </div>
Either way the content division will now be pushed down the page far enough to line up with the left margin no matter how far the navigation links wrap.
While we are at it, the float: bottom property on the unordered list is a proposed CSS3 property that has not yet been properly implemented to float the item down to the bottom of its encapsulating container. Â If it were, the navigation links would have appeared at the bottom of the whole page as the containing division is the entire page wrapper division. Â Most of the navigation links I see implemented as unordered links are coded with float: left; on the <ul> and float: left; display: inline-block; on the <li>s.
I am also a proponent of the concept of the fluid layout for CSS controlled pages where we actively avoid specifying widths for containing <div>s in anything other than percentages of the browser window, and use the em units for everything else, if possible. Â This usually results in a page that scales well when the user starts playing with text sizes, or when the user is viewing the page on a handheld internet-enabled device like a smart phone where the standard browser window width is just a few hundred pixels. Â It is a hard thing mentally for older experienced print-media editors to give up complete control over exactly where every element on the page should go, but times are changing.
Finally, you should check out http://validator.w3.org. Â They have a nice little web based CSS validator that checks internet accessible web pages for proper syntax. Â It currently shows the BYYB homepage as having an error in the copyright division where somebody forgot to close a quote on the Hosting donated by http://messing-about.com link.
Example: Â http://validator.w3.org/check?uri=http://byyb.org
Do not be alarmed at the number of errors reported by the above link (13 errors, 8 warnings) as they are all recursive-descent parsed cascading errors caused by the missing quote.
I can no longer count the number of times I have made such trivial coding mistakes myself.
Cheers,
Tom
Due to some mild astigmatism and an unwillingness to wear glasses in front of the computer, I frequently increase my browser text size (ctrl +, cmd +, view text larger, etc) while browsing the internet. Â Unfortunately, this tends to uncover subtle website CSS formatting goofs. Â The BYYB format has such a goof.
If you view source on any of the main BYYB website pages, you will discover that there are several nested <div> clauses identified as wrapper, header, and title. Â Immediately following the close of the header division starts the unordered list (class=âmenuâ) that forms the main navigation choices, ie About the BYYB, Bookstore, BYYB Constitution, etc. Â The CSS code for the unordered list (ul) and list elements (li), contained in the style.css file, specify float: bottom; and float: left; respectively. Â The next thing you see is an empty division for breadcrums, and then the division for content. Â
Unfortunately, there is no nested size-restricted division to contain the unordered list menu, other than the main <div id=âwrapperâ>
So here is the bug. Â If you start increasing the text size, or decreasing the browser window width, the navigation links will wrap around the window starting a second floating overflow line, which will then start pushing the empty crumbs division and the content divisions off the left margin. Â For some unfortunate combinations of relative text size and browser window width, the content window moves so far to the right and gets squished so narrowly that it becomes unreadable. Â The page as coded will render correctly only when the browser window is wide enough to contain all of the navigation links on a single line.
There are multiple easy fixes for this error in formatting.
(1)add a clear: left; snippet to the CSS for the empty #crumbs division, or more correctly the #content division.
(2)Add an empty âclearingâ division between the crumbs and content divisions thusly â¦
<div style=âclear: both;â> <!-- </div>
Either way the content division will now be pushed down the page far enough to line up with the left margin no matter how far the navigation links wrap.
While we are at it, the float: bottom property on the unordered list is a proposed CSS3 property that has not yet been properly implemented to float the item down to the bottom of its encapsulating container. Â If it were, the navigation links would have appeared at the bottom of the whole page as the containing division is the entire page wrapper division. Â Most of the navigation links I see implemented as unordered links are coded with float: left; on the <ul> and float: left; display: inline-block; on the <li>s.
I am also a proponent of the concept of the fluid layout for CSS controlled pages where we actively avoid specifying widths for containing <div>s in anything other than percentages of the browser window, and use the em units for everything else, if possible. Â This usually results in a page that scales well when the user starts playing with text sizes, or when the user is viewing the page on a handheld internet-enabled device like a smart phone where the standard browser window width is just a few hundred pixels. Â It is a hard thing mentally for older experienced print-media editors to give up complete control over exactly where every element on the page should go, but times are changing.
Finally, you should check out http://validator.w3.org. Â They have a nice little web based CSS validator that checks internet accessible web pages for proper syntax. Â It currently shows the BYYB homepage as having an error in the copyright division where somebody forgot to close a quote on the Hosting donated by http://messing-about.com link.
Example: Â http://validator.w3.org/check?uri=http://byyb.org
Do not be alarmed at the number of errors reported by the above link (13 errors, 8 warnings) as they are all recursive-descent parsed cascading errors caused by the missing quote.
I can no longer count the number of times I have made such trivial coding mistakes myself.
Cheers,
Tom