Forum Moderators: not2easy
I was wondering if someone could take a look at this code and tell me how to get IE 6 and above to display it as three columns inline? The page looks just as I designed it in all other browsers but including IE 5 but I cannot get it to behave in the other IE's:
@import url("/css/h1.css");
body {
background : url(/image/2010BGfade.jpg) repeat-x fixed;
width : auto;
font-family : Verdana, Helvetica, Arial, sans-serif;
font-size : 12px;
font-weight: bold;
}
#center {
float: left;
width: 45%;
padding-right: 5%
padding-left: 5%;
min-height: 30em;
}
<--if IE #center{ width: 552px; left: 189px; top: 125px; height: 360px;}-->
#left {
float; left;
width: 15%;
padding: 0 2em 0 3em;
min-height: 30em;
}
< --if IE #left{ width: 150px; left: 8px; top: 125px; height: 22px;}-->
#menu ul
{
float: left;
margin-left: 2em;
}
#menu li
{
list-style-type: none;
width: 149px;
text-align: left;
}
#menu {
width: 150px;
border-right: 1px;
padding: 1em 0 1em 0;
margin-bottom: 1em;
font-family: Arial, 'Trebuchet MS', 'Lucida Grande', sans-serif;
font-size: 90%;
}
#menu ul {
list-style: none;
margin: 1em;
padding: .5em;
border: none;
}
#menu li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#menu li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #menu li a {
width: auto;
}
#menu li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
#hdrBanner {
height: 23px;
width: 430px;
display: block;
margin: 2px 0 0 0;
}
#right {
float: left;
width: 17%;
padding: 0 8px 0 8px:
min-height: 30em;
font-size: 14px;
}
< --if IE #right{ width: 174px; left: 742px; top: 125px; height: 508px;}-->
#footer {
border: 1px black solid;
float: left;
width: 100%;
height: 15px;
clear: both;
font-size: 10px;
text-align: center;
}
If you do know a fix then can you post it for me? I am a new volunteer webmaster for a non-profit and I have been working on this particular problem for about a month now and just cannot seem to solve it.
Thanx!
[edited by: swa66 at 9:42 am (utc) on July 29, 2009]
[edit reason] No URLs, please see ToS and forum charter [/edit]
Try a site search for examples of it:
[google.com...]
what I was wondering about is code that can be added to the CSS that would target not only IE 6 and above but would allow my webpages to be displayed the same across all browsers. Like margins, padding or and the use of z index? The design that I am wanting and looking to keep is in the code above.
Thanx for replying! It puts me a step closer to solving this problem.