underline links not working in IE ?

**elliot** · 10-30-2005, 07:24 PM

Hi there.

Working on the layout of a new page, though am having a problem with IE, which isn't picking up the underline on the rollover??

could you offer a solution?

http://www.newworlds.co.uk/galaBoats.html

many thanks

**Rivian** · 10-31-2005, 04:07 PM

Hi Elliot,

Can you post a copy of your css so that we can have a look at it?

Thanks,
~Riv

**superneato** · 12-04-2005, 03:03 AM

i'm having a similar problem that my links aren't even registering as links in ie 5. i'm new at using liquid css with div tags rather than tables for design, but everything seems to be fine except this one weird glitch. the links work fine (interpage and anchored) in firefox and safari, even in netscape 4.7!

the sample page (stylesheets accessible by viewing code) is at:
http://www.oxhouse.org/~elizabeth/homestead/index.html

i've done some research and can't seem to find any solutions so far. can anyone help!!!!

thanks,
elizabeth

**mwinter** · 12-04-2005, 10:23 PM

Originally Posted by elliot

http://www.newworlds.co.uk/galaBoats.html

The underline is being rendered, but because the line height is too small, it is clipped. If you look closely, the descent of glyphs such as 'g' and 'y' aren't rendered completely.

Originally Posted by superneato

i'm having a similar problem that my links aren't even registering as links in ie 5.

You've clearly triggered a bug in IE. I've seen it in the past, too, but I can't remember why. There's nothing obvious in the style sheet, though it might disagree with the excessive, and unnecessary, positioning.

Here's an alternative implementation. For simplicity, the style is embedded though it should be linked, and the links go nowhere.

The style sheet should be hidden from IE4/NN4 (and the like). Don't bother providing a style sheet for them, unless you accomplish it by hiding only troublesome parts (the floats, for example); they're too rare and too fickle to be worth the effort, and the document is readable as it is.

i'm new at using liquid css with div tags rather than tables for design, but everything seems to be fine except this one weird glitch.

The mark-up's pretty good. Much better than other attempts I've seen, though the table of links would be better implemented as a styled list of links (see the example). Use absolute positioning sparingly as they can produce fragile layouts, and use the offset properties (top, right, bottom, left) to move a positioned element. At most, the navigation and photographs could be positioned in this way, but they don't need to be.

I shifted the content up using a negative top margin, and relative positioning for the navigation. In principle, either component could use either technique, but Firefox has problems with the links when a negative margin is used.

There are other minor changes here and there. The alternative text for your photos has been removed, for instance, and replaced with an empty string. They are decorative, not content, and decorative images shouldn't have replacement text. The alternative text has been moved to title attributes, though the second photo is missing its as it had the same text as the third photo, which clearly isn't right.

[Edit:] Your document type declaration is confused.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" ...>

is the public identifier for the Strict DTD, but the system identifier (the URL) you used is for the Transitional DTD. Either follow '4.01' with ' Transitional', or change 'loose' to 'strict' in the URL. The target attribute you used (which could easily be omitted) is the only reason why a Transitional DTD might be used.

Mike

**superneato** · 12-05-2005, 01:11 AM

mike,

thanks for the css suggestions - it seemed so easy for you to whip up a revised stylesheet while this takes me a long time as i'm still trying to understand all of the concepts and get a grasp on the most accessible and cross-browser friendly css of the moment. it's hard to keep up with how fast everything changes! i've been trying to learn liquid css in stages - 1st just getting the structure of a page down.

ideally i'd like this site to be liquid to adjust to varied browser window size. a standard 740-ish page is ok by me too, though in that case i have been trying to figure out how to center the whole deal.

do you have any suggestions on centering this static sized page, and/or providing true liquidity? i imagine that would be easy enough with just whitespace on either side of the header graphic and all other elements, i just hadn't gotten to that level of css yet.

thanks a bunch!
elizabeth

**mwinter** · 12-06-2005, 04:34 PM

Originally Posted by superneato

i've been trying to learn liquid css in stages - 1st just getting the structure of a page down.

That's the most important thing. One of the virtues of using CSS is a return to semantic mark-up: where elements are used specifically with the types of content they represent (paragraphs for paragraphs, headings for headings, lists for lists, tables for tabular data, etc.). This typically results in simple, small, and easy-to-maintain documents.

ideally i'd like this site to be liquid to adjust to varied browser window size.

Yes, that should be the aim. It's impossible to know what the dimensions of the viewport will be, so producing and implementing a design that is flexible will work well for everyone.

a standard 740-ish page is ok by me too,

I personally dislike fixed-width layouts, though setting an upper limit (max-width[1]) is a good idea because no-one will want to read long lines of text.

though in that case i have been trying to figure out how to center the whole deal.

The proper way to centre block-level elements is to set the left and right margins to auto, with an explicit width or max-width value in effect. Google is your friend, as evidenced by these results.

do you have any suggestions on [...] providing true liquidity?

Not a lot of useful information comes to mind at the moment. Specific questions are easier to answer. However, there are two very common issues:

Size elements that contain text using em units, which are proportional to the font-size property value (1em = font-size), though percentages (perhaps with min-width and max-width values in ems) can also be used as long as one is careful to avoid floating-point rounding errors. Pixel units are best left for when working with images.
Clearly, wide images included using img elements should be avoided, otherwise horizontal scrollbars will show with smaller viewport sizes. Graphic design, in general, becomes rather odd (and not my area of expertise). Decorative images should either be very wide (they'll be clipped when included using CSS), repeatable, or both (non-repeatable, followed or preceeded by repeatable).

A common FAQ answer to this can found at All My FAQs, though I disagree with any use of browser detection.

Mike

[1] Unfortunately, IE supports neither the min-width nor max-width properties. However, they can be emulated using its proprietary expression values (dependent upon JScript support) with the width property. Earlier Konqueror versions (and therefore Safari, probably) don't either, but they should be dead and there's no workaround, anyway.

**superneato** · 12-09-2005, 11:09 PM

Ok,

i've learned that the original link not working in ie problem relates to using fixed positioning and as you recommended, the only workaround is to not use fixed positioning. so i've adapted your suggested stylesheet for the site, as a result learning more about using css for positioning. fixed the centering, decided to stick with a fixed with of 740 that centers liquidly.

here's the latest rub, regarding inherited property ordering:
i wanted to make a subnav for some of the sections. tinkered a little with the css you had made for the nav, and was unsuccessful in working around what properties inherit and where exactly i can specify what properties. i would like the subnav to be indented -- increasing the left-padding, and not be all uppercase via the property "capitalize." in an experiment, i was able to indent the subnav, but not change the uppercase property. can you offer suggestions about that?

again, the site is updated at: http://www.oxhouse.org/~elizabeth/homestead/index.html

thanks!

**mwinter** · 12-11-2005, 09:57 PM

Originally Posted by superneato

[I] was unsuccessful in working around what properties inherit and where exactly i can specify what properties.

The CSS specification states which properties will be inherited as it describes them. Appendix F, the property index, can also be used as a quick reference as it also lists basic information about each property, included its inheritance characteristics.

i would like the subnav to be indented -- increasing the left-padding

Assuming you create a structure somewhat like:

Code:

<div id="navigation">
<ul>
  <li class="current">Home</li>
  <li>
    <a href="/homestead/dining/index.html">Dining</a>
    <ul>
    <li><a href="/homestead/dining/summer.html">Summer Menu</a></li>
    <li><a href="/homestead/dining/winter.html">Winter Menu</a></li>
    </ul>
  </li>
  <li><a href="/homestead/about.html">About Us</a></li>
  <li><a href="/homestead/getting.html">Getting Here</a></li>
  <li><a href="/homestead/links.html">Links</a></li>
  <li><a href="/homestead/contact.html">Contact</a></li>
</ul>
</div>

I'd add a left margin to create the indentation. This would automatically indent deeper levels (though I doubt you'll have any).

and not be all uppercase via the property "capitalize."

To leave the text as-is, the text-transform property should be given the value none. The declaration would be placed in a rule similar to the one that sets the text-transform property for the top-level menu items, with the selector adjusted slightly to apply to the nested list. The aim is to override the declaration with a more specific rule.

That was awkward to explain, so here's the #navigation part of the style sheet, which includes a few tweaks from the version I used in my demonstration.

Code:

#navigation {
  float: left;
  font-size: 80%;
  letter-spacing: 1px;
  position: relative;
  top: -3.75em;
  /* Change to accomodate menu */
  width: 11em;                    /* Increased from 9em */
}
#navigation ul,
#navigation li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigation li {                  /* Removed A element from selector */
  display: block;
  font-weight: bold;
  text-transform: uppercase;
}
#navigation a {                   /* Removes :link pseudo-class */
  background: transparent none;   /* Added transparent */
  color: #663333;
  padding-left: 18px;             /* Increased from 16px */
  text-decoration: none;
  /* Hack for IE 5.x
   * Adjust to fit widest item
   */
  width: 9.5em;                   /* Changed from percentage */
}
#navigation a:hover {
  background: url(images/navigation-marker.png) no-repeat 0% 50%;
  color: #cc9999;
}
#navigation li.current {
  padding-left: 18px;             /* Increased from 16px */
}
#navigation ul ul {               /* New */
  margin-left: 16px;
}
#navigation ul ul li {            /* New */
  text-transform: none;
}

Most of the tweaks (all are marked) are of a minor, technical nature. The only significant one is the one labeled 'Removed A element from selector' as link will no longer span the full width of the menu. If you want that feature to remain, then edit that part of the style sheet to:

Code:

#navigation a,
#navigation li {    /* New */
  display: block;
}
#navigation li {    /* This was the adjusted rule */
  font-weight: bold;
  text-transform: uppercase;
}

You'll also need to add an explicit width for the links at the deeper levels of the menu:

Code:

#navigation ul a {
  width: xem;
}

but this becomes messy as you start to invoke conflicts with the box model of IE 5.x, which is why I abandoned the idea.

There is one other change that's necessary to a different part of the style sheet, which is the left margin of the #content and #footer elements. It was

Code:

#content,
#footer {
  margin: 0 12.5em 0 9em;
}

but I increased the width of the menu above. A 10em margin:

Code:

#content,
#footer {
  margin: 0 12.5em 0 10em;
}

looks fine here.

Hope that helps,
Mike

**superneato** · 03-05-2006, 09:15 PM

Hi,

We've finally launched the site www.homesteadrestaurant.net. Long hiatus while the restaurant owners were on holiday!

There are now 2 small issues that need resolving and I hope someone can help!

I have created a gift certificate form with some required fields that have radio buttons selectors. I think I need special script to deal with this, as there are multiple radio buttons that each have the same name listed in the required fields. My host has an server that uses ASP, and can't handle CGI that I'm slightly more familiar. You can see the page live (it's just not linked to) at www.homesteadrestaurant.net/gift.html - please let me know if anyone can help with the sccripting modifications!

The second concern is that when several browsers open this site for the first time, the stylesheet doesn't kick in for about 2 seconds. In the interim, just the raw page comes up and looks not great! Ideas how to solve this? My code to the stylesheet is:

<style type="text/css" media="all">
@import url("homestead_rev.css");
</style>

Thanks so much in advance!

**jscheuer1** · 03-05-2006, 11:43 PM

I can't help you with your gift certificate but your style link may load faster if you used the more ordinary:

HTML Code:

<link rel="stylesheet" type="text/css" href="homestead_rev.css">

You could also include the media="all" attribute if you wish but, it is assumed. If you have a huge stylesheet file though, that is probably the problem, rather than how it is referenced. In any case, worth a try to see.

EDIT: I just had a quick look at the stylesheet, not too big, should load rather quickly using the link tag.