Member Avatar for x_mysterious_x

I m trying to make a template for my website. there is a top box and a navigation box. Position of navigation box is relative to top box and at a 5% of distance from top box. This distance is visible in Internet explorer but in mozilla navigation box appears right after the top box. No gap between both.

How can i show gap between the two bars in mozilla as well.

Also contents of navigation bar are horizontally in center but not vertically. and i cant set them in middle. How can i do that?

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#FFFFFF
}
.top {
	background-image: url(top.gif);
	background-repeat: repeat-x;
	height: 92px;
	border: 1px solid #CCCCCC;
}
.logo {
	top: 40px;
	position: relative;
	left: 20px;
}
.nav {
	background-image: url(nav_back.gif);
	background-repeat: repeat-x;
	position: relative;
	top: 5%;
	border: 1px solid #CCCCCC;
	height: 50px;
	right: 5%;
	width: 90%;
	left: 5%;
	text-align: center;
	vertical-align: text-bottom;
	z-index: 0;
}
.nav_right{
	background-image: url(nav_right.gif);
	height: 52px;
	position: absolute;
	background-repeat: no-repeat;
	right: -30px;
	width: 30px;
	z-index: 1;
	clip: rect(auto,auto,auto,auto);
	top: 0px;
	bottom: 0%;
}
.nav_left{
	background-image: url(nav_left.gif);
	height: 52px;
	position: absolute;
	background-repeat: no-repeat;
	left: -5px;
	width: 30px;
	z-index: 1;
	clip: rect(auto,auto,auto,auto);
	top: 0px;
	bottom: 0%;
}

-->
</style>
</head>

<body>

<div class="top"><img class="logo" src="logo.gif"/></div>
<div class="nav">abc<div class="nav_left"></div><div class="nav_right"></div>
</div>

</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 129 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Using top: 5% on a relatively positioned nav is brittle and easy to misread across engines. Percentage offsets for top are resolved against the containing block (the spec: CSS spec for "top"), and relative-positioning shifts a box visually but leaves its original flow space — that combination produces inconsistent gaps between siblings. For predictable spacing, avoid relying on top with percent on a relatively positioned sibling.

Two practical fixes that work consistently:

  • Keep normal document flow and create the gap with an explicit margin in px/em (percent vertical margins are relative to the container width, so avoid % for vertical spacing). See margin-top behavior on MDN.

    /* predictable gap and simple vertical centering for single-line labels */
.nav {
  margin-top: 12px;
  height: 3rem;
  line-height: 3rem;    /* vertically centers single-line text */
  text-align: center;
}

  • Or anchor the nav to the bottom of the top bar: wrap both in a positioned wrapper and make the nav absolute so top:100% places it immediately below the top box. Use flexbox inside the nav for robust vertical/horizontal centering.

    .header { position: relative; }

.nav {
  position: absolute;
  top: 100%;
  left: 5%;
  right: 5%;
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: center;  /* horizontal centering */
  height: 3rem;
}

A few quick notes tied to earlier replies: ’s padding suggestion can add space but is less explicit than margin/absolute placement; is right that 0 is the canonical zero value (though 0px is accepted). When debugging, inspect computed values in devtools, verify standards-mode DOCTYPE, and test with simple px margins first to confirm the gap before switching to more advanced layout methods (flexbox or absolute positioning).

Recommended Answers

All 2 Replies

Member Avatar for Member #210412

use padding and position body with relative too

Edited by Member #210412 because: n/a
Member Avatar for almostbob

0px is invalid, its just 0

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.