?
Solved

CSS for a two-column, left menu, right content, and full width header and footer

Posted on 2005-05-07
6
Medium Priority
?
364 Views
Last Modified: 2012-05-05
Very similar to a question from back in January 2005:

I have a problem on a site I've been converting from tables to CSS.  The layout is as follows:

------------------------------
-            header             -
------------------------------
-       -                           -
-       -                           -
- nav -       content          -
-       -                           -
-       -                           -
------------------------------
-            footer               -
------------------------------

The page can be found at http://utahrails.net/gallery/albums.php

Firefox does not see a problem, the page renders okay.  But MSIE puts the left menu where I want it, but the right content down below. All the margins and padding (all set at 1em) display okay in both.

The right content is generated by a photo album CMS, but my customizations are at the bottom of the scree.css file. I will copy them here:

#bigbox
      {
      width: 95%;
      margin-left: auto; /* added for MSIE5.x/Mac */
      margin-right: auto; /* added for MSIE5.x/Mac */
      text-align: center; /* added for MSIE5.x/PC */
      }
#header
      {
      padding: 1em;
      border: 1px solid #e4e4e4;
      margin: 1em;
      background: white;
      text-align: left;
      }
#left
      {
      float: left;
      padding: 1em;
      border: 1px solid #e4e4e4;
      margin: 0 1em 0 1em;
      background-color: #e4e4e4;
      }
#right
      {
      padding: 1em;
      border: 1px solid #e4e4e4;
      margin: 0 1em 0 19em;
      background: white;
      }

/* for IE Windows */
/* hides from IE-mac \*/

* html
      {
      padding: 0;
      margin: 0;
      }
* html #left
      {
      display: inline;
      }
* html #right
      {
      float: left;
      display: inline;
      }

/* end hide from IE-mac */

#footer
      {
      padding: .25em;
      border: 1px solid #e4e4e4;
      margin: 1em;
      background-color: #e4e4e4;
      vertical-align: middle;
      clear: both;
      }

/* begin left menu */

#leftmenu {
      border: 1px solid #e4e4e4;
      width: 13em;
      margin: 0;
      padding: 0;
      color: #000080;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 11px;
      font-weight: normal;
      background-color: #e4e4e4
      }
#leftmenu ul {
      margin: 0;
      padding: 1em;
      list-style: none;
      }
#leftmenu li {
      border: 1px solid #e4e4e4;
      padding: 0;
      font-size : 10px;
      text-align: right;
      }
#leftmenu li a {
      display: block;
      border: 1px solid #e4e4e4;
      padding: 0;
      color: #000080;
      text-decoration: none;
      font-weight: normal;
      }
#leftmenu li a:hover {
      border: 1px solid #c0c0c0;
      padding: 0;
      background-color: white;
      color: black;
      }
#leftmenu li.heading
      {
      border: 0;
      color: maroon;
      font-size: 13px;
      font-variant: small-caps;
      font-family: verdana, arial, sans-serif;
      font-weight: bold;
      text-align: right
      }
#leftmenu ul.print
      {
      padding: 10px 10px 0 0;
      margin: 0;
      cursor: pointer;
      text-align: right
      }
div.hrgraybar
      {
      border-bottom: 3pt solid #c0c0c0;
      }
div.hrgraybar hr
      {
      display: none;
      }
/* end left menu */

I really don't want to set the width for any of the page, other than the actual left menu. Besides, I've tried setting width, and it breaks it in either Firefox or in IE.

I've tried all the hacks I can find by way of on-line searches, plus trying several on-line two column layouts. The only one that apparently works is the one for MSIE-only * html #<id> for the display: inline rule.

Can anyone help me fix this?

Don Strack
0
Comment
Question by:donstrack
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13955797
I see three large problems and none of them is directly related to the CSS except to warp the way it gets applied for rendering.

1. You do not have a complete doctype, and so you have IE rendering in quirks mode which about doubles the number of cross-broser issues.

2.  You are using tables to manage layout (nested tables at that).  It is not what tables are for; they don't do a very good job of it; and you will not control the page rendering as long as the layout is table based.

3.  You are using depreciated attributes in the HTML.  A mix of CSS and depreciated attributes will almost always interfere with each other.


Fixing the doctype is easy, the attributes are mainly on table elements which should be replaced anyway.  That leaves the biggest problem; table based layout.

IMO you need to scrap the 20th century table based layout and move to fully utilizing CSS.  I don't think you are going to get a cross-browser version of this to work properly with tables.

Cd&
0
 

Author Comment

by:donstrack
ID: 13956450
I agree about the table layout. But I have no control over that. I gave up trying to get the photo albums to work, and took out the left menu.

Please show me how to do a correct DOCTYPE.

Now that I have done my re-design, embracing CSS layout, here is a page that works on both Firefox and on MSIE:

http://utahrails.net/newspapers/newspapers-new-east-tintic.php

And here is one that does not:

http://utahrails.net/newspapers/newspapers-dates_1869-1879.php

The problem is, I don't see any difference. maybe you can. Both are pretty much identical in their top and bottom matter, i.e., with the same PHP heading and includes, with just paragraphs in between.

Any comment or correction would be most welcome.

Don Strack

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13956589
The doctype you have on those is fine though I prefer the tigher validation of:

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

As for the layout one of those hacks you are using for brower specific code is breaking the cascade in the page that is not woking.  it is rendering at 85% of the body instead of 85% of the big box.  So it is either rendering outside of big box at 85% ; but I don't think so or it is rendering at default width of 100% because it it no longer picking up the 85% through the hacks.

Tryit wiht out the hacks and see if it works.  I generally recomment he use of browser detection and seperate style sheets rathr than using hacks that rely on bugs that might get fixed.

Cd&
0
 

Author Comment

by:donstrack
ID: 13973647
Your note about 85% got me to thinking. I realized that setting the width could likely be the rpoblem, so I changed the BODY tag to have just margins. That fixed the problem in the display by MSIE, plus the similar problem in the photo albums, so now I can have the left side menu in the photo albums also.

There are still some problems on some of the pages that have real tabular tables in them, which may stem from them not having their width set to 100%. I've got some other things to do, so I'll have to wait a couple days to try that fix.

Don Strack
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 14289398
points to me IMHO.

Cd&
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month14 days, 6 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question