Category Archives: css

HTML Markup Of An iPod Touch

Lack of standardized support for round corners in CSS has been a pain and there are more than several dozens of solutions out there on the web that vary in their solution approach

* using images to not using images as background
* even the number of images used
* providing anti-aliasing and the lack of it
* using sprites to create round corners with larger radius

There is also a mozilla specific extension called -moz-border-radius using which round corners can be created, but it’s specific to Firefox.

What if you want to represent an iPhone or an iPod Touch as a HTML markup? At iPodish, a stylish electronics rating website, that’s pretty much the attempt. While it doesn’t look exactly like the photo of an iPod Touch, I guess that’s pretty much what can be done with the current level of round corners support in CSS.

Advertisements

Leave a comment

Filed under css, round corners

DIV:HOVER IN IE

I have a link element that contains a div element. My requirement is to change the background color of the div element whenever the mouse is hovered over the link. So, initially I tried

div:hover {
background-color: #abcdef;
}

This works fine in Firefox. However, IE doesn’t like the hover pseudo class for anything other than an “a” element. So, after a bit of tinkering, I got it working with

a:hover div {
background-color: #abcdef;
}

This works in both IE and Firefox. One thing though, the DIV element starts changing color whenever the mouse is hovered not just on the DIV itself, but on the A element itself. So, if the DIV happens to be covering the entire A area, then it’s not a problem, but otherwise, depending on the usecase, this may or may not be an acceptable solution. In my specific case, it is an acceptable solution. So, I am done further research on how to get the DIV to change the color when only that element has a mouse hover in IE.

12 Comments

Filed under css

Float Behavior With Ads

When embedding contextual or non-contextual ads in a page, if you want to get the float behavior (where the ads are displayed with rest of the text on the page surrounding them both in the side and in the bottom), then it’s going to be tricky. Most of the ads are displayed in an iframe and further, the ads are displayed using a javascript and not by putting the iframe directly.

For example, this Notebooks page displays AuctionAds embedded within the surrounding context. The way to achieve this is to have

iframe {
display: inline;
float: right
}

in the main page. The css float concept is very useful to make the page estate well utilized.

Leave a comment

Filed under css

Hiding multiple rows in a TABLE using TBODY

Why would you want to do this? I had a form, where one of the fields is a poplist and picking a value will need to render/hide additional fields. For example, a field indicates vehicle type, depending on whether sedan or coupe or a pick up truck, the subsequent fields may need to change. So, now that we have established a clear functional requirement, let’s move on to the technical feasibility.

I always wondered who would really care about THEAD, TBODY and TFOOTER. But then, today I learned there can be multiple TBODYs in a table. But before that, my naive implementation of achieving the above requirement was to put all the fields that need to be hidden/shown into a nested table and hide/show it. The only problem and a big one with that approach is that it doesn’t align the prompts of the fields in the nested table with the outer table.

That’s when I tried exploring a bit more, and finally found on some advanced techniques with tables at http://msdn.microsoft.com/workshop/author/tables/tables_overview.asp

So, promptly I tried what was suggested in that article, i.e., to use tbody for the subset of rows that need to be hidden and it worked just fine on IE. But not so on Firefox.

Then, more searching and ended up with
http://codebetter.com/blogs/steve.hebert/archive/2006/05/23/145344.aspx
which suggested using “display:table” instead of “display:block”. I tried it but no luck. It doesn’t work in IE as well.

More research and finally, it worked with “display:table-row-group;” more about which can be found at
http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group

This works for Firefox, but not IE. So, I had to end up with browser specific code to set it to either table-row-group or block.

Leave a comment

Filed under css, DHTML