Forum Moderators: not2easy

Message Too Old, No Replies

CSS and IE 6 and above display problem

         

n2bbuilding2

1:41 am on Jul 29, 2009 (gmt 0)

10+ Year Member



Hi!

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]

swa66

9:47 am on Jul 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's not the proper way to use conditional comments: the conditional comment goes in the html, not the CSS.

Try a site search for examples of it:
[google.com...]

n2bbuilding2

12:20 pm on Jul 29, 2009 (gmt 0)

10+ Year Member



yes, I know it isn't proper. that is why I am here. I have also tried inserting it in HTML and I really don't know much of anything about the use of these particular comments.

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.