Dev.Opera takes us through some of the available enhancements that modern browsers are supporting such as Safari 3 and Opera 9.5 support for new CSS3 effects. Opacity, dropshadows and tiger-striping don't rely on javascript, but we still need to support browsers that don't use these new CSS3 effects.
Read the full article at Dev.Opera
The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other then just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.
There's a really nice interactive demo of how it works.
It has benn tested in Internet Explorer 6+, Firefox, Safari, Opera, and Netscape.
A very nice CSS framework, Boilerplate, is available from one of the authors of Blueprint CSS framework. Yes, it is simple, elegant and semantic like the logo says.
A recent project required me to develop a reservation data table that needed to be flexible enough across installs that we could quickly change the look and behavior of the table without touching any of the core code. Varying widths, colors, status background images, cell heights were just some of our requirements. All data is retrieved from a MySQL database via PHP. Varying cell widths based on the data made this even more of a challenge as well as each "available" time slot had to include a radio button for new reservations.
Sure, this can be done with CSS and HTML tables, but that's not as fun now; is it? Here's a mockup of the divs used in the project.
I start with a div container for the css table called "teetable". For each row, I wrap the CSS cells in another container called "teerow". From there I assign widths to the contained divs with a numerator at the end of the id. A cell that spans two slots has an id ending in -2 (teecell-2), one that spans three ends in -3 and so forth. I repeat this logic throughout the CSS table to get the desired results.
Example html:
<div id="teetable"><br />   <div id="teerow"><br />     <div id="teedate"></div><br />     <div id="teehead">One</div><br />     <div id="teehead">Two</div><br />     <div id="teehead">Three</div><br />     <div id="teehead">Four</div><br />   </div><br /> <br />   <div id="teerow"><br />     <div id="teedate">7:08am</div><br />     <div id="teecell-2" class="reserved">Some Data Goes Here</div><br />     <div id="teecell-2" class="reserved">Some Data Goes Here</div><br />   </div><br /> <br />   <div id="teerow"><br />     <div id="teedate">7:20am</div><br />     <div id="teecell-1" class="available">Some Data Goes Here</div><br />     <div id="teecell-1" class="reserved">Some Data Goes Here</div><br />     <div id="teecell-1" class="checked-in">Some Data Goes Here</div><br />     <div id="teecell-1" class="reserved">Some Data Goes Here</div><br />   </div><br /> <br />   <div id="teerow"><br />     <div id="teedate">7:30am</div><br />     <div id="teecell-4" class="reserved">Some Data GoesHere</div><br />     </div><br />   </div><br />
The underlying CSS looks something like this:
#teetable { width: 625px; margin: 20px 0 20px 20px; display: block; }<br /> #teehead { width: 125px; height: 20px; float: left; text-align: center; vertical-align: middle; background: #ccc; font-weight: bold; }<br /> #teerow { width: 625px; display: block; }<br /> #teedate { width: 125px; height: 20px; vertical-align: middle; float: left; background: #ccc; text-align: center; }<br /> #teecell-1, #teecell-2, #teecell-3, #teecell-4 { height: 20px; overflow: hidden; vertical-align: middle; float: left; text-align: center; border-bottom: 1px solid #666; }<br /> #teecell-1 {width: 125px;}<br /> #teecell-2 {width: 250px;}<br /> #teecell-3 {width: 375px;}<br /> #teecell-4 {width: 500px;}<br /> .available { background: #fff; }<br /> .reserved { background: #009966 url(images/reserved.gif); }<br /> .checked-in { background: #33CCFF url(images/checkedin.gif); }<br /> .available { background: #fff url(images/available.gif); }<br />
The beauty of this really lies in the PHP that grabs the rows from the database and loops through building the div id's. I have a database table that holds the number of people for each time slot. There is no maximum number of people, but the grid will only show four slots. With a little switch/case, we're off and running with a dynamic CSS data table. All teecells are suffixed with -1, -2, -3, -4 based on the number of people. Remember, our -4 means the cell spans across our four columns.
Based on if the time slot has checked in, is available, or is reserved, a simple if statement throws the table it's style for the background.
if ($res->checkin == "") { <br />     $class = " class=\"reserved\""; <br /> } else { <br />     $class = " class=\"checked-in\""; <br /> } <br />
I cannot provide the full working code, but there is a zip file containing the html and css for this narrative. If you find it useful, drop me a line and let me know what you're using it for.
The latest IE7 beta 2 Preview is available here at Microsoft.com.
You must uninstall any previous IE7 installs before installing.
The <ul> bug has been fixed in this version, but sites such as rails.techno-weenie.net still don't display properly.
UPDATE: They may have fixed this bug, but they really fubarred the back and forward buttons.. what a mess. This isnt a beta, it's more like an alpha.
For everyone out there running IE7 beta, the <UL> tag is causing articles to grow inside typo templates causing scroll bars to appear. This can be seen when using the orgami template. The extra size in very small but is just enough to make the bars appear. I will add a list in this example to show to end result. Hopefully microsoft will fix this bug before release since no other browsers, including IE6, have this problem. If you wish to run test to tests with both ie6 and ie7 and don't have virtualpc, there is a way to run ie7 as a standalone app.
UPDATE: IE7 beta 2will be refreshed this week, not like that's all that big of an update, but the important part is the rendering engine is finalized so this bug should dissappear as of the end of the week. let's keep our fingers crossed. Maybe they'll actually by web 2.0 & css2 compliant now.. rofl :)
NOTE: You will only see scroll bars here in IE7
- Item 1
- Item 2
- Item 3
