Aligning trouble

M

Myriam

I've been going crazy trying to figure out why some drop down menus are not
aligning correctly when viewed in a browser. When I preview, they are
perfectly aligned!!
Does anyone have any idea why this is happening?
I would *really*appreciate your comments.
Thanks,
This is an example of the code I'm using:

left.htm code:

<html><head><meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"><meta http-equiv="Content-Language"
content="en-us"><title>Left Border</title><meta name="GENERATOR"
content="Microsoft FrontPage 6.0"><meta name="ProgId"
content="FrontPage.Editor.Document"><meta name="Microsoft Theme"
content="none, default">
<meta name="Microsoft Border" content="none">
</head>

<LINK REL="StyleSheet" HREF="menu.css">
<script language="javascript" src="menu.js"></script>

<body>


<table class="navbar" width="100" id="table1">

<tr>
<td class="menuNormal" width="110" onmouseover="expand(this);"
onmouseout="collapse(this);" style="padding-left: 4px; padding-right:
4px; padding-top: 1px; padding-bottom: 1px">
<p><u><a href="../htm%20pages/team.htm">Menu1</a></u></p>
<div class="menuNormal" width="104" style="width: 108px; height:
60px">
<table class="menu" width="104">
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item1</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">Item2</a> </td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">Item3</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">Item4</a> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table class="navbar" width="100" id="table2">

<tr>
<td class="menuNormal" width="110" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p><u><a href="../htm%20pages/team.htm">Menu2</a></u></p>
<div class="menuNormal" width="104" style="width: 97px; height: 58px">
<table class="menu" width="104">
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item1</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item2</a> </td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item3</a>
</td>
</tr>
<tr>
<td class="menuNormal">
<a HREF="page.asp" class="menuitem">item4</a> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>


</body>

<!--webbot bot="Navigation" s-orientation="vertical" s-font="1"
s-rendering="graphics" s-type="children" b-include-home="FALSE"
b-include-up="FALSE" tag="body" s-theme="Pixel 0110" --></div><p> </p>
</body></html>

</html>
----------------------------------------------------------------------------

Stylesheet:

menu.css
------------------------------------------------------------------------------
BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 3px;
margin-left: 3px;
margin-right: 0px;
padding: 0px;}

P
{padding-top: 10px;
margin: 0px;}

H1
{font-size: 12pt;
font-weight: bold;
padding-top: 15px;
margin: 0;}

table.navbar
{font-size: 8pt;
margin: 0px;
padding: 0px;
border: 0px;
font-weight: bold;}

table.menu
{font-size: 6pt;
margin: 0px;
padding: 0px;
font-weight: bold;}

td.menuNormal
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
horizontal-align: left;
background-color: white;}

td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
horizontal-align: left;
/*remove the following line for drop-down menu with images*/
background-color: lightblue;}

div.menuNormal
{display: none;
position: static;}

div.menuHover
{border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;}

a.menuitem:link
{text-decoration: none;
color: lightblue;
background-color: white;
display: block;}

a.menuitem:visited
{text-decoration: none;
color: lightblue;
background-color: white;
display: block;}

a.menuitem:hover
{text-decoration: none;
color: lightblue;
background-color: lightblue;
display: block;}

a.menuitem:active
{text-decoration: none;
color: black;
background-color: white;
display: block;}
------------------------------------------------------------------------------

menu.js

function expand(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);

td.className = "menuHover";
d.className = "menuHover";
}

function collapse(s)
{
var td = s;
var d = td.getElementsByTagName("div").item(0);

td.className = "menuNormal";
d.className = "menuNormal";
}
 
M

Myriam

I don't have a URL. This goes in my client's intranet and it is not uploaded
yet.
I am only working with FP2003 and previewing with MS IE 6.0

The first drop-down menu shows with a +/- 2-3px of indent and the rest are ok.
What I finally did was to open a new page and copy the 2nd table several
times and so far its working, but I am unconfortable not being able to
identify where the code is incorrect. It may act up again.

Thanks for responding to my post. Any suggestions or comments will be highly
appreciated.

Regards,
 
R

Ronx

You have an absolutely positioned div contained by a non-positioned
table cell. If this is not giving problems now, it will later.
You also have two </html> tags, and a FrontPage navbar between </body>
and </body>
This is another problem waiting to happen. The excess </body> and
</html> tags need to be removed.

The 6pt font size you are using will be very difficult to read. In
general, pts are a bad thing to use in a website since 1pt is 1/72nd
of an inch - and different browsers will interpret this measurement in
different ways. Use pixels instead for measurements. However, on an
intranet where every user has the same browser, this is not as
important. But IE cannot resize text specified by pts or pixels, so
for those with not perfect eyesight, reading 8pt or 6pt text will be a
strain.
 
M

Myriam

Thanks for your comments. Very helpful.
How do I fix the "absolutely positioned div contained by a non-positioned
table cell" ?
Regards,
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Menu to drop down only on arrow? 3
Error message "An error has occured in the script on this page" 1
Problem seeing some characters when sending email to Outlook client 60
Object Not Found Error for Drop Down Menu 1
table scrollbars 3
Report Grouping 2
Frontpage removes javascript after save 6
text not displaying right in boxes at less than 1024 res, why? 4

Top