Lynx Links List (SOLVED)

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

User avatar
dukederek
Posts: 130
Joined: Thu Feb 28, 2008 10:56 am UTC

Lynx Links List (SOLVED)

Postby dukederek » Mon Jun 06, 2011 2:30 pm UTC

So I'm in the process of writing a web site and I'm doing my due diligence in checking it looks right in all browsers and I decided that since I'd made an effort to make it look good with CSS disabled I'd put that to an ultimate test and look at it in Lynx. This worked fine except for the navigation bar, which is in the form of

<ul>
<a href="monkey"><li>monkey</li></a>
<a href="batman"><li>batman</li></a>
<a href="milkshake"><li>milkshake</li></a>
</ul>

(but with a bunch of CSS to make pretty)

Anyway, this works fine in all graphical browsers (with and without CSS enabled) but in Lynx it just shows as a UL without the links. Why is this? Can I fix it?
Last edited by dukederek on Mon Jun 06, 2011 9:57 pm UTC, edited 1 time in total.

Moose Hole
Posts: 398
Joined: Fri Jul 09, 2010 1:34 pm UTC

Re: Lynx Links List

Postby Moose Hole » Mon Jun 06, 2011 2:37 pm UTC

I don't have lynx handy, but have you tried the following?
<li><a href="monkey">monkey</a></li>

User avatar
dukederek
Posts: 130
Joined: Thu Feb 28, 2008 10:56 am UTC

Re: Lynx Links List

Postby dukederek » Mon Jun 06, 2011 4:08 pm UTC

Problem is, I'm actually using a background image in the <li>'s CSS to serve as a nav button and "monkey" is in a <span> which is set in the CSS to "display:none" so I don't think it'd work as a link in normal browsers if I did that...

EDIT: just did it anyway, and as I suspected, it worked in Lynx but not in anything else :D

Moose Hole
Posts: 398
Joined: Fri Jul 09, 2010 1:34 pm UTC

Re: Lynx Links List

Postby Moose Hole » Mon Jun 06, 2011 4:39 pm UTC

I guess you could detect lynx and change formatting based on that.

User avatar
dukederek
Posts: 130
Joined: Thu Feb 28, 2008 10:56 am UTC

Re: Lynx Links List

Postby dukederek » Mon Jun 06, 2011 4:47 pm UTC

That would make me really sad. I've managed to get it looking fine in everything else without detecting and actually, I'm only really using Lynx to see how generic text only browsers/screen readers/etc work with it.

I'll keep trying stuff and report back if I figure anything out

User avatar
diabolo
Posts: 72
Joined: Fri Aug 08, 2008 4:17 pm UTC
Location: france

Re: Lynx Links List

Postby diabolo » Mon Jun 06, 2011 4:48 pm UTC

Moose Hole wrote:I guess you could detect lynx and change formatting based on that.

Or just do the CSS stuff in a way that works on correct markup once and for all?
[X]HTML validator wrote:document type does not allow element "li" here
<a href="monkey"><li>monkey</li></a>


edit: I'm no CSS expert but wouldn't putting the background images on the <a>'s (maybe changing their display to [inline-]block and setting a width and height so they don't collapse to nothing when the inner span has display:none applied) work just fine?

EvanED
Posts: 4331
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: Lynx Links List

Postby EvanED » Mon Jun 06, 2011 7:05 pm UTC

I agree with diabolo. Fix your markup.

Edit: You don't even need XHTML to get that. I can't get the following to validate under any HTML or XHTML setting I've tried, between HTML 2, 3.2, 4 transitional, 4 strict, or XHTML. It works for normal browsers by accident.
Spoiler:

Code: Select all

<head><title>blah</title></head>
<body>
<ul>
  <a href="foo"><li>foo</li></a>
</ul>
</body>
</html>

ojno
Posts: 35
Joined: Sun Oct 05, 2008 5:09 pm UTC

Re: Lynx Links List

Postby ojno » Mon Jun 06, 2011 7:11 pm UTC

Is there any reason you can't just use <img>'s in the <li>'s with alt attributes, instead of the background and hacky extra hidden text?

That would work in all browsers, including text ones.

User avatar
diabolo
Posts: 72
Joined: Fri Aug 08, 2008 4:17 pm UTC
Location: france

Re: Lynx Links List

Postby diabolo » Mon Jun 06, 2011 8:06 pm UTC

ojno wrote:Is there any reason you can't just use <img>'s in the <li>'s with alt attributes, instead of the background and hacky extra hidden text?

I guess it would work, but while adding backgrounds and hiding text may look hackish isn't it actually better? (real question, I'm not a professional web-designer/developer)
You start with minimal content and structure and then you add/substitute the fancy stuff (in this case turning text links into "buttons") via CSS.
With <img>'s in the markup you're stuck with them from the start, and for example can't change them from alternate stylesheets.

User avatar
dukederek
Posts: 130
Joined: Thu Feb 28, 2008 10:56 am UTC

Re: Lynx Links List

Postby dukederek » Mon Jun 06, 2011 8:46 pm UTC

diabolo wrote:
Moose Hole wrote:I guess you could detect lynx and change formatting based on that.

Or just do the CSS stuff in a way that works on correct markup once and for all?
[X]HTML validator wrote:document type does not allow element "li" here
<a href="monkey"><li>monkey</li></a>


edit: I'm no CSS expert but wouldn't putting the background images on the <a>'s (maybe changing their display to [inline-]block and setting a width and height so they don't collapse to nothing when the inner span has display:none applied) work just fine?


oo, I hadn't thought of changing the a's to blocks, are you allowed blocks inside <ul>s? (and <li>s for that matter...)

UPDATE: I did this and it works across all browsers I have to hand (including Lynx) and validates properly! Thanks!


ojno wrote:Is there any reason you can't just use <img>'s in the <li>'s with alt attributes, instead of the background and hacky extra hidden text?

That would work in all browsers, including text ones.


Pretty much for the reason diabolo said, I'm trying to keep it so the HTML makes sense without CSS and images and the pretty CSS stuff is just a benefit

User avatar
Xanthir
My HERO!!!
Posts: 5409
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: Lynx Links List

Postby Xanthir » Sat Jun 11, 2011 6:10 am UTC

diabolo wrote:
ojno wrote:Is there any reason you can't just use <img>'s in the <li>'s with alt attributes, instead of the background and hacky extra hidden text?

I guess it would work, but while adding backgrounds and hiding text may look hackish isn't it actually better? (real question, I'm not a professional web-designer/developer)
You start with minimal content and structure and then you add/substitute the fancy stuff (in this case turning text links into "buttons") via CSS.
With <img>'s in the markup you're stuck with them from the start, and for example can't change them from alternate stylesheets.

No, god no. If you want an image, use an <img>. It's by far the cleanest way to do things.

Let me just start from the beginning. Your first problem is that your elements are misordered. <ul> can only contain <li> as children, and <li> can only be the children of <ul> or <ol>. You should move the <a> inside the <li>.

This will make just the text a link. Fix that by making the <a> be display:block, and if you need to adjust sizes of things or use padding or margins, put it on the <a> instead, so that the <a> is always the full size of the "nav button".

Now, the display of the <nav> button. *Ideally*, you'd just use plain text and background images. Using the @font-face rule, you can pull in whatever font you want, and with the rest of CSS you can style and position the text basically arbitrarily. Slap that over a background image and you're golden.

If that's not feasible for whatever reason, use <img> with alt text instead of text (inside the <a>, which is inside the <li>). It's not *ideal*, but it's pretty good.

As some background, I'm a member of the CSS Working Group, and I work on Chrome. I know what I'm talking about. ^_^
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

bittyx
Posts: 194
Joined: Tue Sep 25, 2007 9:10 pm UTC
Location: Belgrade, Serbia

Re: Lynx Links List (SOLVED)

Postby bittyx » Sat Jun 11, 2011 1:21 pm UTC

Just a small follow-up on Xanthir's point - the situation where using background images on a div vs. a regular <img> behaves "prettier" is, for example, when you want to have a hover effect on your links. This is pretty easy to do with CSS sprites, and the awesome thing about it is that, first of all, instead of downloading a separate image file for both the normal and hover states of each link, you can just put them in a single image file (which reduces the number of http requests, sometimes significantly), and position them with CSS - e.g. something like this:

Code: Select all

a#home  {display:block; padding:0; width:100px;height:40px;background:transparent url('/img/nav_sprite.png') no-repeat 0 0;}
a#home:hover {display:block;padding:0;width:100px;height:40px;background:transparent url('/img/nav_sprite.png') no-repeat 0 -40px;}

The "nav_sprite.png" will of course be just a single image with dimension 100px*80px, and the upper half will have the normal version of the button, while the lower half will have the "hovered" version. This is also "better" than using <img> in such cases, because with <img>, and separate images for the on/off state, when you load the page, the normal images will be downloaded, but the hover images will be downloaded only after the first time you hover the link (which produces a laggy feeling client-side), unless you preload the hover images using javascript (which is something I try to avoid wherever possible; to me, it always just seemed too brute-force to preload images). You can find out more if you search for "CSS sprites". Also, though this is obviously just a personal opinion, using the sprites and CSS background positioning has some beauty/hack-value to it - it's just really cool.

As for making your site display correctly in text browsers (which is also important for search engines and screen readers/accessibility), there are some techniques collectively called "CSS image replacement" - various techniques obviously have different pros/cons. You can see some of them here. Note that image replacement techniques are also used in blackhat SEO, so they have the potential to be dangerous if, for example, Google thinks that you are using them in an evil manner. Luckily, this is not something that will automatically get you kicked out of Google search.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 5 guests