donstrack
asked on
CSS for a two-column, left menu, right content, and full width header and footer
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
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
ASKER
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
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
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&
<!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&
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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&