Here’s The Problem

ie-css-min-height-hack
This is how normal people horizontally center block elements using CSS: You slap on a width (I mean, that should be obvious enough right?). Then you set the left and right margins to auto, and Voilà, centered!

body #box {
	margin: 0 auto;
	width: 780px;
}

Well except in Internet Explorer and some older browsers.

Fixing The Problem

This one is a bit nicer than the CSS min-height hack. You need to use the text-align property to center for the element above, because Internet Explorer sucks and doesn’t understand the auto margin. Now too fix this, you need to reset the text-align to left.

body {
	text-align: center;
}

body #box {
	margin: 0 auto;
	padding: 56px 0 20px;
	width: 780px;
	text-align: left;
}

That’s it folks!

• Make Your Web Site Not Suck In Internet Explorer – IE CSS Min-Height Hack
• Create 3 Column CSS Layouts Like A CSS God!
• I Think I Owe IE 6 An Apology, Nah.
• Browsers Have Multiple Personalities, Your Designs Should Too
• HSBC Direct Doesn’t Support Firefox 3.0 – Another Reason To Dump IE 6.0

The Min-Height Problem

I know a lot of you have had this problem in the past. It’s gotten so bad for me that, at one point, I’ve just stopped using them. Bottom line, Internet Explorer pretends it doesn’t see the min-height property. It uses the regular height property as a min-height. Confused? Let me make it a bit simpler:

Firefox

The height property is a fixed size. It doesn’t shrink and it doesn’t expand with content.

The min-height property is exactly what it says: it gives the element a minimum height, but it still expands with the content of the element. It’s perfect for if you have an element that will just look totally ugly if you it’s empty.

Internet Explorer

The height property is interpreted as a minimum height, funny enough. Doesn’t that suck?

IE CSS Min-Height Hack

But here’s the good news, there’s a fix/hack. Now mind you, there are tons of different ways to get around this issue. There’s conditional IE tags, there’s Javascript hacks, etc. I’ll focus on two, which I like. So here’s what we’re working with:

#box {
	min-height:100px;
}

Solution/Hack One

Since, IE doesn’t understand min-height, we have to force a regular height on the element that the other browsers can’t see:

#box {
	min-height:100px;
}
/* mac hide \*/
* html #box{height:500px}
/* end hide */

To me personally, this feels right (because we’re doing something specifically for IE and hiding it from other browsers), except for one thing: it involves two hacks. As the comments suggest, IE 5 (I think) for MAC does implement the height property correctly. This just gets worse and worse, doesn’t it?

Solution/Hack Two

#box {
	min-height:100px;
	height: 100px;
}

html > body #box {
	height: auto;
}

Here’s the explanation: We set min-height for Firefox (and other well behaved browsers), then we immediately set the height property so that IE can be happy. This has the effect of, essentially, defeating the purpose of min-height for the proper browser. We then use the CSS child selectors (which, conveniently IE can’t see), to set the height back to auto and make everyone happy.

There’s a slight problem when using 100% heights that I don’t really want to get into, but you can see a fix for it here.

Why I love this hack, is because it’s a little bit cleaner. But the really great part about this is that, because we only set height to auto as a fix, we can fix multiple elements all in one line:

html > body #box,html > body #box2,html > body #box3,html > body #box4, html > body #etc {
	height: auto;
}

Well folks, there we have it. The nasty subject of CSS hacks. Hope this helps.

• IE Hack: CSS Centering – Another Reason I Hate Internet Explorer
• Internet Explorer 8 – The Drama Begins
• Browsers Have Multiple Personalities, Your Designs Should Too
• 5 Ways To Annoy Your Audience
• I Hate Internet Explorer 6.0 Even More

<div id="header">header stuff</div>
<div id="left">left stuff</div>
<div id="center">center stuff</div>
<div id="right">right stuff</div>
<div id="footer">footer stuff</div>

Simple enough right? The alignment is done in your style sheet, where the left would float left, the center would also float left and the right would float right.

You could set all your styles based on these column ids. Whether it’s background images or just background colors, the sky’s the limit here. But here’s the kicker: your column heights are all dependent on how much text you have in each div. Leaving you with a messy, uneven mess.

Wrap It Up Before Messing With CSS

There’s the easy way and there’s the hard way, which a lot of people mistake for the right way. If you’re looking for the hard way, then you need to look somewhere else. Try Googling “3 column css hack ie ns, oh crap this doesn’t look right, wtf”. That should lead to to the pain that you searching for.

On to the easy way: Wrappers, wrappers, wrappers. No, I’m not talking Biggie and 2Pac, I’m talking about wrapper divs (just as cool as Biggie). The good news is that all the HTML stays the same. You simple wrap the left, middle, and right in three wrapper divs: wrap-left, wrap-middle, wrap-right. Now here’s the magic.

All your backgrounds are going to be set in those wrapper divs, that’s all:

#wrap-right{
padding: 0;
margin: 0;
/*margin-left: 3px;*/
width:100%;
background:url("../images/right.gif") repeat-y top right;
}

#wrap-left{
padding: 0;
margin: 0;
width:100%;
background:url("../images/left.gif") repeat-y top left;
}

#wrap-middle{
padding: 0;
margin: 0;
width:100%;
/* notice middle image starts at 198px - where left would have stopped. */
background:url("../images/middle.gif") repeat-y 198px 0px;
}

That’s all there is to it. This works fine with background images or simply colors.

Theoretically, this could be simplified even further to use one wrapper div if we have one background image that spans the entire length.

Finally on DreamHost and Loving you Dreamhost. You should check them out!

• Round Corners With jQuery and CSS
• IE Hack: CSS Centering – Another Reason I Hate Internet Explorer
• Joomla Template Tip: Optional Modules
• The Lazy Developer’s Way to Rounded Corners in CSS – Rounded Corner Generators
• CSS Column Layouts

Happy July 4th to all you guys.

Source: Accessible expanding and collapsing menu [456 Berea Street]

• The Secret of Cancelling and Stopping Events using JavaScript
• Web 2.0 Buttons On The Fly
• Very Fancy Menus – CSS And JavaScript
• How To Make PayPerPost and Google Adsense Play Nice – MightyAdsense Plugin Hack
• CakePHP 1.2 Beta Released Fresh Out of The Oven – Happy New Year

A lil’ PHP and GD2 sure does go a long way these days.

• Review: StaticPageBuilder
• Fixing the Back Button and Enabling Bookmarking for AJAX Apps
• JavaScript Reflection – Wet Floor Effect
• Dynamic Paypal Buttons via Javascript
• SEO Inc – Search Engine Optimization Company

All done with CSS And JavaScript. The implementation is also brilliantly simple. And it all fits in 1.5KB. What’s to lose?

By the way, you can’t tell by the image, but the image under that travel menu; it moves with the mouse hover. Check it out: Facny Menu.

• LightBox, LightBox2 and LightBox Plus
• JavaScript Reflection – Wet Floor Effect
• Incredible Expanding Menu
• LinkMania: December 3, 2006
• More JavaScript Reflections – Automated JavaScript Vertical Flip Image Reflection

Here we go again, the age old story. Do we use plain old HTML Tables or do we invest the time and energy into learning and using CSS properly? Duh, it’s not even worth saying anymore. Tables suck, tables have always sucked. The only thing that keeps tables going for so long is their ease of design.

More Evidence

Tables Bad, CSS Good… tells us, again, why we should us CSS whenever possible:

• Search Engines: I have redesigned many websites eliminating tables and placing all links in unordered lists and have seen there search engine rankings improve drastically.
• Compatibility: Remember that in today’s day and age websites are being viewed on everything from 60 inch plasma TV’s to 3 inch cell phone screens. If you assign a table a width of 780 it becomes near impossible for visitor using a handheld device to view your website.
• Accessibility: People with disabilities have the right to enjoy the web! If your website uses tables a visitor using an audio browser is going to have trouble accessing your website. Go ahead and try to use your website with and audio browser…

Still having doubts; I really don’t know what to tell you right now. Just get over yourself and grab hold of CSS with both hands and promise never to let go ever again.

• Samsung t509 vs. BlackBerry Pearl – No Contest
• SEO Inc – Search Engine Optimization Company
• Joomla Template Tip: Optional Modules
• Top 5 Basic SEO Tips – You Can Do These Yourself
• Website Promotion with DiscountClick

Rounder corners are developed using, rounded corner images of course, CSS style to set those images as backgrounds, and the content of the box surrounded by a number of divs. You need one div for the content of the box. Then you need two divs above that, for the top corners and two below it, for the bottom corners. Should be simple enough right?

Well if it’s not, here are a couple of Rounded Corner generators that you can use to slap together the code really fast. The even generate the images for you if you don’t have your own.

• Corner Shop
• CSS Rounded Box Generator

[tags]css, rounded corners[/tags]

• Round Corners With jQuery and CSS
• Nifty Corners: Rounded Corners Without Images
• Create 3 Column CSS Layouts Like A CSS God!
• Top 5 Basic SEO Tips – You Can Do These Yourself
• To Suck or Not to Suck, That is Question for JavaScript

Once again we bring together JavaScript and CSS to produce amazing results. Notice the header at the top of this website (assuming that I haven’t impulsively changed my theme again)? Nice basic reflection, right? It’s commonly known as the Wet Floor effect. I can just hear the Photoshop folks now, “what’s so impressive about that?”. Well seeing that I lack a lot in the Photoshop field it took me about 30 minutes to get this to look even reasonably good. But I did not have to go through all that trouble.

Reflections.js provides a simple method for web developers to do this. I haven’t had too much experience with this other than just basic demos but I am again amazed at the power of JavaScript and CSS. You include the JavaScript and for each image you want to add a reflection to you add:

class="reflect"

. That’s it. It almost seems too simple doesn’t it?

• More JavaScript Reflections – Automated JavaScript Vertical Flip Image Reflection
• SEO Inc – Search Engine Optimization Company
• Very Fancy Menus – CSS And JavaScript
• Optmize Images for the Web
• Give Me 15 Minutes and I’ll Make You A jQuery Expert

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Have you ever gone to a website and seen this nice lil’ thing they do when you click on a thumbnail and it pops up a larger image in the same browser window? That’s LightBox. I’ve seen it before and I haven’t given it a lot of thought. I just naturally assumed that it would take too much time to implement, so I left it alone. Oh was I wrong.

In the HEAD section of your HTML code.

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

	<script type="text/javascript" src="lightbox.js"></script>

To use it, simple add rel=”lightbox” to any “a” tag linking to an image file:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

As you can see, you can have pure text in the link tag or a thumbnail image like most people do. Yep, that’s it. Your website is covered with a grayish transparent background image and looks as if it’s disabled. There is an animated GIF (can be any AJAX-like indicator you wish) that pops up while the image is loaded, then Voila. Very sweet lil’ script. Of course it’s backwards compatible with browsers with JavaScript disabled. It’s just an “a” tag after all. There is also support for the transparent PNG file in IE 6. Do check out LightBox JS.

There are variations of this script. Lightbox JS v2.0 has a more AJAX-y feel to it. The image box pops up and closes in a nice fluid motion. It includes one more JavaScript include for this though. They also added image grouping, where you can go from one image to the next while the pop up is still enabled.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Over this past weekend is when I had my first experience with the LightBox script. I tried using version 2 for a particular application and one problem I had was what happened when images were two large for the screen. Well, it loads the entire image like you tell it to and the user then needs to scroll throughout the page to view the image. Some may simply say, create you images to an acceptable size, but the application I was using didn’t offer than flexibility. The images I would be serving came from the user. And only God knows what users have in mind for your application. Enter LightBox Plus. This loads the image and fits it into the appropriate screen size and adds a resize feature to enable the full size of the image. When you resize is activated the user can then use the mouse wheel to zoom in and out.

Behold, the marvels of JavaScript and CSS. We are definitely taking huge step into Web 2.0.

• Comparing Lightbox Scripts
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• Optmize Images for the Web
• WYBISYG – What You Bake Is What You Get – CakePHP + FCKEditor
• Top 10 CSS Image Galleries – DIY

Now comes another problem. Rather a solution that causes a problem. Most people fixed this resolution issue by slapping on a fixed layout. Now fixed layouts have their pros and cons. The pros are, you know exactly how it will look every time. You know where every thing will be on the website. One major con, I experienced at a friend’s house. He had just gotten a brand new 21″ flat panel monitor and everything looked so crisp. After a couple hours of playing, Wolfenstein: Enemy Territory we were just browsing the Internet and I just asked him to check out my latest post at the time. When he did I was horrified. My beautiful fixed width 787 pixel layout, which looks just brilliant on my 17″ at home, still looked brilliant here, but it was so bloody small. I mean the thing was tiny and scrolling took forever. Yeah, we would have had to scroll a lot on a smaller monitor but since we have this huge one, why should we. There was just so much wasted screen space it annoyed me. You could almost fit a whole other site right next to mine.

When I went home, I said goodbye to the fixed width layout and picked up a fluid one. And I must say, I’m kind of in love with this one. Whether 800 pixels or much higher, everything just stretches out to fill the screen. Sometimes you scroll, some times you don’t. So first off, I’d like to apologize for all my visitors with large fancy monitors, I did not know what you were going through. The other issue is that blogs are less affected by this screen resolution thing for two reasons. First of all, blogs are meant to be read. Therefore the less vertical eye movement the user has to do easier it is on his eyes. A blog is less about graphically and structural presentation and more about reading the text. I’m not saying blogs should be ugly, I’m just saying you don’t need to hook the visitor with too many pretty pictures to get their attention. The second reason is that, a lot of blogs don’t even get visited anymore. With the advent of RSS feeds a lot of people don’t even know what the home page of the blog looks like. RSS feeders just feed straight text and it fills it out however your reader is configured to.

Now because the fluid layout is so great, you know there’s going to be a catch right? The main issue, for me anyways, is getting it to have a minimum width. I mean, there is a point where you just don’t want your website getting any smaller. After all, the main reason we’re using this fluid layout is so that things get expanded. Enter the problem of CSS and the min-width property. This is an entirely different post all on its own, so I’ll leave it as that.

Anyways, tell me how you guys like the new layout. Love it, hate it, I wanna know.

• Websites on Wide Screen – How The Other Half Lives
• Yay! Wordpress 2.5. Almost Perfect
• I Think I Owe IE 6 An Apology, Nah.
• Dclick Ads – Another Quick Start Up Advertising Site
• Joomla Template Tip: Optional Modules

CSS code should be laid out and structure just like any other code we write. Emil at Friendly Bit has a detail article on how to structure large CSS files. He mentions five (5) main methodologies:

1. Order your selectors like the HTML
2. Always use the “full path” to elements
3. Indent your code cleverly
4. Each declaration on its own line
5. … in alphabetic order

• Make Your Web Site Not Suck In Internet Explorer – IE CSS Min-Height Hack
• Foundation for an Extensible Website Engine with PHP 5
• Can AJAX Completely Replace PC Software?
• Dynamically Loading CSS Files
• Round Corners With jQuery and CSS

• New HTML Group Reinventing HTML
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• Job Update – Part 1
• Top 10 CSS Image Galleries – DIY
• LightBox, LightBox2 and LightBox Plus

Why CSS? CSS is light and clean and it’s HTML standard. Some of these methods require a tad bit of JavaScript.

Please note, however, that you need to have all of your images ready to go. You need your thumbnails, your display images and your large images. These are not scripts, they are Do It Yourself galleries so they don’t create thumbnails for you or anything like that.

Alex at YouNeed2See Technology has a nice list of these galleries. Go check it out.

• LightBox, LightBox2 and LightBox Plus
• 6 Places to Use Ajax
• Google Picasa Typo
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• WYBISYG – What You Bake Is What You Get – CakePHP + FCKEditor

• Optmize Images for the Web
• IE Hack: CSS Centering – Another Reason I Hate Internet Explorer
• Making Sure Your Javascript Doesn’t Rise When Baking
• Give Me 15 Minutes and I’ll Make You A jQuery Expert
• Create 3 Column CSS Layouts Like A CSS God!

Alessandro Fulciniti writes:

This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube.

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn’t requires images, extra markup nor CSS. Let’s start.

Give them a look see:

Nifty Corners.

Source: Blogging Web 2.0

• The Lazy Developer’s Way to Rounded Corners in CSS – Rounded Corner Generators
• Round Corners With jQuery and CSS
• Web Development 2.0 Carnival – September 24, 2007
• Fixing the Back Button and Enabling Bookmarking for AJAX Apps
• Getting Paid to Blog

I’ve seen dynamic CSS elements before, but not an entire CSS file. Are you thinking what I’m thinking? Printer friendly versions. The code may have to be tweaked to be able to switch between style sheets though.

All in all, it seems like an excellent idea with a lot of potential.

Original Source Article

• Structure CSS Files
• Joomla! 1.0.4 Security Release Out
• Top 5 Basic SEO Tips – You Can Do These Yourself
• Round Corners With jQuery and CSS
• Nifty Corners: Rounded Corners Without Images

• Fixed vs. Fluid Layouts and Screen Resolutions
• Websites on Wide Screen – How The Other Half Lives
• Joomla Template Tip: Optional Modules
• I Think I Owe IE 6 An Apology, Nah.
• Create 3 Column CSS Layouts Like A CSS God!