hi,
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
samarinder 0 Newbie Poster
samarinder 0 Newbie Poster
the code i have written
Home.jsp
<html>
<head>
<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; }
form.management_attach
{
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>
</head>
<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 */
</style>
<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="#">
</a></div>
<div id="shape2" style="position:absolute; overflow:hidden; left:0px; top:114px; width:1265px; height:8px; z-index:15; background-color:#808080"> </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>
</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>
</div>
<script type="text/javascript">
at_attach("management_parent", "management_child", "hover", "y", "pointer");
</script>
<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>
</div>
<script type="text/javascript">
at_attach("parent_attach", "child_attach", "hover", "y", "pointer");
</script>
<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>
</div>
<script type="text/javascript">
at_attach("analytics_parent", "analytics_child", "hover", "y", "pointer");
</script>
<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>
</div>
<script type="text/javascript">
at_attach("faq_parent", "faq_child", "hover", "y", "pointer");
</script>
<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">
</div>
<script type="text/javascript">
at_attach("logout_parent", "logout_child", "hover", "y", "pointer");
</script>
</body>
</html> samarinder 0 Newbie Poster
plz help me or just let me know wat elsi i will tell to make u guys ny problem clear.
samarinder 0 Newbie Poster
NO replies..........
plz help me out...........
i m in need....
MidiMagic 579 Nearly a Senior Poster
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.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.