CSS Positioning Help

  • blelisa
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Upstate New York

Post 3+ Months Ago

Hi,

I was wondering if anyone can help me. I have a page I made with three columns. I made them using CSS positioning instead of tables to be a "good webmaster" and keep up with the recent times. However, my positioning does not remain the same across the different browsers and the different window sizes. How do I write my css so that it shows correctly in all :?:
Any help is appreciated.
Lisa
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

You actually don't need positioning to make your page in three columns. And I know exactly what you're saying. Positioning frustrates me to the hilt. I'm still experimenting with it. But I can show you exactly how to accomplish your goal, but it's up to you to study and understand it.

The W3C gives you exactly what you need on their home page. View the source for their home page, and then study how all of the different styles for the elements are used. Here is their home page link: http://www.w3.org

Now for that page they have 2 external style sheets. The first is called in the source of the page itself. The second is called in the @import on the first line of the second page. Below are the two style sheets to study. You'll notice that they don't have a single positioning attribute. Instead, if you look closely, the do it by managing the percentage width of the DIV element classes. Also notice that they cover virtually every element between the two style sheets as well as adding the code that standards recommend for those with disabilities.

Style sheet one:
Code: [ Select ]
@import url("http://www.w3.org/StyleSheets/home-import.css");

/* Copyright 1997-2003 W3C (MIT, ERCIM, Keio). All Rights Reserved.
  The following software licensing rules apply:
  http://www.w3.org/Consortium/Legal/copyright-software */

/* $Id: home.css,v 2.17 2003/09/24 21:14:14 slesch Exp $ */

/* ****************** body *************** */

html, body {
  background: #fff;
  color: #000;
}

html, body, h2, h3, h4, div, p, ul, li, input {
  font-family: Arial, Helvetica, sans-serif;
}

#logo, #slogan {
  text-align: center;
  margin: 0;
  padding: 0;
  margin-bottom: 0.3em;
}

#slogan {
  background: #fff;
  color: #777;
  font-family: Times, "Times New Roman", serif;
  font-style: italic;
  font-weight: bold;
}

.date {
  font-size: small;
}

.small, .archive, .copyright {
  font-size: small;
}

.invisible, .invisible a {
  display: none;
  background: #fff;
  color: #fff;
}

.copyright {
  margin-top: 0;
  margin-bottom: 0;
}

.hide {
  visibility: hidden;
  background: #fff;
  color: #fff;
  clear: both;
  margin: 0;
}

.whiteout {
  background: #fff;
  color: #fff;
}

a:link {
  background: #fff;
  color: #037;
}

a:visited {
  background: #fff;
  color: #636;
}

a:active {
  background: #ffc;
  color: #900;
  text-decoration: none;
}

a img { color: #fff; }     /* hide the border in Netscape 4 */
@media all {          /* hide from Netscape 4 */
  a img { color: inherit;   /* undo the rule above */
  border: none;        /* hide from Netscape 4 */
  }
}
  1. @import url("http://www.w3.org/StyleSheets/home-import.css");
  2. /* Copyright 1997-2003 W3C (MIT, ERCIM, Keio). All Rights Reserved.
  3.   The following software licensing rules apply:
  4.   http://www.w3.org/Consortium/Legal/copyright-software */
  5. /* $Id: home.css,v 2.17 2003/09/24 21:14:14 slesch Exp $ */
  6. /* ****************** body *************** */
  7. html, body {
  8.   background: #fff;
  9.   color: #000;
  10. }
  11. html, body, h2, h3, h4, div, p, ul, li, input {
  12.   font-family: Arial, Helvetica, sans-serif;
  13. }
  14. #logo, #slogan {
  15.   text-align: center;
  16.   margin: 0;
  17.   padding: 0;
  18.   margin-bottom: 0.3em;
  19. }
  20. #slogan {
  21.   background: #fff;
  22.   color: #777;
  23.   font-family: Times, "Times New Roman", serif;
  24.   font-style: italic;
  25.   font-weight: bold;
  26. }
  27. .date {
  28.   font-size: small;
  29. }
  30. .small, .archive, .copyright {
  31.   font-size: small;
  32. }
  33. .invisible, .invisible a {
  34.   display: none;
  35.   background: #fff;
  36.   color: #fff;
  37. }
  38. .copyright {
  39.   margin-top: 0;
  40.   margin-bottom: 0;
  41. }
  42. .hide {
  43.   visibility: hidden;
  44.   background: #fff;
  45.   color: #fff;
  46.   clear: both;
  47.   margin: 0;
  48. }
  49. .whiteout {
  50.   background: #fff;
  51.   color: #fff;
  52. }
  53. a:link {
  54.   background: #fff;
  55.   color: #037;
  56. }
  57. a:visited {
  58.   background: #fff;
  59.   color: #636;
  60. }
  61. a:active {
  62.   background: #ffc;
  63.   color: #900;
  64.   text-decoration: none;
  65. }
  66. a img { color: #fff; }     /* hide the border in Netscape 4 */
  67. @media all {          /* hide from Netscape 4 */
  68.   a img { color: inherit;   /* undo the rule above */
  69.   border: none;        /* hide from Netscape 4 */
  70.   }
  71. }


Style sheet 2:
Code: [ Select ]
/* Copyright 1997-2003 W3C (MIT, ERCIM, Keio). All Rights Reserved.
  The following software licensing rules apply:
  http://www.w3.org/Consortium/Legal/copyright-software */

/* $Id: home-import.css,v 2.5 2003/10/14 23:55:35 slesch Exp $ */

/* ****************** columns *************** */

.navBlock {
  background: #eec;
  color: #000;
  float: left;
  width: 26%;
  border: none;
}

p.small + div.navBlock {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

div.newsBlock + div.navBlock {
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.newsBlock {
  background: #fff;
  color: #000;
  float: left;
  width: 46%;
  margin-bottom: 0;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

/* ****************** news ************** */

h2.newsHeading {
  background: #005a9c;
  color: #fff;
  border: none;
  border-top: 1px solid #000;
  width: 100%;
  font-weight: bold;
  font-size: medium;
  text-align: center;
  margin-top: 0;
  padding: 0.1em;
}

div.item h3 {
  font-size: 150%;
  margin-bottom: -0.3em;
}

div.item, .pastNews {
  padding: 0 0.7em 0 1em;
}

.headline {
  background: #fff;
  color: #900;
  margin-top: 0.4em;
}

div.item ul li {
  margin-left: 12px;
}

/* ****************** banner ************** */

div.banner {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
}

div.banner a:link {
  background: #fff;
  color: #048;
}

div.banner a:visited {
  background: #fff;
  color: #636;
}

div.banner a:active {
  background: #ffc;
  color: #048;
  text-decoration: none;
}

div.banner a:hover {
  background: #ffc;
  color: #900;
  text-decoration: none;
}

/* ****************** navigation bars ************** */

.navBlock {
  padding-bottom: 0.5em;
  border-bottom: 1px solid #000;
}

.navBlock h2.navhead {
  background: #aa7;
  color: #fff;
  border: none;
  width: 100%;
  font-weight: bold;
  font-size: medium;
  text-indent: 0.5em;
  margin-top: 0;
  padding: 0.1em 0;
}

.navBlock h2, .navBlock div, .navBlock p, .navBlock ul {
  background: #eec;
  color: #000;
}

.navBlock div, .navBlock p, .navBlock ul {
  margin-top: 0.2em;
}

.navBlock li {
  margin-left: 0;
  background: #eec;
  color: #aa7;
}

.navBlock p, .navBlock div {
  text-indent: 0.3em;
}

.navBlock form {
  margin-top: 0;
  padding-left: 0.2em;
}

a.navlink img { color: #eec; }
@media all {
 a.navlink img {
  color: inherit;
  border: none;
  }
}

/* next three rules for acronyms in Mac IE 4.01 and 4.5 */

.navBlock a:link {
  background: #eec;
  color: #037;
}

.navBlock a:visited {
  background: #eec;
  color: #636;
}

.navBlock a:active {
  background: #ffc;
  color: #900;
  text-decoration: none;
}

/* next three rules for most browsers */

a.navlink:link {
  background: #eec;
  color: #037;
}

a.navlink:visited {
  background: #eec;
  color: #636;
}

a.navlink:active {
  background: #ffc;
  color: #900;
  text-decoration: none;
}

/* ****************** printing ************** */

@media print {
  h1, h2, h3,
  h4, h5, h6  { page-break-after: avoid; page-break-inside: avoid }
  blockquote,
  pre      { page-break-inside: avoid }
  ul, ol, dl  { page-break-before: avoid }
  .navbar    { background-color: #fff; color: #000; border-color: #000;
border-width: 1px; }
  a.navlink, a.bannerLink   { font-weight: normal }
}

/* ****************** speech ************** */

@media aural {
  h1, h2, h3,
  h4, h5, h6  { voice-family: paul, male; stress: 20; richness: 90 }
  h1      { pitch: x-low; pitch-range: 90 }
  h2      { pitch: x-low; pitch-range: 80 }
  h3      { pitch: low; pitch-range: 70 }
  h4      { pitch: medium; pitch-range: 60 }
  h5      { pitch: medium; pitch-range: 50 }
  h6      { pitch: medium; pitch-range: 40 }
  li, dt, dd  { pitch: medium; richness: 60 }
  dt      { stress: 80 }
  pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  em      { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  strong    { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  dfn      { pitch: high; pitch-range: 60; stress: 60 }
  s, strike   { richness: 0 }
  i       { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  b       { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  u       { richness: 0 }
  a:link    { voice-family: harry, male }
  a:visited   { voice-family: betty, female }
  a:active   { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
  1. /* Copyright 1997-2003 W3C (MIT, ERCIM, Keio). All Rights Reserved.
  2.   The following software licensing rules apply:
  3.   http://www.w3.org/Consortium/Legal/copyright-software */
  4. /* $Id: home-import.css,v 2.5 2003/10/14 23:55:35 slesch Exp $ */
  5. /* ****************** columns *************** */
  6. .navBlock {
  7.   background: #eec;
  8.   color: #000;
  9.   float: left;
  10.   width: 26%;
  11.   border: none;
  12. }
  13. p.small + div.navBlock {
  14.   border-top: 1px solid #000;
  15.   border-left: 1px solid #000;
  16. }
  17. div.newsBlock + div.navBlock {
  18.   border-top: 1px solid #000;
  19.   border-right: 1px solid #000;
  20. }
  21. .newsBlock {
  22.   background: #fff;
  23.   color: #000;
  24.   float: left;
  25.   width: 46%;
  26.   margin-bottom: 0;
  27.   border-left: 1px solid #000;
  28.   border-right: 1px solid #000;
  29.   border-bottom: 1px solid #000;
  30. }
  31. /* ****************** news ************** */
  32. h2.newsHeading {
  33.   background: #005a9c;
  34.   color: #fff;
  35.   border: none;
  36.   border-top: 1px solid #000;
  37.   width: 100%;
  38.   font-weight: bold;
  39.   font-size: medium;
  40.   text-align: center;
  41.   margin-top: 0;
  42.   padding: 0.1em;
  43. }
  44. div.item h3 {
  45.   font-size: 150%;
  46.   margin-bottom: -0.3em;
  47. }
  48. div.item, .pastNews {
  49.   padding: 0 0.7em 0 1em;
  50. }
  51. .headline {
  52.   background: #fff;
  53.   color: #900;
  54.   margin-top: 0.4em;
  55. }
  56. div.item ul li {
  57.   margin-left: 12px;
  58. }
  59. /* ****************** banner ************** */
  60. div.banner {
  61.   text-align: center;
  62.   font-weight: bold;
  63.   font-size: 120%;
  64. }
  65. div.banner a:link {
  66.   background: #fff;
  67.   color: #048;
  68. }
  69. div.banner a:visited {
  70.   background: #fff;
  71.   color: #636;
  72. }
  73. div.banner a:active {
  74.   background: #ffc;
  75.   color: #048;
  76.   text-decoration: none;
  77. }
  78. div.banner a:hover {
  79.   background: #ffc;
  80.   color: #900;
  81.   text-decoration: none;
  82. }
  83. /* ****************** navigation bars ************** */
  84. .navBlock {
  85.   padding-bottom: 0.5em;
  86.   border-bottom: 1px solid #000;
  87. }
  88. .navBlock h2.navhead {
  89.   background: #aa7;
  90.   color: #fff;
  91.   border: none;
  92.   width: 100%;
  93.   font-weight: bold;
  94.   font-size: medium;
  95.   text-indent: 0.5em;
  96.   margin-top: 0;
  97.   padding: 0.1em 0;
  98. }
  99. .navBlock h2, .navBlock div, .navBlock p, .navBlock ul {
  100.   background: #eec;
  101.   color: #000;
  102. }
  103. .navBlock div, .navBlock p, .navBlock ul {
  104.   margin-top: 0.2em;
  105. }
  106. .navBlock li {
  107.   margin-left: 0;
  108.   background: #eec;
  109.   color: #aa7;
  110. }
  111. .navBlock p, .navBlock div {
  112.   text-indent: 0.3em;
  113. }
  114. .navBlock form {
  115.   margin-top: 0;
  116.   padding-left: 0.2em;
  117. }
  118. a.navlink img { color: #eec; }
  119. @media all {
  120.  a.navlink img {
  121.   color: inherit;
  122.   border: none;
  123.   }
  124. }
  125. /* next three rules for acronyms in Mac IE 4.01 and 4.5 */
  126. .navBlock a:link {
  127.   background: #eec;
  128.   color: #037;
  129. }
  130. .navBlock a:visited {
  131.   background: #eec;
  132.   color: #636;
  133. }
  134. .navBlock a:active {
  135.   background: #ffc;
  136.   color: #900;
  137.   text-decoration: none;
  138. }
  139. /* next three rules for most browsers */
  140. a.navlink:link {
  141.   background: #eec;
  142.   color: #037;
  143. }
  144. a.navlink:visited {
  145.   background: #eec;
  146.   color: #636;
  147. }
  148. a.navlink:active {
  149.   background: #ffc;
  150.   color: #900;
  151.   text-decoration: none;
  152. }
  153. /* ****************** printing ************** */
  154. @media print {
  155.   h1, h2, h3,
  156.   h4, h5, h6  { page-break-after: avoid; page-break-inside: avoid }
  157.   blockquote,
  158.   pre      { page-break-inside: avoid }
  159.   ul, ol, dl  { page-break-before: avoid }
  160.   .navbar    { background-color: #fff; color: #000; border-color: #000;
  161. border-width: 1px; }
  162.   a.navlink, a.bannerLink   { font-weight: normal }
  163. }
  164. /* ****************** speech ************** */
  165. @media aural {
  166.   h1, h2, h3,
  167.   h4, h5, h6  { voice-family: paul, male; stress: 20; richness: 90 }
  168.   h1      { pitch: x-low; pitch-range: 90 }
  169.   h2      { pitch: x-low; pitch-range: 80 }
  170.   h3      { pitch: low; pitch-range: 70 }
  171.   h4      { pitch: medium; pitch-range: 60 }
  172.   h5      { pitch: medium; pitch-range: 50 }
  173.   h6      { pitch: medium; pitch-range: 40 }
  174.   li, dt, dd  { pitch: medium; richness: 60 }
  175.   dt      { stress: 80 }
  176.   pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  177.   em      { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  178.   strong    { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  179.   dfn      { pitch: high; pitch-range: 60; stress: 60 }
  180.   s, strike   { richness: 0 }
  181.   i       { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  182.   b       { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  183.   u       { richness: 0 }
  184.   a:link    { voice-family: harry, male }
  185.   a:visited   { voice-family: betty, female }
  186.   a:active   { voice-family: betty, female; pitch-range: 80; pitch: x-high }
  187. }


Study that and you should be well on your way to losing tables forever!
Good luck.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Quote:
@media aural {
h1, h2, h3,
h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90 }
h1 { pitch: x-low; pitch-range: 90 }
h2 { pitch: x-low; pitch-range: 80 }
h3 { pitch: low; pitch-range: 70 }
h4 { pitch: medium; pitch-range: 60 }
h5 { pitch: medium; pitch-range: 50 }
h6 { pitch: medium; pitch-range: 40 }
li, dt, dd { pitch: medium; richness: 60 }
dt { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn { pitch: high; pitch-range: 60; stress: 60 }
s, strike { richness: 0 }
i { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u { richness: 0 }
a:link { voice-family: harry, male }
a:visited { voice-family: betty, female }
a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

This part is way to cool! I didn't realize CSS was this advanced yet! What kind of software do you need to actually be able to listen to websites? I'd love to get into this more.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

gsv2com -- the links here may provide your answer:
http://www.w3.org/WAI/References/Browsing
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Much appreciated! Thanks!
  • blelisa
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Upstate New York

Post 3+ Months Ago

Atno,
Thanks for the help, I went and got the info and spent all day figuring it out and basiclly mimicking the css layout. Got it where it needs to be in IE6 but in Opera and Mozilla it does not show up right, everything is in the wrong spot and is overlapping each other or is shrunken. I used the import rule for the second css sheet as instructed by www3 but it is still happening. Any thoughts?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

could you post your code?

:)
  • blelisa
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Upstate New York

Post 3+ Months Ago

Here you go:

Index page:
Code: [ Select ]
<?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",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_0122105046_0.addMenuItem("About&nbsp;Us");
 mm_menu_0122105046_0.addMenuItem("Contact&nbsp;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",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_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",12,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,true,true,0,false,false);
 mm_menu_0122105252_0.addMenuItem("Single&nbsp;Project");
 mm_menu_0122105252_0.addMenuItem("Mutliple&nbsp;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",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_0122105423_0.addMenuItem("Forums");
 mm_menu_0122105423_0.addMenuItem("On-Line");
 mm_menu_0122105423_0.addMenuItem("Contact&nbsp;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&nbsp;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",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_0122105610_0.addMenuItem("Forums");
 mm_menu_0122105610_0.addMenuItem("FAQ's");
 mm_menu_0122105610_0.addMenuItem("Contact&nbsp;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",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_0122112135_0.addMenuItem("Press&nbsp;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';

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

<body>
<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="header" style="width: 916; height: 67">
 <p align="center"> <img src="title.jpg" alt="MagneForce Software Systems" width="100%" height="65" hspace="0" vspace="0"/><div align="center">
  <center>
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
     <td>
     <a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105046_0,0,21,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,21,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>
   </td>
  </tr>
 </table>
  </center>
 </div>
<div class="left">
 <img src="loginbutton.png">
</div>
<div class="middle">
<p>bbbbbbbb</p>
</div>
<div class="left">
   <div align="right"><img src="subutt.gif"></div>
  </div>
    </body>
</html>


Style sheet 1:@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;
   margin-left: 40px; font-size}

input {width: 110px;}

Style Sheet111:div#header {align: center;
      height: 100px;
      width: 300px;
      padding: 0px 3px 2px 3px;}


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


.middle {background-image: url('bluegrey.gif')
     color: #000;
     float: left;
     width: 50%;
     margin-top: 2em;
     margin-bottom: 0;}
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>MagneForce Software Systems</title>
  7. <meta name="robots" content="index,follow"/>
  8. <meta name="description" content="MagneForce Software Systems produces software for the design and simulation of electric machines"/>
  9. <meta name="keywords" content="MagneForce Software Systems"/>
  10. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  11. <link rel="stylesheet" type="text/css" href="style1.css" title="Default" media="screen" />
  12. <script language="JavaScript">
  13. <!--
  14. function mmLoadMenus() {
  15.  if (window.mm_menu_0122105046_0) return;
  16.     window.mm_menu_0122105046_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);
  17.  mm_menu_0122105046_0.addMenuItem("About&nbsp;Us");
  18.  mm_menu_0122105046_0.addMenuItem("Contact&nbsp;Us");
  19.   mm_menu_0122105046_0.fontWeight="bold";
  20.   mm_menu_0122105046_0.hideOnMouseOut=true;
  21.   mm_menu_0122105046_0.bgColor='#000066';
  22.   mm_menu_0122105046_0.menuBorder=2;
  23.   mm_menu_0122105046_0.menuLiteBgColor='#FFFFFF';
  24.   mm_menu_0122105046_0.menuBorderBgColor='#CCCCCC';
  25.    window.mm_menu_0122105158_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);
  26.  mm_menu_0122105158_0.addMenuItem("GenAC");
  27.  mm_menu_0122105158_0.addMenuItem("BLDC");
  28.  mm_menu_0122105158_0.addMenuItem("BCPM");
  29.  mm_menu_0122105158_0.addMenuItem("INDUS");
  30.   mm_menu_0122105158_0.fontWeight="bold";
  31.   mm_menu_0122105158_0.hideOnMouseOut=true;
  32.   mm_menu_0122105158_0.bgColor='#000066';
  33.   mm_menu_0122105158_0.menuBorder=2;
  34.   mm_menu_0122105158_0.menuLiteBgColor='#FFFFFF';
  35.   mm_menu_0122105158_0.menuBorderBgColor='#CCCCCC';
  36. window.mm_menu_0122105252_0 = new Menu("root",109,20,"Georgia, Times New Roman, Times, serif",12,"#FFFFFF","#000066","#000066","#CCCCCC","center","middle",3,0,1000,-5,7,true,true,true,0,false,false);
  37.  mm_menu_0122105252_0.addMenuItem("Single&nbsp;Project");
  38.  mm_menu_0122105252_0.addMenuItem("Mutliple&nbsp;Projects");
  39.   mm_menu_0122105252_0.fontWeight="bold";
  40.   mm_menu_0122105252_0.hideOnMouseOut=true;
  41.   mm_menu_0122105252_0.bgColor='#000066';
  42.   mm_menu_0122105252_0.menuBorder=2;
  43.   mm_menu_0122105252_0.menuLiteBgColor='#FFFFFF';
  44.   mm_menu_0122105252_0.menuBorderBgColor='#CCCCCC';
  45.       window.mm_menu_0122105423_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);
  46.  mm_menu_0122105423_0.addMenuItem("Forums");
  47.  mm_menu_0122105423_0.addMenuItem("On-Line");
  48.  mm_menu_0122105423_0.addMenuItem("Contact&nbsp;Us");
  49.  mm_menu_0122105423_0.addMenuItem("FAQ's");
  50.   mm_menu_0122105423_0.fontWeight="bold";
  51.   mm_menu_0122105423_0.hideOnMouseOut=true;
  52.   mm_menu_0122105423_0.bgColor='#000066';
  53.   mm_menu_0122105423_0.menuBorder=2;
  54.   mm_menu_0122105423_0.menuLiteBgColor='#FFFFFF';
  55.   mm_menu_0122105423_0.menuBorderBgColor='#CCCCCC';
  56. 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);
  57.  mm_menu_0122105455_0.addMenuItem("Press&nbsp;Releases");
  58.  mm_menu_0122105455_0.addMenuItem("Seminars");
  59.  mm_menu_0122105455_0.addMenuItem("Articles");
  60.   mm_menu_0122105455_0.fontWeight="bold";
  61.   mm_menu_0122105455_0.hideOnMouseOut=true;
  62.   mm_menu_0122105455_0.bgColor='#FFFFFF';
  63.   mm_menu_0122105455_0.menuBorder=2;
  64.   mm_menu_0122105455_0.menuLiteBgColor='#000066';
  65.   mm_menu_0122105455_0.menuBorderBgColor='#CCCCCC';
  66.    window.mm_menu_0122105610_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);
  67.  mm_menu_0122105610_0.addMenuItem("Forums");
  68.  mm_menu_0122105610_0.addMenuItem("FAQ's");
  69.  mm_menu_0122105610_0.addMenuItem("Contact&nbsp;Us");
  70.   mm_menu_0122105610_0.fontWeight="bold";
  71.   mm_menu_0122105610_0.hideOnMouseOut=true;
  72.   mm_menu_0122105610_0.bgColor='#FFFFFF';
  73.   mm_menu_0122105610_0.menuBorder=2;
  74.   mm_menu_0122105610_0.menuLiteBgColor='#000066';
  75.   mm_menu_0122105610_0.menuBorderBgColor='#CCCCCC';
  76.  window.mm_menu_0122112135_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);
  77.  mm_menu_0122112135_0.addMenuItem("Press&nbsp;Releases");
  78.  mm_menu_0122112135_0.addMenuItem("Articles");
  79.  mm_menu_0122112135_0.addMenuItem("Seminars");
  80.   mm_menu_0122112135_0.fontWeight="bold";
  81.   mm_menu_0122112135_0.hideOnMouseOut=true;
  82.   mm_menu_0122112135_0.bgColor='#FFFFFF';
  83.   mm_menu_0122112135_0.menuBorder=2;
  84.   mm_menu_0122112135_0.menuLiteBgColor='#000066';
  85.   mm_menu_0122112135_0.menuBorderBgColor='#CCCCCC';
  86. mm_menu_0122112135_0.writeMenus();
  87. } // mmLoadMenus()
  88. //-->
  89. </script>
  90. <script language="JavaScript" src="mm_menu.js"></script>
  91. </head>
  92. <body>
  93. <script language="JavaScript1.2">mmLoadMenus();</script>
  94. <div id="header" style="width: 916; height: 67">
  95.  <p align="center"> <img src="title.jpg" alt="MagneForce Software Systems" width="100%" height="65" hspace="0" vspace="0"/><div align="center">
  96.   <center>
  97.   <table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
  98.    <tr>
  99.      <td>
  100.      <a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105046_0,0,21,null,'image1')" onmouseout="MM_startTimeout();"><img src="cbutt.png" name="image1" width="103" height="20" border="0" id="image1"></a>
  101.      <a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105158_0,0,21,null,'image2')" onmouseout="MM_startTimeout();"><img src="pbutt.png" name="image2" width="103" height="20" border="0" id="image2"></a>
  102.      <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>
  103.      <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>
  104.      <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>
  105.      <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>
  106.    </td>
  107.   </tr>
  108.  </table>
  109.   </center>
  110.  </div>
  111. <div class="left">
  112.  <img src="loginbutton.png">
  113. </div>
  114. <div class="middle">
  115. <p>bbbbbbbb</p>
  116. </div>
  117. <div class="left">
  118.    <div align="right"><img src="subutt.gif"></div>
  119.   </div>
  120.     </body>
  121. </html>
  122. Style sheet 1:@import url("http://www.magneforcess.com/demo2/style111.css");
  123. body {background-image: url('bluegrey.gif');
  124.    background-repeat: repeat;
  125.    Background-color: transparent;
  126.    color: #000080;
  127.    font-family: times, courier;
  128.    font-size; 11pt;
  129.    margin-left: 40px; font-size}
  130. input {width: 110px;}
  131. Style Sheet111:div#header {align: center;
  132.       height: 100px;
  133.       width: 300px;
  134.       padding: 0px 3px 2px 3px;}
  135. .left {background-image: url('bluegrey.gif')
  136.     color: #000;
  137.     float: left;
  138.     width: 25%;
  139.     border: none;
  140.     margin-top: 2em;}  
  141. .middle {background-image: url('bluegrey.gif')
  142.      color: #000;
  143.      float: left;
  144.      width: 50%;
  145.      margin-top: 2em;
  146.      margin-bottom: 0;}
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Sorry, could you post a url so we can see all the other bits. :)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

digitalMedia wrote:
Sorry, could you post a url so we can see all the other bits. :)


Try here dM:

http://www.magneforcess.com/demo2/

Here's the imported style sheet:
Code: [ Select ]
div#header {align: center;
      height: 100px;
      width: 300px;
      padding: 0px 3px 2px 3px;}


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


.middle {background-image: url('bluegrey.gif')
     color: #000;
     float: left;
     width: 50%;
     margin-top: 2em;
     margin-bottom: 0;}
  1. div#header {align: center;
  2.       height: 100px;
  3.       width: 300px;
  4.       padding: 0px 3px 2px 3px;}
  5. .left {background-image: url('bluegrey.gif')
  6.     color: #000;
  7.     float: left;
  8.     width: 25%;
  9.     border: none;
  10.     margin-top: 2em;}  
  11. .middle {background-image: url('bluegrey.gif')
  12.      color: #000;
  13.      float: left;
  14.      width: 50%;
  15.      margin-top: 2em;
  16.      margin-bottom: 0;}
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

sorry, i was mis-reading the original post. float em all left is right. float takes em out of the normal rendering order.

here's another link to add to what ATNO/TW had...http://glish.com/css/2.asp
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

digitalMedia wrote:
http://glish.com/css/2.asp


dM ...that looks good in a reduced size pop-up window but when resized to full screen doesn't cut it.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

really? I just looked at it in IE6, NS7, Moz, and Opera and I don't see any problems with it.

hrmmmmm?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I don't see any probs in IE6 (let me do this one isolated -- I'm talking about your http://glish.com/css/2.asp link) when I click the link. The three columns line up neatly when I click the link and new browser window opens in minimized mode. However, when I maximize, the "right" column goes down a row. That was one thing I hadn't quite figured out about the w3c link where this originated. Looks like they have a left and middle style to do the trick, but I still haven't quite figured out how they are doing the 3rd right column stuff. I might be blind at the moment, but I just don't see it.
  • blelisa
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Upstate New York

Post 3+ Months Ago

Hi Guys,
Thanks for all the help you guys are lending.....
I think I have narrowed it down. It is something to do with my header settings. I have deleted the width settings that were there and it caused my page to appear in IE6 just as it did in Mozilla and Opera. Could you take a look at that and give me some suggestions?

Thanks
Lisa
  • blelisa
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13
  • Loc: Upstate New York

Post 3+ Months Ago

Hi

I Got It!! It was my width settings on my header, I deleted them and the width settings on my table with my menu and the problem was solved! YEAH! Now I have another I hope easy question, could you go to my page and see the Log In header, It is not lined up with the heading, it is indented, how do I get that to the left more?
Thanks
Lisa

http://www.magneforcess.com/demo2/Copy% ... index.html

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 72 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.