Side navigation bar look different

Question

kako13 1 Junior Poster in Training

15 Years Ago

Hi, the site navigation bard (on gray) look different from page to page. I want it to keep the same size no matter what page I visit. I attached the CSS and the html pages.

* This problem seems to happen in Internet Explorer.

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #333333;
	background-color:#CCCCCC;
	margin:0px;
	padding: 0px;
}
a {
	color: #12B7ED;
}
a:visited {
	color: #3C88B0;
}
a:hover {
	color:#0C7598;
}
h1 {
	font-size: 22px;
	font-weight: normal;
	color: #11B4EB;
	margin-top: 0px;
	margin-bottom: 20px;
}
.footer{
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	font-size: 9px;
	color:#000000;
	text-align: right;
	background-color: #EAEAEA;
}
.footer-l {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	font-size: 9px;
	color:#000000;
	text-align: left;
	width::-10px;
	background-color: #EAEAEA;
}
.menu_nav {
	color: #ffffff;
	padding-top: 7px;
	padding-left: 10px;
	padding-bottom: 7px;
}
.menu_nav a{
	color: #12B7ED;
	text-decoration: none;
	padding-right: 15px;
	font-size:12px
}
.menu_nav a:visited{
	color: #12B7ED;
	text-decoration: none;
}
.menu_nav a:hover{
	color: #ffffff;
	text-decoration: none;
}
.footer a {
	color: #999999;
	text-decoration: none;
}
.footer a:hover {
	color: #666666;
	text-decoration: underline;
}
.left_column {
    font-size:12px;
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
	width: 150px;
	color:#11B4EB;
	font-weight: bold;
	background-color:#EAEAEA;
}
.left_column_blue
{
color:#3399FF;
font-weight: bold;
}
.left_column_green
{
color:#33CC33; 
font-weight: bold;
}
.left_column_black
{
color:#000000;
font-weight: bold;
}
.left_column ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	font-size:12px
}
.left_column li{
	padding-top: 2px;
	padding-bottom: 2px;
}
.left_column a{
	text-decoration: none;
	font-weight: bold;
}
.right_column {
	padding-top: 15px;
	padding-bottom: 25px;
	padding-right: 10px;
	width: 850px;
}
.right_column_link_blue {color: #0000CC; }

.right_column_main {
	font-size:24px;
	font-weight: bold;
}
#container {
	background-color: #FFFFFF;
	height: 400px;
	width: 800px;
	color: inherit;
}
#local-container {
	color: #FFFFFF;
	position: relative;
	height: 400px;
	background-color:inherit;
}
.columns {
	background-color: #FFFFFF;
	width: 220px;
	height: 60px;
	float: left;
	color: #000000;
}
#container-pam {
	background-color: #FFFFFF;
	height: 400px;
	width: 800px;
	color: inherit;
}
#local-container-pam {
	color: #FFFFFF;
	position: relative;
	height: 400px;
	background-color: inherit;
}
.columns-left1-pam{
	background-color: #FFFFFF;
	width: 150px;
	height: 20px;
	float: left;
	color: #000000;
}
.columns-left2-pam{
	background-color: #FFFFFF;
	width: 150px;
	height: 20px;
	float: left;
	color: #000000;
}

<!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Home - </title>
<!-- InstanceEndEditable -->
<link href="css_style.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="favicon.ico"/> <!-- Added by me -->
</head>

<body>
<table width="1038" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
<td colspan="2"><img src="images/header.png" alt="header" width="1038" height="140" /></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#333333" class="menu_nav"><a href="index.html">. Home</a><a href="applications.html" target="_self">. Applications </a><a href="http://127.0.0.1/limesurvey/index.php?sid=85543&lang=en">. Feedback</a> <a href="search.php" target="_self">. Search</a></td>
  </tr>
  <tr>
    <td width="178" valign="top" class="left_column"><!-- InstanceBeginEditable name="left_column" -->
      <p>HOME</p>
      <p>LINK</p>
      <p>Applications<span class="left_column_black"></span></p>
      <ul><li></li>
      </ul>
    <!-- InstanceEndEditable --></td>
    <td width="860" valign="top" class="right_column"><!-- InstanceBeginEditable name="right_column" -->
      <h1 align="center" class="right_column">DARA DARA </h1>
      <p>&nbsp; </p>
      <!-- InstanceEndEditable --></td>
  </tr>
  <tr>
  	<td colspan=2 class="footer">Version 1.0 | 07-24-09 Author: </td>  
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>

<!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link href="css_style.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="favicon.ico"/> <!-- Added by me -->
</head>

<body>
<table width="1038" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
<td colspan="2"><img src="images/header.png" alt="header" width="1038" height="140" /></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#333333" class="menu_nav"><a href="index.html">. Home</a><a href="applications.html" target="_self">. Applications </a><a href="http://127.0.0.1/limesurvey/index.php?sid=85543&lang=en">. Feedback</a> <a href="search.php" target="_self">. Search</a></td>
  </tr>
  <tr>
    <td width="178" valign="top" class="left_column"><!-- InstanceBeginEditable name="left_column" -->HOME<!-- InstanceEndEditable --></td>
    <td width="860" valign="top" class="right_column"><!-- InstanceBeginEditable name="right_column" -->
      <h1>Applications</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Cras a quam eu sapien elementum eleifend. Suspendisse ultrices  sapien ac diam. Fusce arcu tellus, degestas eu, porta vitae, tristique nec, dui.  Phasellus vel velit. Cras neque. Vestibulum ante ipsum primis in faucibus orci  luctus et ultrices posuere cubilia Curae; Aenean molestie, lacus ac mattis  adipiscing, magna risus imperdiet magna, eget ullamcorper arcu nulla tincidunt  do lor. Vestibulum scelerisque eleifend nisi. Donec quam turpis, molesti e id, consequat  vel, cursus nec, massa. Integer  nisi neque, facilisis non, tempor at, convallis vel, enim. Ut ac magna. Quisque  ligula mi, luctus at, accumsan ut, nonummy a liquet, nisi.</p>
      <p> Proin arcu. Donec non enim. Aliquam risus nisl,  nonummy varius, tincidunt quis, dictum et, nisl. Praesent sapien urna, viverra  nec, feugiat et, interdum ut, turpis. Sed nec purus. Phasellus a tortor. Nullam  pharetra. Nulla facilisi. Ut sodales justo in eros. Praesent volutpat posuere  metus. Ut viverra, dolor quis blandit laoreet, odio diam blandit tortor, vitae  ullamcorper felis orci at augue. In hac habitasse platea dictumst. Fusce at  odio. Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. </p>
    <!-- InstanceEndEditable --></td>
  </tr>
  <tr>
  	<td colspan=2 class="footer">Version 1.0 | 07-24-09 Author:  </td>  
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>

web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

sample.zip (3.24 KB)

2 Contributors
1 Reply
73 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by MidiMagic

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.

MidiMagic 579 Nearly a Senior Poster · Answer 1 · 2009-07-29T10:31:31+00:00

Using pixels to define sizes causes all kinds of trouble. Different screen resolutions display the pixel sizes in different ways.

Negative sizes are not defined. This throws browsers into quirks mode.

Don't put size styles (width, height) and nonzero surround styles (margin, border, padding) in the same style or in the same tag. Using them together causes browser incompatibilities.

Don't put units of measure on 0 values. This causes Firefox to throw out the entire style and enter quirks mode.