ie body alignment issues [Archive]

View Full Version : ie body alignment issues

wawebguy

08-03-2007, 05:08 PM

Hi,

I'm designing a website for a flight school I'm working for, and have run into a snag. I have each page set up with a menu bar on the left side, then the remaining content on the main page body. The page displays correctly on Firefox and Netscape. In IE, though, the main text content of each page on the site is shown below the menu bar. Here's the code I'm using for the main index page (as an example):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Wadsworth Aviation</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div align="center">
<div id="container">
<div id="container-bg">

<div id="logo">
<img src="images/wa_logo3.jpg">
</div>

<div id="container-inner">

<div id="menu">
<table id="menu-table">
<TR>
<TD class="menu"><a href="index.html" class="menu">Home</a></TD>
</TR>
<TR>
<TD class="menu"><a href="Aircraft.html" class="menu">Aircraft</a></TD>
</TR>
<TR>
<TD class="menusub"><a href="N7447J.html" class="menu">Piper Arrow</a></TD>
</TR>
<TR>
<TD class="menusub"><a href="N44195.html" class="menu">Piper Archer</a></TD>
</TR>
<TR>
<TD class="menusub"><a href="N7576W.html" class="menu">Piper Cherokee</a></TD>
</TR>
<TR>
<TD class="menusub"><a href="N20472.html" class="menu">Cessna 172</a></TD>
</TR>
<TR>
<TD class="menusub"><a href="N45496.html" class="menu">Cessna 150</a></TD>
</TR>
<TR>
<TD class="menu"><a href="Instruction.html" class="menu">Instruction</a></TD>
</TR>
<TR>
<TD class="menu"><a href="FAQ.html" class="menu">FAQ</a></TD>
</TR>
<TR>
<TD class="menu"><a href="directions.html" class="menu">Contact Us</a></TD>
</TR>
<TR>
<TD class="menu"><a href="photoindex.html" class="menu">Photo Gallery</a></TD>
</TR>
</table>
</div>


<div id="main">
<h2>Welcome to Wadsworth Aviation</h2>
<p>At Wadsworth Aviation, we strive to maintain a higher level of instruction and to promote safety. With a well groomed staff of certified flight instructors, well maintained aircraft, and a great facility, you can be assured that Wadsworth Aviation is one of the finest flight schools around.</p>
<p>Our ground schools are held 4-5 times per year so we can maintain smaller classes and provide individual care. We stock all required books, charts, and supplies to assist you in achieving your goals.</p>
<p>With day and evening classes, we can fit your schedule. We are open 7 days a week and will fly year round as weather permits.</p>
<p>We train in both high and low wing aircraft so you can choose which best fits your need.</p>
<p>Either flying for fun or for a career, we can assure you that we will do our best to help you be the type of pilot you want to be.</p>
<p>Sincerely,</p>
<p>Joe Instructor, CFII</p>
<br>
<p align="center">Problems or comments? <a href="mailto:webmaster@wadsworthaviation.com">Click here</a> to e-mail the webmaster.</p>
</div>

</div>
<div id="end">
<p class="end">©Copyright 2006 by Wadsworth Aviation, Inc.</p>
</div>
</div>
</div>
</div>

</body>
</html>

I can't check the code on IE6, since I currently use IE7. Any suggestions?

Spock

08-04-2007, 02:20 AM

It would help to be able to see your CSS file as well since a lot of your formatting is hidden in there. Offhand, I would say, since you are using tables that yo need to consider the entire menu bar and the page content as a single table with two columns. Instead, you have a table for the menu, which is closed off, and then the content. I have IE6 and it displays the same as under Firefox.

I do something similar on my site (http://pctalk.info/) but have the Navbar on the right.

Hopefully one of our more experienced members will be along to help you before too long.

wawebguy

08-04-2007, 03:48 PM

Here is the text of the CSS file for my site:

/* Wadsworth Aviation Website CSS */
* {
font-family: helvetica, arial, sans-serif;
}

body {
background-color: white;
/*background-image: url(../images/overcast-sky.jpg);*/
background-image: url(../images/bg_page.jpg);
margin: 0
}

div, td, p {
font-size:12px;
line-height: 18px;
color: #333333;
}

#container {
width: 900px;
padding: 0;
text-align: left;
margin: 50px auto;
}

#container-bg {
position: relative;
width: 900px;
float: left;
top: 0;
left: 0;
background: transparent url(../images/bg_content2.jpg) repeat-y left top;
/*outline: black outset 1px;*/
}

#logo {
height: 150px;
position: relative;
width: 100%;
float: left;
background: red none no-repeat left top;
}

#picheader {
position: relative;
float: left;
clear: left;
width: 100%;
height: 100px;
background-color: green;
}

#container-inner {
position: relative;
float: left;
clear: left;
}

#menu {
position: relative;
float: left;
clear: left;
width: 175px;
min-height: 600px;
}

#menu-table {
width: 100%;
text-align: left;
}

td.menu {
padding: 3px 5px 3px 10px;
}

td.menusub {
padding: 3px 5px 3px 20px;
}

a {
text-decoration: none;
}

a:hover {
font-weight: bold;
text-decoration: underline;
}

a.menu {
color: white;
}

#main {
position: relative;
float: left;
background-color: transparent;
width: 690px;
margin: 15px 15px 20px 20px;
text-align: justify;
}

#end {
position: relative;
float: left;
clear: left;
background-color: black;
width: 100%;
}

p.end {
color: white;
margin: 2px;
font-size: smaller;
}

Thanks for your help.

Spock

08-05-2007, 03:53 PM

Thanks for posting both parts of your page. I'm not sure I'm the best one to help you as I'm fairly new at all this myself. While I will take a look and try different things, you will probably be better off if some of our more experienced members find this post and are able to help.

Hope they reply soon. ;)

For anyone who does try to help:

There are 3 pictures you will have to place in an images folder,
The background picture appears that it should be fairly dark,
the CSS file needs to go in a CSS folder.

wawebguy

08-06-2007, 04:00 PM

Thanks again,

If this helps anyone out there, here are some of the background image files (see attached). There are a couple of others, but this is all I could upload at one time.

Spock

08-09-2007, 12:59 PM

wawebguy,

I have posted the link to this topic in another forum run by two of the Moderators from here who will probably be able to help you right away. I am going to send you the link to their forum topic via PM.

Hope to see you there!

wawebguy

08-09-2007, 04:04 PM

Spock,

Thanks again for your help. I think I stumbled upon at least a partial solution. I found that the "container-inner" part of the CSS file had no specific width. I set a with of 900 px., which seems to have partially solved the problem. Unfortunately, the titles on some of the pages have been chopped and/or compressed as a result. I'm addressing each page one at a time to resolve those issues.

Tarmithius

08-10-2007, 03:24 AM

You want to be careful of setting widths higher than 800px. Some people may have monitors that are set to 800x600. These days that is slim to none but you never know, if they do have that setup you are forcing them to scroll horizontally.

Second of all I would get rid of the table for the menu.