A Nightmare on CSS Street
ShishaNites.com has required a new website for a while now, one that incorporates the look and feel of TheShishaShop.com’s site (as it is afterall a spin-off). To make the site easy to update however, it was decided that a simple CMS should be used to easily control the content (using Pages) and blog format for the Latest News section.
With the introduction of the latest version of WordPress (2.1), it is now possible to set any page as the homepage, not to mention 550 bug fixes, it qualifys as the selected package.
So work was underway to work on a new template system. Luckily, the Wordpress template site features a huge amount of freely downloadable pre-made templates. A few where chosen that closly matched the 3 column system required and the editing process had begun.
It was clear at this point however that WordPress uses CSS extensively to layout the site. This has its advantages as well as its disadvantages, especially as the rest of the portal is based around tables, keeping consistency may cause a slight problem… Once this section is complete, it may lead for the rest of the portal to become completely CSS based allowing fo more lighter code, however thats something to persist in in the future.
But what is life without problems? First CSS issue came up within the footerwrap tag, defineing a fixed height was proving to be very difficult within a cross browser environment, i.e. IE (pun intended). Luckily, Google came to the rescue with a link to the Prop-Clear: CSS min-height hack
In normal use, the prop will extend beyond the bottom of the box because floated elements are partially removed from the flow of the document. I say “partially” because there is still a way we can use the floated element to determine how high the enclosing element should be. The way is to add the next part of this hack: something for our prop to push down on. We need the
overflow:hidden;style since MSIE refuses to automatically makedivtags less than1emhigh when in Standards Compatible mode.
View the CSS code block here
Lets see if we bump into any more CSS problems anytime soon, its still early in the theming process ![]()