Construct Web

-some notes from the last site I built

Had me a table, had a td set to display: none;. I wanted to have it display again - display: block; wouldn’t do it - use display: inline-block for IE and display: table-cell; for FF. which one is w3c correct I forgot.
and don’t use display: block on a tr Don’t go there

That italic problem in IE6 I used this solution many times, * html .articleBody {margin-right: -3px; width: 98%}/*, yet it also exhibits the same problem usign ems’ lord.

I’ve added height: 1% for that dang hasLayout issue so many times it’s wak - for IE not exhibiting the properties given (margins, padding, etc etc). Sometime the has layout bug works in IE6 and not in IE7 sometimes it does - when that occurs I used overflow- hidden for IE7 height 1%. But, don’t forget the margin will not collapse problem for IE6 and using clearfix after for FF in clearing floats.

Oh and if you use absolute positioning with IE6 be sure to give it a width and height - there’s some evidence for this somewhere - I think

The double margin bug will get you right and left - literally - I do not know how many times I used display: inline;, of course that screwed up other thing on the IEs’ sometimes depending on layout

I even got this one a few times (you have to create one complex mess of a layout and css to come across this one). I was affected by an IE bug where an absolutely positioned element may disappear when they it is adjacent to a float. As of IE7 it seems that this bug has only been partially fixed.
To solve your problem, you may try to put in a dummy separator div

And my Son of Suckerfish wouldn’t go over the select box on IE6 - but that beautiful iframe hack was there - only took me a day to implement it.

…and did you know…If an illegal identifier name is used in place of important, Internet Explorer 7 and below will handle the property normally so property:value!freakout; is cool

This one will really throw you -
Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. However, by now everyone should know that IE needs no excuse to misbehave. The direct cause is nothing more than ordinary HTML comments, such as,

Alright that’s just a few - what a ride - I’ve done it a few times so I imagine I’m better than a lot - I almost feel enlightened - master of the sukky browser

and now IE8 is here, or a beta that is - bearing many bugs - they are hellbent on standards more than ever. I won’t be downloading it for a long long time.

It was interesting to read on webcredible the article 10 common errors when implementing accessibility. Not only were some fairly obvious items listed but it’s always best to remember that we read a lot and can be unaware of what actually happens. I read an article (I have to find it) recently about how a lot of what is on the web is fairly accessible at this time, even if the website gets a failing grade on accessibility. People have been using the web for a while now and have come to terms with what’s out there. The case made by this individual is that doesn’t mean we should just stop trying and I think we would all agree. Standards should be in place and observed. The 10 common errors article told us certain things which we really do not have to/and shouldn’t do.
Regarding #2, I am reminded again of what the screen reader does. The announcing of ‘vertical bar’ if you used these in a list of links has to be quite annoying (I suppose a background pipe image is best!!). Anyway great intentions always have to be mixed with reality - how true

The semantic thing to do for lists is to use unordered list (ul) or ordered list (ol). Afterall we lovers of semantics should think ol or ul whenever there is any kind of list, yet what is a good way (best way) of making a two or three columns of lists using the ol or ul code. Just as divs are floated to create columns we do the same thing with the ul’s (ol’s) and the li’s.

We want to create something like below:

Here is the code (streamlined a bit) :

<ul id="listWrap">
<li id="listCol1">
<h4>Header One</h4>
<ul>
<li>
<a title="link one" href="#">link one</a>
</li>
<li>
<a title="link two" href="#">link two</a>
</li>
<li>
<a title="link three" href="#">link three</a>
</li>
</ul>
</li>
<li id="listCol2">
<h4>Header Two</h4>
<ul>
<li>
<a title="link one" href="#">link one</a>
</li>
<li>
<a title="link two" href="#">link two</a>
</li>
<li>
<a title="link three" href="#">link three</a>
</li>
</ul>
</li>
<li id="listCol3">
<h4>Header Three</h4>
<ul>
<li>
<a title="link one" href="#">link one</a>
</li>
<li>
<a title="link two" href="#">link two</a>
</li>
<li>
<a title="link three" href="#">link three</a>
</li>
</ul>
</li>
</ul>

And here is how she looks without css applied

• Header One

  • link one
  • link two
  • link three

• Header Two

  • link one
  • link two
  • link three

• Header Three

  • link one
  • link two
  • link three

Apply the css below:

ul#listWrap {margin: 0; padding: 0; list-style-type: none;}
ul#listWrap h4 {margin: 0; padding: 0;}
ul#listWrap li {float: left; width: 120px; margin-right: 30px; padding-left: 20px;
border-right: 1px dashed #000; list-style-type: none; }
ul#listWrap li ul {margin: 0; padding: 0;}
ul#listWrap li#listCol3 {margin-right: 0;  border: none;}
ul#listWrap li ul li {float: none; font-size: 90%; border: none; margin: 0; padding: 0 0 0 10px;}

..and viola

Not that my 404 pages will ever be that small, but it is interesting (annoying) to note that if it’s under 512 bytes Microsoft Internet Explorer will display its own error page that includes a link to the MSN network search engine rather than your own custom 404 error page. The fun never stops - I wonder what browsers we would be complaining about had IE not eagerly assumed the role of ineptitude.

Here’s what I have been using on FF lately to help in my front-end development:

• Firebug I have come to love this tool. Its’ ease of use and editing features are a necessity.
• Web Developer This extension is another must. I use this in conjunction with Firebug as it offers different features.
• de.icio.us Not a development tool but it makes it easy to save and find pertinent web sites for development.
• Firefox Accessibility Extension Developers can use the toolbar to check their structural markup to make sure it matches the page content.
• PageDiff Helps web developers and designers to see HTML-code(text) differences between web pages.
• ColorZilla Get a color reading from any point in your browser.
• MeasureIt Draw out a ruler to get the pixel width and height of any elements on a web page.
• FireShot Creates and edits screen shots of web pages.
• View Source Chart Draws A Color-Coded Chart of a Web Page’s Source Code.
• Dust-Me Selectors Shows which selectors are not being used.

CSS Frameworks is a development process of breaking down style sheets into components that could be reused across projects. Blueprintcss is a CSS framework which aims to do this. BlueprintCSS also offers a easy-to-use-grid and there is actually a
Blueprint Grid CSS Generator as well. A cool Grid Bookmarklet is available here which is easily configureable.

The only tool I have for IE at the moment is for IE 6, IE Develper Toolbar, which I find very useful at times when IE 6 is doing its’ psycho thing.

Ever since the we all went table-less there have been varied ways to creates layouts. The purpose of this blog will be to point out ways that I have used and highlight some of the common resources online.

I have read a lot of books on CSS (reviews to come) and after I came to same conclusion as most all front-end developers to use floats over absolute positioning, I tried to settle in on a layout that was straight forward and stable. The choice to use source order (the code being linear, header to content to footer etc), was one of convenience to maintain. This implies not placing the content over the header and nav for SEO reasons (or whatever reasons). I feel that table-less involves so little code that source order still provides almost the same benefits (I assume this can be argued for serious SEO purposes).

Below is a example of the source order code that I use:

#pagewidth{}
#header{}
#wrapper {}
#leftcol {float:left;}
#twocols {float:right;}
#maincol {float: left;}
#rightcol {float:right;}
#footer {height: 1%;}
<body>
<div id="pagewidth">
<div id="header">
Header
</div>
<div id="wrapper" class="clearfix">
<div id="leftcol">
Left Column
</div>
<div id="twocols" class="clearfix">
<div id="maincol"> Main Content Column </div>
<div id="rightcol"> Right Column </div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</body>

Pretty basic and it has worked across browsers very well.

Other Online Layout Resources

• CSS Creator simple, source order
• CSS Source Ordered Generator Form Nice Layout Generator - many options
• Layout Gala great resource - heavily concentrated on negative margins - They work great cross browser and seem to be a great approach: however The straight forward approach I use above has worked just fine see below
• YUI Grids CSS Interesting approach by the Yahoo! Developer Network
• CSSeasy.com Has some great source order layouts - interesting cross browser css uses
• CSS tinderbox Layouts as well as a CSS Frameworks approach
• Boxed CSS Layouts using their “grid” approach
• Layout-o-matic Simple layout generator
• Fixed Width Layouts Source Order Layouts
• One True Layout™ - Interactive Example That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns. Interesting stuff - hardly used in real world

Although I have not seen many negative margin layouts used (maybe haven’t looked hard enough), at TJKDesign the benefits of negative margins are as follows:

• NO CSS hacks
• NO Structural hacks (for clearing
• NO IE/Win Conditional Comments
• NO Cryptic CSS rules
• NO Lengthy Styles Sheets
• NO “Best viewed in…” statements

Use whatever works for you. There is no right or wrong. Just get it cross-browser (or close) without tables and a minimum on filters/hacks