CSS column alignment problem

Forum Moderators: not2easy

Message Too Old, No Replies

CSS column alignment problem

Blelisa

8:34 pm on Feb 9, 2004 (gmt 0)

Hi I am just about to forget about this whole CSS thing and go back to tables. I had my page ok, then for some reason one thing changed and now my alignment is off again. Could someone please take a lok and see if they can spot what I am doing wrong? I have been working on this one thing all day and am getting really frustrated!

[magneforcess.com...]

choster

8:38 pm on Feb 9, 2004 (gmt 0)

Blelisa, do you mind summarizing the exact problem, with the appropriate code snippets? We are not allowed to do site reviews here.

Blelisa

12:45 pm on Feb 10, 2004 (gmt 0)

I will try, I am going to list all of my code below:

Code for page:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">

<head>
<title>MagneForce Software Systems</title>
<meta name="robots" content="index,follow"/>
<meta name="description" content="MagneForce Software Systems produces software for the design and simulation of electric machines"/>
<meta name="keywords" content="MagneForce Software Systems"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="style1.css" title="Default" media="screen" />
<script language="JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_0122105046_0) return;
window.mm_menu_0122105046_0 = new Menu("root",100,21,"Georgia, Times New Roman, Times, serif",11,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",0,0,1000,-5,7,true,false,true,0,false,false);
mm_menu_0122105046_0.addMenuItem("About Us");
mm_menu_0122105046_0.addMenuItem("Contact Us");
mm_menu_0122105046_0.fontWeight="bold";
mm_menu_0122105046_0.hideOnMouseOut=true;
mm_menu_0122105046_0.bgColor='#000066';
mm_menu_0122105046_0.menuBorder=2;
mm_menu_0122105046_0.menuLiteBgColor='#FFFFFF';
mm_menu_0122105046_0.menuBorderBgColor='#CCCCCC';
window.mm_menu_0122105158_0 = new Menu("root",100,21,"Georgia, Times New Roman, Times, serif",11,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,false,true,0,false,false);
mm_menu_0122105158_0.addMenuItem("GenAC");
mm_menu_0122105158_0.addMenuItem("BLDC");
mm_menu_0122105158_0.addMenuItem("BCPM");
mm_menu_0122105158_0.addMenuItem("INDUS");
mm_menu_0122105158_0.fontWeight="bold";
mm_menu_0122105158_0.hideOnMouseOut=true;
mm_menu_0122105158_0.bgColor='#000066';
mm_menu_0122105158_0.menuBorder=2;
mm_menu_0122105158_0.menuLiteBgColor='#FFFFFF';
mm_menu_0122105158_0.menuBorderBgColor='#CCCCCC';
window.mm_menu_0122105252_0 = new Menu("root",109,20,"Georgia, Times New Roman, Times, serif",11,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,false,true,0,false,false);
mm_menu_0122105252_0.addMenuItem("Single Project");
mm_menu_0122105252_0.addMenuItem("Mutliple Projects");
mm_menu_0122105252_0.fontWeight="bold";
mm_menu_0122105252_0.hideOnMouseOut=true;
mm_menu_0122105252_0.bgColor='#000066';
mm_menu_0122105252_0.menuBorder=2;
mm_menu_0122105252_0.menuLiteBgColor='#FFFFFF';
mm_menu_0122105252_0.menuBorderBgColor='#CCCCCC';
window.mm_menu_0122105423_0 = new Menu("root",100,21,"Georgia, Times New Roman, Times, serif",11,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,false,true,0,false,false);
mm_menu_0122105423_0.addMenuItem("Forums");
mm_menu_0122105423_0.addMenuItem("On-Line");
mm_menu_0122105423_0.addMenuItem("Contact Us");
mm_menu_0122105423_0.addMenuItem("FAQ's");
mm_menu_0122105423_0.fontWeight="bold";
mm_menu_0122105423_0.hideOnMouseOut=true;
mm_menu_0122105423_0.bgColor='#000066';
mm_menu_0122105423_0.menuBorder=2;
mm_menu_0122105423_0.menuLiteBgColor='#FFFFFF';
mm_menu_0122105423_0.menuBorderBgColor='#CCCCCC';
window.mm_menu_0122105455_0 = new Menu("root",103,21,"Georgia, Times New Roman, Times, serif",12,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,true,true,0,false,false);
mm_menu_0122105455_0.addMenuItem("Press Releases");
mm_menu_0122105455_0.addMenuItem("Seminars");
mm_menu_0122105455_0.addMenuItem("Articles");
mm_menu_0122105455_0.fontWeight="bold";
mm_menu_0122105455_0.hideOnMouseOut=true;
mm_menu_0122105455_0.bgColor='#FFFFFF';
mm_menu_0122105455_0.menuBorder=2;
mm_menu_0122105455_0.menuLiteBgColor='#000066';
mm_menu_0122105455_0.menuBorderBgColor='#CCCCCC';
window.mm_menu_0122105610_0 = new Menu("root",100,21,"Georgia, Times New Roman, Times, serif",12,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,false,true,0,false,false);
mm_menu_0122105610_0.addMenuItem("Forums");
mm_menu_0122105610_0.addMenuItem("FAQ's");
mm_menu_0122105610_0.addMenuItem("Contact Us");
mm_menu_0122105610_0.fontWeight="bold";
mm_menu_0122105610_0.hideOnMouseOut=true;
mm_menu_0122105610_0.bgColor='#FFFFFF';
mm_menu_0122105610_0.menuBorder=2;
mm_menu_0122105610_0.menuLiteBgColor='#000066';
mm_menu_0122105610_0.menuBorderBgColor='#CCCCCC';
window.mm_menu_0122112135_0 = new Menu("root",100,21,"Georgia, Times New Roman, Times, serif",11,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,false,true,0,false,false);
mm_menu_0122112135_0.addMenuItem("Press Releases");
mm_menu_0122112135_0.addMenuItem("Articles");
mm_menu_0122112135_0.addMenuItem("Seminars");
mm_menu_0122112135_0.fontWeight="bold";
mm_menu_0122112135_0.hideOnMouseOut=true;
mm_menu_0122112135_0.bgColor='#FFFFFF';
mm_menu_0122112135_0.menuBorder=2;
mm_menu_0122112135_0.menuLiteBgColor='#000066';
mm_menu_0122112135_0.menuBorderBgColor='#CCCCCC';

window.mm_menu_0205145709_0 = new Menu("root",100,17,"Georgia, Times New Roman, Times, serif",11,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,false,true,0,false,true);
mm_menu_0205145709_0.addMenuItem("Links");
mm_menu_0205145709_0.fontWeight="bold";
mm_menu_0205145709_0.hideOnMouseOut=true;
mm_menu_0205145709_0.bgColor='#FFFFFF';
mm_menu_0205145709_0.menuBorder=2;
mm_menu_0205145709_0.menuLiteBgColor='#000066';
mm_menu_0205145709_0.menuBorderBgColor='#CCCCCC';

mm_menu_0205145709_0.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>

<body>
<script language="JavaScript1.2">mmLoadMenus();</script>
<div align="center">
<img src="title.jpg" alt="MagneForce Software Systems" width="100%" height="65" hspace="0" align="absbottom"/>
<table border="0" align="center" cellpadding="0" cellspacing="0"hspace="0" vspace="0">
<tr>
<td> <a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105046_0,0,20,null,'image1')" onmouseout="MM_startTimeout();"><img src="cbutt.png" name="image1" width="103" height="20" border="0" id="image1" /></a><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105158_0,0,20,null,'image2')" onmouseout="MM_startTimeout();"><img src="pbutt.png" name="image2" width="103" height="20" border="0" id="image2"></a><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105252_0,0,20,null,'image3')" onmouseout="MM_startTimeout();"><img src="sbutt.png" name="image3" width="103" height="20" border="0" id="image3"></a><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105423_0,0,20,null,'image4')" onmouseout="MM_startTimeout();"><img src="dbutt.png" name="image4" width="103" height="20" border="0" id="image4"></a><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105610_0,0,20,null,'image5')" onmouseout="MM_startTimeout();"><img src="subutt.png" name="image5" width="103" height="20" border="0" id="image5"></a><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122112135_0,0,20,null,'image6')" onmouseout="MM_startTimeout();"><img src="nebutt.png" name="image6" width="103" height="20" border="0" id="image6"></a><a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0205145709_0,0,20,null,'image7')" onmouseout="MM_startTimeout();"><img src="wwbutt.png" name="image7" width="100" height="20" border="0" id="image7" /></a>
</td>
</tr>
</table>
<div class="left">
<p align="left">
<img src="loginbutton.png" width="119" height="26"/><br />
<form method="post" action="http://www.magneforcess.com/Chk_login.asp">
User Name<br/>
<input type="text" name="Username" size="20" /><br/>
Password<br/>
<input type="password" name="Password" size="20" /><br/>
<input type="submit" value="Sign In" />
<br />
<br />
<br />
<div align="left">
<img src="productbutton.png" alt="Products" width="119" height="26"/><br />
<ul>
<li><a href="http://www.magneforcess.com/genac.html" target="_blank">GenAC</a></li>
<li><a href="http://www.magneforcess.com/bldc.html" target="_blank">BLDC</a></li>
<li><a href="http://www.magnmeforcess.com/bcpm.html" target="_blank">BCPM</a></li><br />
<img src="dwnloadbutton.png" alt="Downloads" width="119" height="26"/><br />
<ul style="square">
<li>Manuals</li>
<li>Demos</li>
<li>Revisions</li>
</ul>
</div>
</div>
<div class="middle">
<p>bbbbbbbb</p>
</div>
<div class="left">
<p align="right">
<img src="supportbutton.png" width="119" height="26"/>
<div align="right">
<ol>
<li>Forums         </li>
<li>Training        </li>
<li>FAQ's          </li>
<li>Contact Us   </li>
</ol>
<img src="Whatnewbutton.png" alt="What's New" width="119 height="26"/><br />
<object>
<param name="movie" value="sidebarflash.swf" />
<param NAME="wmode" Value="transparent" />
<embed src="sidebarflash.swf" width="118" height="70" wmode="transparent"> </embed></object>
</div>
<br />
<br />
<br />
<div align="right">
<img src="articlebutton.png" alt="feature articles" width="119" height="26"/><br />
Blah Blah Blah<br />
Blah Blah Blah <br />
</div>
</div>
</body>
</html>

Code for Style Sheet1:
@import url("http://www.magneforcess.com/demo2/style111.css");

body {background-image: url('bluegrey.gif');
background-repeat: repeat;
Background-color: transparent;
color: #000080;
font-family: times, courier;
font-size; 11pt;}

input {width: 110px;}

Code for Style Sheet 111:
div#header {align: center;
height: 100px;
width: 900px;
padding: 0px 3px 2px 3px;}

.left {background-image: url('bluegrey.gif')
color: #000;
float: left;
border: none;
margin-top: 2em;}

.middle {background-image: url('bluegrey.gif')
color: #000;
float: left;
width: 50%;
margin-top: 2em;
margin-bottom: 0;}

I hope that helps!