Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Nested TABLE within a UL vertical align grief

Status
Not open for further replies.
BabyJeffy

BabyJeffy

Programmer
Sep 10, 2003
4,189
GB
Any suggestions on how I can keep the UL and the TABLE markup, but somehow get the LI discs to be centre aligned vertically (whereas they appear to be baseline aligned without styling)?

I've experienced this on FF on windows (only - not IE at all) - and it looks to me like a weird browser bug. I've not seen any published work-arounds (and after a few hours thought I'd ask you all)...
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
	<title>Some title</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en" />
</head>
<body>
<ul>
  <li><table><tr><td><img src="something.jpg" width="30" height="30"/></td></tr></table></li>
</ul>
</body>
</html>

Please note that I have cut this down to the bare bones to show the weird behaviour (and obviously I am not just wrapping a single image in a table - but this is the bare minimum required to show this happening).

Oh, I need to retain the doctype as well. The working solution has to work the same in FF, IE (6 and 7) and Safari... even though the problem only surfaces in FF for windows.

Thanks for taking a look!
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Sort by date Sort by votes
I am sure you have your reasons for doing it this way but I would suggest, as you are using tables, drop the <ul> and insert an image of the disc in and adjacent cell. The valign function within tables is usually reliable across browsers.

Keith
 
Upvote 0 Downvote
As mentioned - the use of the table is required. Remove the image... it's not important (I was trying to provide an absolute minimal bit of code to show the problem). The key is that the list disc is not vertical aligned to the middle when the table is the first node in the LI - and with default browser css in FF for windows, the position of the disc vertically is not expected (or controlable).

When you flip to using an OL instead of a UL the numbers are baseline aligned as well - showing the same behaviour. The thing is... there seems no way to control their vertical position either.

Put a <div>sometext</div> in as the first node in the LI it works as expected.

Anyone with any insights?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Not really, but I remember Chris Hunt having a similar problem, but with a different browser. Here's what we figured out then. thread215-1302801
 
Upvote 0 Downvote
Thought this problem looked familiar, though mine was an IE bug and this one appears to be a FF one.

After some tinkering, it looks like FF bases the bullet position on the baseline of the first line of content. The spec doesn't go into detail about how the bullet should be positioned, so I suppose this isn't technically a bug but a different implementation choice to other browsers. Mind you, that sort of thing gets branded a bug in IE (alongside real bugs) so I don't see why FF should get off.

I suggest using a background image instead of the default bullet. Just give the li some padding-left and put the bullet where you want it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Chris - in the end I did pretty much that... just seemed annoying to have to over-ride it that way. Certainly your explaination matches my observation - something I really wouldn't have expected from FF in the first place :)

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
I find I'm hardly ever able to use the bullets built in to <ul> lists. I've not come across this particular issue before, but others, such as wanting the bullet to be clickable when displaying a list of links commonly preclude using the built-in ones.

Images will look prettier anyway.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
709
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
205
Alt255
Alt255
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
899
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
776
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top