Comments on: Horizontal Tabs – CSS Video Tutorial #2

By: Phil

Phil — Mon, 25 Aug 2008 12:18:20 +0000

Abyot, so glad it helped you out. I should do more tutorials like it. Thanks!

By: Abyot

Abyot — Mon, 25 Aug 2008 06:08:23 +0000

Thanks Phil this is really great and was helpful.

By: 10 Reasons to Use List-Item Tags : Thought Sparks

10 Reasons to Use List-Item Tags : Thought Sparks — Tue, 09 Oct 2007 11:02:48 +0000

[...] Lists are flexible for styling. By assigning classes to lists, the list can change it’s display without changing the content. A good example of that is illustrated in the post Horizontal Tabs – CSS Video Tutorial #2. [...]

By: Phil

Phil — Tue, 11 Sep 2007 13:51:31 +0000

Sam, If I have time later I’ll look more into it. Thinking about tweaking a new template design in blogspot for folks to use the elements. We’ll see if I get to that soon. In terms of templates, widgets etc. There are a plethora of them with WordPress, no contest there. The bandwidth issue is one to note, but if you have that problem, hopefully some ads/donations will help off-set the cost. That’s what I’m hoping to cultivate in the right manner. In the long-run I think you’ll be pleased to take the step. I certainly appreciate the issues.

By: Sam Chan

Sam Chan — Tue, 11 Sep 2007 13:32:38 +0000

Phil, Thanks for the suggestions. I had made some changes but I still find that IE display padding is more at the bottom of the tab compare to Firefox browser.

The idea of hosting on another domain and using Wordpress indeed has more advantages. However, blogspot also got it benefits such as unlimited bandwidth and Google widgets and templates. Anyway, I might consider your suggestion about hosting on another domain in the future.

Best Wishes

By: Phil

Phil — Tue, 11 Sep 2007 11:24:36 +0000

Sam,
Looking at your code, it seems that your styles are unnecessarily complex. In cases like these you have styles working against one another which returns unpredictable results in the two browsers. The example I gave opens the same in either browser.

It looks like you’ve set the padding for “#nav-menu li to” “0″ and made padding adjustment for “#nav-menu a” as “0px 6px 3px 6px; ” Without doing any troubleshooting, cutting the padding from “#nav-menu a” and pasting into # “nav-menu li” which would follow more closely the example I gave.

CSS is deceptively simple, however if consecutive changes are made, over time it gets overly complex. Let me look into doing a template in blogspot with tabs such as you are wanting and then post that for viewing. Beyond that, let’s get in touch off-line to do more troubleshooting.

Sometimes in cases like these, I start from scratch and rebuild with the new changes. While that may take a little time, you may consider doing just that. In the greater scheme of things, I think it’s time to consider moving away from blogspot as you will have much more control for layout with a WordPress install. Given the amount of time you spend on your blog, it really would be worth it.

By: Sam Chan

Sam Chan — Tue, 11 Sep 2007 06:03:36 +0000

Hi Phil,
Although I had managed to get the tab out in my blog, it is still not working very right. The padding doesn’t work. The size not the same with IE compare to Firefox or Opera browser. Besides, I am not able to use the entire width of the body for the tabs. Do you have any hints or tips?
Thank you.
Best Wishes

By: Phil

Phil — Mon, 10 Sep 2007 17:32:36 +0000

Jen, glad to help as always.

By: jennifer

jennifer — Mon, 10 Sep 2007 17:25:22 +0000

Hi Phil…

Thanks for your help!

I’ll keep reading!

By: Summary for the week ending 9/9/2007 | Port 16

Summary for the week ending 9/9/2007 | Port 16 — Mon, 10 Sep 2007 11:23:27 +0000

[...] Phil over at Thought Sparks, started posting a CSS tutorial. Part 1 – The Body Tag, Part 2 – Horizontal Tabs. Really good [...]