Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

menu formatting


  • Please log in to reply

#1
rmccafferty

rmccafferty

    Member

  • Member
  • PipPip
  • 16 posts
I am using the following code for my "header" on a web site.

<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="headback_l"><img src="art/logo.gif" alt="Legacy Transformational Consulting Logo" width="239" height="118"></td>
<td width="100%" align="right" class="headback_r"><img src="art/head_text.gif" width="460" height="117"></td>
</tr>
<tr valign="middle">
<td colspan="2" class="backblack"><div><ul class="menu centered">
<li><a href="index.html">HOME</a></li>
<li><a href="products.html">PRODUCTS</a></li>
<li><a href="clients.html">CLIENTS</a></li>
<li><a href="A_who_we_are.html">ABOUT US</a></li>
<li><a href="links.html">LINKS</a></li>
<li><a href="contact.html">CONTACT US</a> </li>
</ul></div></td>
</tr>
</table>

The first table row works fine. The second displays the items vertically rather than horizontally. Worse, it sometimes it is okay, other times not. It is not a matter of screen width. The code in the classes is:
.backblack {
background-color: #000000;
}
and
.centered {margin:0 auto;}
plus
.centered a:visited {
color: #FFFFFF;
}

It always works fine in Firefox and I cannot figure out a constant in what makes it work only sometimes in IE. If you want to see the site it is www.legacytc.com.

I would be very grateful for anyone who sees the error in this.

Robert
  • 0

Advertisements


#2
rmccafferty

rmccafferty

    Member

  • Topic Starter
  • Member
  • PipPip
  • 16 posts
I left out one part of the css. Sorry

.menu {
display:table;
padding:0;
list-style-type:none;
white-space:nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #FFFFFF;
border-left: solid #666 1px;
margin: 0;
border-bottom: none;
}
  • 0

#3
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
You have some serious CSS Errors that need correcting.

Correct your CSS and then re-check with IE.

I will never understand the use of tables as layout when you are using CSS. That is a big no-no as tables are for tabular data use only. The design of pages with table tags went out in the 1990s.

Ron

Edited by Major Payne, 17 April 2008 - 05:49 PM.

  • 0

#4
rmccafferty

rmccafferty

    Member

  • Topic Starter
  • Member
  • PipPip
  • 16 posts
That is a nice automatic evaluator. But none of the "errors" it detected seem to be about the issue with the menu presentation problem. Most have to do with padding and colors.

Do you see a listed error that would relate to the horizontal menu issue?
  • 0

#5
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Wow. Sorry for not getting back to you sooner. My sister has been working me to death to get H. Katrina damage cleaned up.

Just put this in your CSS to get the menu to display horizontally:

ul li { display: inline; }

Ron
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP