Member Avatar for Will Gresham

I am having some problems with HTML and CSS, firstly with links in a li element, I have it set to display: block so that the it will highlight when the cursor is placed within the li area, but this is not working in IE 6 (I know this is a known issue in IE and I have managed to work around it before but I can't manage it this time)

/* Styles for the Drop-Down menus*/
#drop_menu {
  position: relative;
  float: right;
  z-index: 40;
  text-align: left;
}

#drop_menu li {
  margin: 90px 0 0 2px;
  list-style: none;
  float: left;         
}

#links_list li {
  margin: 0 13px 0 0;
  list-style: none;
  float: left;        
}

#drop_menu li a {
  display: block;
  text-align: left;
}

Any ideas on a work-round for this would be appreciated

Second, I have been asked to set the tables on the site out like the image attached, but I can't find out how to get a 3d effect on HTML tables (it will need to be XHTML 1.0 Strict and CSS2.1 compliant as the rest of the site is)
I have tried searching for this but with no luck so again any ideas appreciated.

Regards.

table_layout.jpg 9.94 KB
  • 3 Contributors
  • 3 Replies
  • 90 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short summary and practical fixes for both problems raised by (link highlighting in IE6) and the requested table “3D” look.

IE6 link highlight: the usual culprit is IE6s layout/float behavior rather than the hover rule itself. Quick checks: give the link a temporary visible background to see its real box, confirm the page is in standards mode (correct DOCTYPE), and make sure nothing else (another floated element or z-index) is sitting above the link. Common, low-risk remedies that succeed in IE6 are to force “layout” on the element (for example with zoom:1 or an explicit width/height), or give the link/parent position:relative so the browser paints it properly. Also try removing floats momentarily to see if the float is causing the gap.

Table inset/outset rows (the visual effect): you do not need heavyweight DHTML for this. Two robust approaches that stay XHTML 1.0 Strict / CSS2.1 friendly:

  • Create tiny (1px high) horizontal images that represent the shadow/highlight lines and apply them as repeat-x backgrounds to rows; flip top/bottom placement between alternating rows.
  • Add row-level classes when generating the table (server-side is clean; a tiny progressive-enhancement script can add them on the client) and style those classes with the appropriate borders/backgrounds. Note that some older IE builds are quirky about backgrounds on tr, so if you see problems apply the backgrounds to td instead. Keep color contrast accessible and test in the browsers you must support.

Building on and : use CSS+small images or row classes rather than complex scripting, and debug visually first (temporary backgrounds) before locking in the final CSS.

Recommended Answers

All 3 Replies

Member Avatar for tiger86

could you be referring to DHTML when you talk about 3d effects? DHTML is not a language it is a combo of HTML and other languages such as Javascript or PHP. The image you attached isn't the true essence of 3d but you could just use CSS to put the words within the image table.

Member Avatar for Will Gresham

The image posted was done in Word, that's just a representation of what they want it to look like, when I say 3d effects, it more that alternating rows are inset/outset.

Member Avatar for MidiMagic

Easy in Word - it's a built in style. Hard in xhtml, but doable.

You will have to use a different style for the odd rows and the even rows:

- The odd rows have dark top borders and light bottom borders.
- The even rows have dark bottom borders and light top borders.
- All rows have dark left borders, and no right borders.

Make a .class for each kind, and put the class= in the td tags, according to whether they are in odd or even rows.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.