Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
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