i m getting the problem in alignment in navigation , everything is working fine in IE for me but in other browers navigation links are misaligned..
plz help me out.

plz find the attachments which shows the difference in IE and Mozilla

Attachments IE.PNG 70.63 KB mozilla.PNG 54.41 KB
10 Years
Discussion Span
Last Post by MidiMagic

the code i have written

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords"    content="" />

<script type="text/javascript" src="dropdown.js"></script>
<link rel="stylesheet" type="text/css"href="style.css" />
<style type="text/css">

body { font-size: 0.7em; }
h3   { font-size: 1.6em; margin: 0px; }

a.management_attach, a.management_attach:visited, div.management_attach
  display: block;
  width:   160;
  height:	26px;
  border:  1px solid black;
  padding: 2px 5px;

  background: #CCCCCC;

  text-decoration: none;
  font-family: Verdana, Sans-Sherif;
  font-weight: 599;
  font-size: 1.2em;
  color:   black;
  text-align: center;

a.management_attach, a.management_attach:visited { border-bottom: none; }
div#management_child             { border-bottom: 1px solid black; }

  position: absolute;
  visibility: hidden;

  border:  1px solid black;
  padding: 0px 5px 2px 5px;

  background: #FFFFEE;

form.management_attach b
  font-family: Verdana, Sans-Sherif;
  font-weight: 900;
  font-size: 1.1em;

input.management_attach { margin: 1px 0px; width: 170px; }


<style type="text/css">
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;color: #000000;text-decoration: none;}

A.nav:link { color: black }       /* unvisited link */
A.nav:visited { color: black }   /* visited links */
A.nav:active { color: black }    /* active links */

<body bgColor="#99CCFF">
<div id="rollimg1" style="position:absolute; overflow:hidden; left:14px; top:73px; width:179px; height:44px; z-index:14">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg1','','images/roundrect332253609.gif',1)" href="#">


<div id="shape2" style="position:absolute; overflow:hidden; left:0px; top:114px; width:1265px; height:8px; z-index:15; background-color:#808080">&nbsp;</div>

<div id="shape5" style="position:absolute; overflow:hidden; left:0px; top:0px; width:1265px; height:115px; z-index:16"><img border=0 src="images/shape27004484.gif"></div>
<div id="text7" style="position:absolute; overflow:hidden; left:269px; top:33px; width:348px; height:31px; z-index:18">
<div class="wpmd">
<div><font class="ws16" color="#CCFFFF"><B> Dashboard - CGI</B></font></div>
<div id="management_parent" class="management_attach" style="position:absolute; left:1px; top:93px;width=160; z-index:32">Product Management</div>
<div id="management_child">
<a class="management_attach" href="javascript:alert(' under construction');">test1</a>
<a class="management_attach" href="javascript:alert(' under construction');">test1</a>
<a class="management_attach" href="javascript:alert(' under construction');">test1</a>
<a class="management_attach" href="javascript:alert(' under construction');">test1</a>
<a class="management_attach" href="javascript:alert(' construction');">test1</a>
<a class="management_attach" href="javascript:alert(' construction');">test1</a>
<a class="management_attach" href="javascript:alert(' under construction');">test1</a>
<script type="text/javascript">
at_attach("management_parent", "management_child", "hover", "y", "pointer");
<div id="parent_attach" class="menu_attach" style="position:absolute; left:160px; top:93px; z-index:32"> Metrics</div>
<div id="child_attach">
<a class="menu_attach" href="prechart.jsp">DRE</a>
<a class="menu_attach" href="javascript:alert('Item 2');">Valid/Invalid Bugs</a>
<a class="menu_attach" href="javascript:alert('Item 3');">Future Metrics</a>
<script type="text/javascript">
at_attach("parent_attach", "child_attach", "hover", "y", "pointer");
<div id="analytics_parent" class="analytics_attach" style="position:absolute; left:279px; top:93px; z-index:32">Analytics</div>
<div id="analytics_child">
<a class="analytics_attach" href="prechart.jsp">Analytics</a>
<a class="analytics_attach" href="prechart.jsp">Current Release</a>
<a class="analytics_attach" href="prechart.jsp">History</a>
<script type="text/javascript">
at_attach("analytics_parent", "analytics_child", "hover", "y", "pointer");
<div id="faq_parent" class="faq_attach" style="position:absolute; left:399px; top:93px; z-index:32">FAQ's</div>
<div id="faq_child">
<a class="faq_attach" href="prechart.jsp">FAQ's</a>
<a class="faq_attach" href="prechart.jsp">Help</a>
<a class="faq_attach" href="prechart.jsp">Site Map</a>
<script type="text/javascript">
at_attach("faq_parent", "faq_child", "hover", "y", "pointer");
<a href="logout.jsp"><div id="logout_parent" class="logout_attach" style="position:absolute; left:528px; top:93px; z-index:32">Logout</div></a>
<div id="logout_child">
<script type="text/javascript">
at_attach("logout_parent", "logout_child", "hover", "y", "pointer");


plz help me or just let me know wat elsi i will tell to make u guys ny problem clear.


I'm here! But I can show up only 2 or 3 times a week.

You can't have more than one pair of inline style tags. You have two. And style tags must be in the head. One of your pairs is between the head and the body.

You also have the IE/FF compatibility bug.

Actually, IE is the troublemaker here. Since you adjusted things to work in IE, they don't work in the other browsers.

But you can fix it.

The real problem is that you have nonzero surrounding styles (padding, border, margin) in the same tags and defined styles containing size styles (height, width). The problem is that IE handles this situation in a different nesting order:

- IE crams the surrounding styles INSIDE the measured sizes.

- The other browsers put the surrounding styles OUTSIDE the defined sizes, as defined in the W3C standard.

The remedy is to not apply nonzero surrounding styles to the same tags that have size styles. Nest two tag pairs, applying surrounding styles to one pair, and size styles to the other. Now you can control which is inside the other.

Div is a good tag to use for the inserted tag for the nesting.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.