[thelist] CSS again: suspected IE funkiness on inline UL

Sarah Adams mr.sanders at geekjock.ca
Tue Dec 19 11:58:12 CST 2006


> Is CSS really this complicated? I mean, I'm new at this kind of thing,
> so I'm not entirely surprised that I'm not finding the problem. But when
> I've clearly identified that the problem is *not* the navigation code,
> which works *perfectly* in the source page, but when copied *verbatim*
> to my page, breaks - well, it seems like everyone is trying to solve the
> wrong problem, or just plain guessing.

As others have mentioned, just because you copied the navigation code
verbatim doesn't mean it should look exactly the same as it does in the
source document. The surrounding HTML and CSS are likely interacting
with the list's HTML and CSS to create this problem.

Try breaking down your page a bit at a time to help you figure out which
element(s) and/or style(s) are contributing to the tab border problem.
You can either do this by removing parts of the page one at a time until
you get down to just the tabbed list, or by removing everything but the
tabbed list and adding elements back in one at a time. Each time an
element is added or removed, refresh the page to see what, if any,
effect it had on the tabbed list and the border problem. When faced with
such a CSS problem, if simple problem solving doesn't help me I always
use this method to solve it (or at least give me a clue).

A really useful tool is the DOM inspector, which is available as an
option at install in Firefox, or for IE try the IE Developer Toolbar:
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en
or, also for IE, there's the Web Accessibility Toolbar (although it
doesn't include the DOM inspector):
http://www.nils.org.au/info.aspx?page=614
Both toolbars have similar features to the previously-mentioned Web
Developer Toolbar by Chris Pederick.

Here's a quick intro to using the DOM Inspector (in Firefox, anyway):
http://24ways.org/2005/debugging-css-with-the-dom-inspector
Trust me - once you start using it, you won't be able to stop!

> Again, I'm just trying to get my head around the big picture: is CSS
> really a matter of guessing, twiddling, and voodoo? I do understand that
> IE is a massive PITA and that, sometimes, the rules don't apply. But can
> it really be this random?

When you consider the complexity that can be achieved in your HTML and
CSS, the cascading of many style definitions that are applied to each
HTML element, and then throw in the differences in rendering in each
browser and mode, it's not surprising that it feels like there's some
kind of crazy magic going on behind the scenes :)

> I hope you'll pardon my frustration; some of its source is purely
> personal; my wife has spent much of this year in hospital, was, for some
> time, near death, and had what we hope was a final operation today,
> resulting in a couple years of convalescence, and an eventual return to
> nearly complete health. I haven't been able to look for a regular job
> since the company I used to work for closed down, since I'm needed here
> at home to help care for our two-year-old, so my only hope of making a
> living is to apply the web skills I thought I had. Yet, at every turn,
> it seems like they're rudimentary at best; not a huge lift to the
> spirits when you've pinned all your hopes for providing for your family
> on what turns out to be a deep and abiding mediocrity.

The CSS will become easier with time. You just need to expose yourself
to it a lot - by reading thelist, industry articles, etc, viewing source
(both HTML and CSS) when you see a site using CSS in a way you'd like to
try, and experimenting when you have the chance. Also, try some
relaxation or meditation so that those times when the CSS just doesn't
seem to work, your frustration doesn't make you want to tear all your
hair out :) Don't be hard on yourself - CSS can be very simple if you
don't need to do a lot with it, but it has the potential to be extremely
complex, so it can be tricky to learn.

Take care, hope things improve for you soon!

-- 
sarah adams
web developer & programmer
portfolio: http://sarah.designshift.com
blog: http://hardedge.ca



More information about the thelist mailing list