Unintentionally Blank

A little CSS bug that affected me twice recently. I had to create a news ticker (so 1990s, but not my design) and an image slider, both which did the same thing; moving information from one side of the screen to the other. The important part was, at some point the news or the images would disappear, seemngly sliding underneath the next part of the page. Of course, this worked in all browsers but every developer’s favourite, Internet Explorer 6. Let me explain why this was happened and what I did to fix it.

The Problem: Position Relative

In order to create the effect of moving both the news ticker and the images, I set up something like the following:

<div id="slide_frame">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>

With the following CSS:

#slide_frame { width:300px; }
#slide_frame ul {
list-style-type:none; position:relative; width:600px;
}
#slide_frame li { float:left; padding:0 5px; }

The sliding was done with JavaScript, jQuery, which I am falling in love with, as it happens, and the result was fine in all browsers but IE6 where both the news ticker and the image slider remained visible at all times.

The issue, it seems, comes down to the <ul> being positioned relatively, which had to be done, so that the JavaScript could move it about. Removing the position hid the out of shot part of the list but meant it wouldn’t move anywhere.

The Solution: Position Relative

Thankfully, this turned out to be an easy fix! In order to make IE6 behave all you need to do is apply position:relative to the containing <div> as well. Don’t go around playing with z-indexes like I did for half an hour anyway!

I have provided an example of the problem, with the fix to show what should be happening. Interesting point for those of you with many, many versions of Internet Explorer at your disposal, IE5 and 5.5 are not affected by this issue.

So, don’t get caught out by hidden overflow and relative positions again, just position your container relatively too!

I recently discovered that Opera Mini, the mobile browser for those of us without iPhones, had not only released its 4th version, but that, like mobile Safari, had killed off handheld style sheets in favour of media queries. This brought about quite a positive response from Russell Beattie, who thought that media queries are “a much better way to specify formatting” as well as worried thoughts, again, from Christian Montoya.

Before I came to any conclusions, I wanted to try out what you could do with media queries first. Currently Safari 3, Opera 7+, Safari on the iPhone and Opera Mini 4 support media queries and all other browsers should ignore them. Our favourite exception to every rule, Internet Explorer does have problems with them though, occasionally applying rules regardless of whether they apply. Opera provide a very good explanation of why and how to avoid this with safe media queries.

3 Columns, 2 Columns, 1 Column - The Choice Is Your Viewport’s

Not the catchiest of phrases, but the first application I thought media queries, essentially if statements on the size of your browser’s viewport, were perfect for was site layout. 3 columns isn’t much use on a mobile device, but one column looks silly when you’ve got 1024 pixels of width, so why not have both?

So, I stole Eric Meyer’s example of Any-Order Columns, changed the sizes up to pixels to make everything easy (center column 500px wide and columns 2 and 3 both 200px wide) and applied the following CSS:

@media all and (max-width: 899px) {
#block3 {
float:none;
clear:both;
width:100%;
left:0;
margin-left:0;
}
#block1 {
margin-left:0;
}
}
@media all and (max-width: 699px) {
#block1 { width:300px; }
}
@media all and (max-width: 499px) {
#block1 { width:100%; margin-right:0; }
#block2 { width:100%; float:none; clear:both; }
}

This says that, at viewport widths of 900px and above you will see 3 columns, between 900 and 700px wide you will see 2 columns and the 3rd column drop below to take up 100% width. Then, between 700 and 500px, the main column shrinks to 300px to fit and finally at below 500px of viewport width you will see one column with the content all in order (there’s a reason I chose Any-Order Columns!).

You can see my example in Safari 3 or Opera 7, 8 or 9 or even the Opera Mini simulator. Viewing it in any other (major) browser would just appear to give you three columns 900px wide.

Findings

Disappointingly you have to refresh to get the effect of the media queries, rather than just resizing your browser. However, for such a simple example I thought it worked quite effectively. It allowed the test page to be displayed ideally depending on the size of the screen, giving a third option for the future for those constantly stuck between fixed or liquid width layouts. I also liked that when you view the page in Opera Mini there was no need to zoom in. Even though the display of full web pages and the zoom is one of the little browsers strongest points, not having to zoom because the page is already formatted for the small screen makes it even easier to surf.

I still have more to consider about the potential of these media queries in general, but in the future, as the number of different screen resolutions and the number of browsers supporting media queries grow, this is something I would consider again. What do you think? Is this potential, something to start using now or something to forget?

Transparency can add something beautiful to a design. Randa Clay thought so whilst designing her first WordPress theme and I have been considering something very similar for a design that has been going round in my head recently. Randa’s problem was that making the background of a <div> transparent so that the page background could be seen through it caused everything within the <div> to be transparent to the same degree, including text and images.

Transparent post level images aren’t desirable, so I set about finding out how best to apply the transparency to the <div>. Here are my results:

Continue reading “Cross Browser Background Transparency With CSS” »

I like MyBlogLog, it’s come under some stress recently, which I’m not going to bring up, but I like it. I particularly like the recent readers widget, I installed mine as soon as I could after signing up. There is only one thing I don’t like about it, the default widget is ugly. That’s why I spent a bit of time with the CSS and made mine fit in with the rest of my sidebar. This is the first part of two on how to make your widget better looking.

Continue reading “Making MyBlogLog Pretty: How To Style The Recent Readers Widget” »

Web standards are the backbone of the internet these days. Well built, good looking sites with semantic, valid mark up for the content and CSS controlling the design mean that pages render as they should for all users. Thanks to the W3C the web is a better place for all of us. Or is it?

Continue reading “How Many Web Designers Does It Take To Change A Lightbulb?” »