Weird Nav display in IE

QuinnLynn · 06-18-2009, 11:30 AM

Hi there,

So I am new to CSS and I am not sure what I am doing wrong here. All my content displays fine in FF but the nav bar shifts over in IE. Is there anything wrong with my code or do I need to add something?

My CSS:

Code:

#outer **
    width: 800px;
    background-color:#63773c;
    margin-top: 0px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: thin solid #000000;
}

#navbar **
	padding-left: 26px;
	position:absolute;
	top:211px;
}

#content **
padding-left: 26px;
}

body **
	background-color: #333300;
}

My HTML

HTML Code:

<div id="outer">
<img src="images/header_about.jpg" />
<div id="navbar">
	  <table width="726" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td><img src="images/home.jpg" width="107" height="18" /></td>
 			   <td><img src="images/about_us.jpg" width="158" height="18" /></td>
  			   <td><img src="images/services.jpg" width="149" height="18" /></td>
 			   <td><img src="images/projects.jpg" width="147" height="18" /></td>
 			   <td><img src="images/contact_us.jpg" width="165" height="18" /></td>
 		   </tr>
	  </table>
	</div>
    </br>
    </br>
    <p>&nbsp;</p>
  <h1 class="style1" id="content">About Us</h1>
	<p class="style2" id="content">I would like to introduce our company, Eagle Rock Underground LLC; licensed as a Class A General Engineering contractor, certified as a SBE (Small Business Enterprise) and SDVOB (Service Disabled Veteran-Owned Business). A family operated business since 2001, specializing in underground utility construction. This includes the construction of electric, telephone, fiber optics, water, sewer, storm drains, and reclaimed water systems.</p>
  <h2 id="content">Accreditations:  </h2>
	<ul>
    <li>A certified Service Disabled Veteran Owned Business (SDVOB) by the U.S.Veteran’s Administration
    <li>A certified Small Business Enterprise (SBE) by the City of Phoenix, Az.
    <li>Licensed as a Class A General Engineering Contractor in the state of Arizona
    <li>Licensed as a Class A General Engineering Contractor in the state of Nevada
    <li>Licensed as a Class A General Engineering Contractor in the state of Virginia
    <li>Licensed as a GF-9 Underground Utility Contractor in the state of New Mexico
	</li>
  </ul>
    </p>
</div>

Thanks Everybody

**wmorri** · 06-18-2009, 05:10 PM

Hi,

Ok you have some small issues that make a big difference in how your website is set up. First, I would guess that you haven't run your html through a validator. If you had the validator would have caught a lot of things for you. First is that you don't have a <DOCTYPE>, <head>, <body>, or <html> tags.

Ok, I went through and did a lot of the fixes for you. You might want to go through and read the html tutorial from W3Schools.

Start with that and then see what you get. If you need some more help then I can help you with what you are missing.

Cheers!

QuinnLynn · 06-19-2009, 07:05 AM

Thanks for the help, but I cannot find the corrections you mentioned. Also, I apologize for any confusion about my tags not being in the code, I left them out to save space :P sorry.

**wmorri** · 06-19-2009, 10:10 AM

Hi,

There are basic tags that need to be in a html source when you write a webpage. They are <DOCTYPE>, <html></html>, <head></head>, <title></title>, <body></body>, and since you are using CSS you also need a <link rel="stylesheet" type="text/css" href="whateverfile.css" />

For starters you will find at the site I gave you a tutorial on how html works and the basics of what you need. You can look at the source of any website to see the basic parts too.

Here is what you are need for source for a basic website:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<link rel="stylesheet" type="text/css" href="whatever_file.css" />

<title>

</title>

</head>

<body>

</body>

</html>

Take the above template and see if you can figure out where things go. I am not going to tell you all of it. But I have faith that you can figure some of it out.

Cheers!

QuinnLynn · 06-19-2009, 04:49 PM

Hey there,

Thanks but this is not what I need. I have all the tags in my actual code for the site, I did not post that stuff here because I was trying to save space on the thread. What I posted was the meat of the code that I am having issues with. If you can see anything wrong with the actual CSS that could result in my nav bar being shifted over than please let me know.

Thanks

**wmorri** · 06-19-2009, 05:19 PM

Hi,

When I add all of those tags into the source then I get something that looks like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- This is the css link -->
<link rel="stylesheet" type="text/css" href="Weird_Nav.css" />
<!-- / CSS Stylesheet -->
<title>
</title>
</head>
<body>
<div id="outer">
<img src="images/header_about.jpg" />
<div id="navbar">
	  <table width="726" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td><img src="images/home.jpg" width="107" height="18" /></td>
 			   <td><img src="images/about_us.jpg" width="158" height="18" /></td>
  			   <td><img src="images/services.jpg" width="149" height="18" /></td>
 			   <td><img src="images/projects.jpg" width="147" height="18" /></td>
 			   <td><img src="images/contact_us.jpg" width="165" height="18" /></td>
 		   </tr>
	  </table>
	</div>
    </br>
    </br>
    <p>&nbsp;</p>
  <h1 class="style1" id="content">About Us</h1>
	<p class="style2" id="content">I would like to introduce our company, Eagle Rock Underground LLC; licensed as a Class A General Engineering contractor, certified as a SBE (Small Business Enterprise) and SDVOB (Service Disabled Veteran-Owned Business). A family operated business since 2001, specializing in underground utility construction. This includes the construction of electric, telephone, fiber optics, water, sewer, storm drains, and reclaimed water systems.</p>
  <h2 id="content">Accreditations:  </h2>
	<ul>
    <li>A certified Service Disabled Veteran Owned Business (SDVOB) by the U.S.Veteran’s Administration
    <li>A certified Small Business Enterprise (SBE) by the City of Phoenix, Az.
    <li>Licensed as a Class A General Engineering Contractor in the state of Arizona
    <li>Licensed as a Class A General Engineering Contractor in the state of Nevada
    <li>Licensed as a Class A General Engineering Contractor in the state of Virginia
    <li>Licensed as a GF-9 Underground Utility Contractor in the state of New Mexico
	</li>
  </ul>
    </p>
</div>
</body>
</html>

HTML Code:

/* Weird_Nav.CSS */
#outer **
    width: 800px;
    background-color:#63773c;
    margin-top: 0px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: thin solid #000000;
}

#navbar **
	padding-left: 26px;
	position:absolute;
	top:211px;
}

#content **
	padding-left: 26px;
}

body **
	background-color: #333300;
}

I am sorry that I didn't understand you the first time you said that. I didn't see anything that was wrong with the CSS, or the HTML. I tried to open the file in IE7 and didn't get anything weird.

Cheers!

06-18-2009, 05:10 PM	#2 (permalink)
wmorri Moderator/Fedora Amb. Join Date: May 2008 Location: /pm/etc Posts: 2,715 OS: Window 7/Fedora 10 My System	Re: Weird Nav display in IE Hi, Ok you have some small issues that make a big difference in how your website is set up. First, I would guess that you haven't run your html through a validator. If you had the validator would have caught a lot of things for you. First is that you don't have a <DOCTYPE>, <head>, <body>, or <html> tags. Ok, I went through and did a lot of the fixes for you. You might want to go through and read the html tutorial from W3Schools. Start with that and then see what you get. If you need some more help then I can help you with what you are missing. Cheers! __________________ Linux Forever! Last edited by wmorri; 06-18-2009 at 08:42 PM.

06-19-2009, 07:05 AM	#3 (permalink)
QuinnLynn Registered User Join Date: Feb 2009 Posts: 11 OS: xp	Re: Weird Nav display in IE Thanks for the help, but I cannot find the corrections you mentioned. Also, I apologize for any confusion about my tags not being in the code, I left them out to save space :P sorry.

06-19-2009, 10:10 AM	#4 (permalink)
wmorri Moderator/Fedora Amb. Join Date: May 2008 Location: /pm/etc Posts: 2,715 OS: Window 7/Fedora 10 My System	Re: Weird Nav display in IE Hi, There are basic tags that need to be in a html source when you write a webpage. They are <DOCTYPE>, <html></html>, <head></head>, <title></title>, <body></body>, and since you are using CSS you also need a <link rel="stylesheet" type="text/css" href="whateverfile.css" /> For starters you will find at the site I gave you a tutorial on how html works and the basics of what you need. You can look at the source of any website to see the basic parts too. Here is what you are need for source for a basic website: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="whatever_file.css" /> <title> </title> </head> <body> </body> </html> Take the above template and see if you can figure out where things go. I am not going to tell you all of it. But I have faith that you can figure some of it out. Cheers! __________________ Linux Forever!

06-19-2009, 04:49 PM	#5 (permalink)
QuinnLynn Registered User Join Date: Feb 2009 Posts: 11 OS: xp	Re: Weird Nav display in IE Hey there, Thanks but this is not what I need. I have all the tags in my actual code for the site, I did not post that stuff here because I was trying to save space on the thread. What I posted was the meat of the code that I am having issues with. If you can see anything wrong with the actual CSS that could result in my nav bar being shifted over than please let me know. Thanks