0

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>
2
Contributors
1
Reply
2
Views
8 Years
Discussion Span
Last Post by MidiMagic
0

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.

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.