...

View Full Version : horiz nav menu not displaying correctly



droliff
07-15-2011, 03:11 AM
Hi all,

I recently put together an html/css unordered list horizontal navigation menu with suckerfish single level dropdown menu (http://www.htmldog.com/articles/suckerfish/dropdowns/) (for 'pricing') for my home page (http://dennisroliff.com/html/misc_html/home.html) utilizing info from an article on A List Apart (http://www.alistapart.com/articles/horizdropdowns/). The menu is not displaying properly (horizontally) in IE8 or IE9. I'm not sure what IE fix/hack I am missing.
Also in IE8 and IE9 the facebook and twitter logos are floating over to the right along with the vertical menu. I've proofed this page in the latest versions of Firefox, Safari, Opera and Chrome and it works fine in those browsers. The page should look like this (and single level dropdown menu with three items should display when hovering over 'pricing').:

http://dennisroliff.com/samples/web/menu_002.jpg

Any help will be greatly appreciated.

Thanks.

Dennis

teedoff
07-15-2011, 03:34 AM
I think you need to give your <ul> a width other than auto. Also, you dont have a valid doctype defined, which will play havoc in some browsers, IE in particular.

You do know tables for layout (http://www.hotdesign.com/seybold/) is not a good practice right? And one more thing to consider, which is the center tags are outdated and deprecated.

droliff
07-15-2011, 05:43 AM
I think you need to give your <ul> a width other than auto. Also, you dont have a valid doctype defined, which will play havoc in some browsers, IE in particular.

You do know tables for layout (http://www.hotdesign.com/seybold/) is not a good practice right? And one more thing to consider, which is the center tags are outdated and deprecated.

Thanks for the input. What would the valid doctype be? I plugged in the following, from my PageSpinner 5.2.1 software and the formatting of the page went completely out of whack.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

gopinath_3411
07-15-2011, 08:39 AM
u have made your code very complicated, u might have try to do it lot simple.

Here it is, i have made lot of simplifications.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dennis Roliff Photography: advertising and beauty imagery</title>
<style>
body { padding:0px; margin:0px auto; width:970px; }

table { margin:0px auto; margin-top:120px; padding:0px; width:750px; }

p { margin:0px; padding:0px; font:normal 14px italic "Garamond Premr Pro"; color:#666666; }

.menu { margin:0px; padding:0px; width:750px; float:left; }

.menu ul { margin:0px; padding:0px; }

.menu ul li { margin:0px; padding:0px 0px 0px 8px; list-style-type:none; display:inline; text-decoration:none; font:12px normal "Garamond Premr Pro"; }

.menu a { margin:0px; padding:0px; text-decoration:none; font:bold 16px "Garamond Premr Pro"; color:#666666; }

.menu a:hover { text-decoration:underline; }
</style>

</head>

<body>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr height="200">
<td align="center"><img src="home_logo.jpg" width="400" height="92" alt="logo" /></td>
</tr>
<tr>
<td align="center">
<div class="menu">
<ul>
<li><a href="#" target=_self>beauty</a> </li>
<li><a href="#" target=_self>portraiture</a> </li>
<li><a href="#" target=_self>fashion</a> </li>
<li><a href="#" target=_self>commercial</a> </li>
<li><a href="#" target=_self>personal</a> </li>
<li><a href="#" target=_self>video</a> </li>
<li><a href="#" target=_self>pricing</a>
<!--<ul>
<li><a class=internal href="#" target=_self>headshots</a> </li>
<li><a class=internal href="#" target=_self>model shoot</a> </li>
<li><a class=internal href="#" target=_self>commercial</a> </li>
</ul>-->
</li>
<li><a href="#" target=_self>about</a> </li>
<li><a href="#">contact</a> </li>
<li><a href="#" target=_self>home</a> </li>
</ul>
</div>
</td>
</tr>
<tr height="300">
<td>&nbsp;</td>
</tr>
<tr>
<td><p align="center">follow us on facebook and twitter </p></td>
</tr>
<tr>
<td align="center">
<div>
<img src="twitter_logo.jpg" /><img src="facebook_logo.jpg" />
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum