Hi,
Sorry I guess these are fundamental basics but I’m a little foggy on this.
I wanted to submit a design to CSS ZEN GARDEN.
[FONT=“Lucida Sans Unicode”][SIZE=“3”]I can not edit the HTML & can only edit the CSS file.
The problem is I’m trying to create an inline list of block elements
with all the li items to have the same uniform height. But is creating the a dip breaking the design.[/SIZE][/FONT]
<ul>
<li><a accesskey="n" title="View next set of designs. AccessKey: n" href="/"><span class="accesskey">n</span>ext designs »</a> </li>
<li><a accesskey="p" title="View previous set of designs. AccessKey: p" href="/">« <span class="accesskey">p</span>revious designs</a></li>
<li><a accesskey="w" title="View every submission to the Zen Garden. AccessKey: w" href="http://www.mezzoblue.com/zengarden/alldesigns/">Vie<span class="accesskey">w</span> All Designs</a></li>
</ul>
[FONT=“Lucida Sans Unicode”][SIZE=“3”]Is there a way using CSS to remove the break created by the ?
Only thing I can think of is very specific for that code, and won’t work in older browsers.
ul li:first-child {
margin-left: -1em;
}
assuming “1em” is one letter-space. If this isn’t exact you may have to set the li to a monospace font and then set the inner a’s inside to the font you want.
You can’t remove the non breaking space with css because it would be like trying to remove a certain letter from within a word, unless the character was inside a unique context and then you could set it to display:none (e.g. if it was wrapped inside a classed span).
The non breaking space will give you a space at the current font-size so ensure the list element is set to the same font-size as the anchor content and then there should be no change in height (assuming you set the line-height the same for both also).
For IE you would need to float the list and the anchor or you will get a stepping effect between the anchor and the non floated non breaking space.
You could probably eliminate the space by setting font-size and line-height on the list element to zero and then re-setting them back on the anchor but this of course kills any inherritance if required.
I’d probably track down whoever wrote that garbage HTML and teach them to sing soprano – but there’s a reason I refuse to work anymore with things I can’t change the markup on – that ship has sailed.
ESPECIALLY given what total idiocy that markup is. If all the spans are getting the same class why have a class? Anyone who puts a non-breaking space in the code like that deserves a good swift kick in the groin, and since most every system that actually tries to use accesskeys will show you it on the menus (basically opera) one shouldn’t be wasting code saying “accesskey n” on the title of each and every single one.
Just exactly where did this garbage markup originate? Can you elaborate on why you are locked into this train wreck?
There are some kinda cool designs here
even though they are a few years old but
the idea behind this site I think is still a good & valid idea
for designers to show off what they are capable
of creating with CSS1 & CSS2 alone (not CSS3)
Just had another look at the source code from the
sample HTML file & found these comments…
<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
<div id="linkList2">
<!-- If you're wondering about the extra at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
As something of a WCAG zealot, I’d be interested in seeing just what in the WCAG made them think that was necessary on LI.
Man, I knew Zen Garden was aging like milk… but WOW… then again I think the last time I looked at it would be six or seven years ago before I understood enough HTML and CSS to have an opinion on the subject… With what I know today the body tag on that markup ALONE is instant /rage/.
Though in a way it makes the CSS on that site all the more impressive; doing so much with such total trash code… That’s probably why it says “for graphic artists only” as coders today should take one look at the markup and go “NO!”
What twaddle you need to use all I can possibly assume they were trying to separate adjacent links, i.e. WCAG 1
Though obviously they probably don’t have the foggiest what Triple-A means anyway. As you can see from the markup it has loads of possible failures including the ‘window.defaultStatus’ message. They were just using a dumb robot checker.
Yeah, that’s the only thing I could think of from WCAG that would warrant their use, and the LI being block level wrappers would mean they are no longer adjacent… only inline-level tags can be adjacent; you wrap them in block level that no longer applies.
Admittedly if they’ve actually been using that codebase since 2001 like the copyright on the site, I would assume that like everyone else such details were still being digested and misunderstood.