Navigation misaligned in mozilla

Question

samarinder 0 Newbie Poster

18 Years Ago

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

user-interface web-design

2 Contributors
4 Replies
115 Views
2 Days Discussion Span
Latest Post 18 Years Ago Latest Post by MidiMagic

Dani AI

Generated 9 Months Ago

Browsers are rendering the menu differently because of a mix of invalid markup/CSS and the historical box‑model/quirks differences between engines. was right to point at the box model — but a few concrete fixes will make the menu line up predictably in modern browsers.

First things to fix (in order):

Add a standards DOCTYPE at the very top so browsers use the same rendering mode:
```
<!DOCTYPE html>
```
Move all CSS into one stylesheet or a single <style> block in the head. Remove duplicate style blocks between head and body.
Fix invalid CSS values (units are required). For example use width: 160px; instead of width: 160;. Put sizes in CSS, not inline style attributes.
Avoid invalid HTML like wrapping a block element inside an inline anchor in older specs. Use an anchor as a block-level element instead:
```
<a href="logout.jsp" id="logout_parent" class="logout_attach">Logout</a>
```

To eliminate the padding/border vs. width mismatch across browsers, set a consistent box model. A simple, modern approach:

*, *::before, *::after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;    /* legacy FF */
  -webkit-box-sizing: border-box; /* legacy WebKit */
}

This makes width include padding and border and is the easiest way to get consistent sizes. For very old browsers that do not support box-sizing, follow ’s nesting advice (outer wrapper holds padding/border, inner element defines width).

Extra checks: use developer tools to inspect computed widths and margins, reset browser defaults for body/ul/li if needed, and avoid nonstandard values like font-weight: 599 (use 600 or bold). For reference, see the MDN documentation on DOCTYPE and box-sizing: Doctype on MDN and box-sizing on MDN.

All 4 Replies

MidiMagic 579 Nearly a Senior Poster

18 Years Ago

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.

Reply to this topic

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.

samarinder 0 Newbie Poster · Answer 1 · 2008-06-17T10:48:12+00:00

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">&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>
</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 · Answer 2 · 2008-06-17T12:16:15+00:00

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

samarinder 0 Newbie Poster · Answer 3 · 2008-06-19T15:20:42+00:00

NO replies..........
plz help me out...........
i m in need....

Navigation misaligned in mozilla

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers