Forum Moderators: not2easy
Is a 3 col layout, fixed width, centred in the screen. Works perfectly on everything else, however on IE Mac the right bar doesn't show up and also the footer clashes into the 3 columns. Code is as follows, have tried to simplify it as much as poss.
CSS:
.sIFR-flash {
visibility: visible!important;
margin: 0;
}.sIFR-replaced {
visibility: visible!important;
}span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}h1 {
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
line-height: 1;
}html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
min-width: 700px;
}#bgcontain {
background: #FFFFFF 0;
width: 760px;
margin: 10px auto;
text-align: left;
border: 1px solid #000000;
}#container {
padding: 0;
float: left;
width: 100%;
clear: both;
min-height: 250px;
background-image: url(/images/background.gif);
background-repeat: repeat-y;
}/*\ IE/Win min height hack */
* html #container {height: 250px;}
/* */#leftwrap {
float: left;
width: 580px;
}#rightbar {
float: left;
width: 180px;
background: #AED1E5;
padding-left: 0px;
}#leftbar {
float: left;
width: 180px;
background-color: #DEB1D1;
padding-left: 0px;
}#content {
float: right;
width: 400px;
min-height: 100%;
background: transparent;
}#header {
width: 750px;
margin: 0 auto;
background: FFFFFF;
clear: both;
height: 80px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#menubar {
width: 742px;
background: FFFFFF;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
padding-left: 18px;
padding-top: 5px;
padding-bottom: 8px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
text-transform: uppercase;
}
#topimage {
width: 760px;
background: FFFFFF;
clear: both;
}
.rightimage {
float: right;
margin-bottom: 10px;
margin-left: 10px;
}#footer {
width: 760px;
background: #00000;
clear: both;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
/* general */
p {
margin-bottom: 5px;
margin-top: 0px;
}.contentbox {
width: 400px;
min-height: 100%;
background: #BEDD9B;
height: 55px;
padding-top: 5px;
}
.contenttext {
width: 380px;
min-height: 100%;
background: #FFFFFF;
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 0.7em;
line-height: 1.8em;
}#storebar {
width: 170px;
background-color: #DEB1D1;
padding-left: 10px;
font-size: 0.6em;
line-height: 1.9em;
padding-bottom:10px;
padding-top: 5px;
}#signupbar {
width: 160px;
background: #BEA9D1;
padding-left: 10px;
font-size: 15px;
line-height: 22px;
padding-bottom:10px;
padding-top: 5px;
text-transform: uppercase;
padding-right: 10px;
}
#browsebar {
width: 160px;
background: #AED1E5;
padding-left: 10px;
font-size: 12px;
line-height: 20px;
padding-bottom:10px;
padding-top: 5px;
padding-right: 10px;
text-transform: uppercase;
}a.menubar:link {
text-decoration: none;
color: #666666;
}a.menubar:visited {
text-decoration: none;
color: #666666;
}
a.menubar:hover {
text-decoration: none;
color: #7D4B9E;
}
a.menubar:active {
text-decoration: none;
color: #7D4B9E;
}
#headline {
font-size: 24px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
HTML
<!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">
<head>
<title>Template</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="/css-test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="bgcontain">
<div id="header">header</div>
<div id="menubar"><a href="/" class="menubar">Menubar</a></div>
<div id="topimage">
<p>Top Image</p>
<p> </p>
<p> </p>
</div>
<div id="container">
<div id="leftwrap">
<div id="content">
<div class="contentbox">
<p>Subhead 1</p>
</div>
<div class="contenttext">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean volutpat, tellus porta malesuada scelerisque, nulla nisl rhoncus neque, id vehicula sem dolor vel sem. Fusce ante justo, varius vel, ullamcorper id, lobortis pretium, mauris. Mauris blandit eleifend justo. Quisque lectus ante, interdum id, vehicula a, mollis sed, ligula. Curabitur neque. Phasellus et eros eget nisi bibendum volutpat. Nam quis lectus id tellus iaculis laoreet. Integer nec pede sit amet odio commodo congue. Ut faucibus laoreet velit. Nunc ligula orci, scelerisque et, pharetra a, laoreet ac, eros. Nullam convallis, erat ac dapibus fringilla, purus lacus semper tortor, sit amet faucibus ante risus eu erat. Fusce nec dui. In bibendum, metus eu pulvinar condimentum, mi enim egestas elit, et vestibulum metus leo ut arcu. Nam mollis congue nunc. Duis ac eros. Nullam et dui in arcu aliquam semper. </p>
</div>
<div class="contentbox">
<p>Subhead 2</p>
</div>
<div class="contenttext">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean volutpat, tellus porta malesuada scelerisque, nulla nisl rhoncus neque, id vehicula sem dolor vel sem. Fusce ante justo, varius vel, ullamcorper id, lobortis pretium, mauris. Mauris blandit eleifend justo. Quisque lectus ante, interdum id, vehicula a, mollis sed, ligula.</p>
</div>
</div>
<div id="leftbar">
<div id="storebar">
<p> </p>
<p>Left Bar </p>
</div>
</div>
</div>
<div id="rightbar">
<div id="signupbar">
<p> </p>
<p>Right Bar </p>
</div>
<div id="browsebar">
<p>Right Bar 2 </p>
<p> </p>
</div>
</div>
</div>
<div id="footer">
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<br />
</body>
</html>
Many thanks
I'm not sure about IE/MAC but you can try IE conditional comments...
[msdn.microsoft.com...]
Another page that may be of help to you!
[quirksmode.org...]
I don't have a MAC so I have no way of testing this out (since the rendering engine is different).
If you're doing this for work on an hourly wage TAKE YOUR TIME and ride it for all that its worth. Otherwise ban it completely and have a redirect to Firefox/Opera/Safari install page.