sp4you
09-06-2006, 07:34 PM
Hi everyone, i got this really weird problem with my faux columns:
In FF everything looks good but when i take a look in IE 7 i see a small space between the big image and the faux columns.
take a look: here (http://painlessdesigns.net/test)
Here is the css :body {
background-color: #bababa;
font-family: "Tahoma", Verdana, Arial;
font-size: 11px;
font-style: normal;
color: #395164;
margin: 0;
text-align: center; /*voor IE*/
}
#container { margin: 0 auto; width: 809px; background-color:#FFFFFF; border: 1px solid #939393; }
#logo { float: left; padding: 18px 0 18px 68px; background-color: #FFFFFF; width: 199px; }
#logo p { margin: 0; padding: 0; }
#logo img { border: none; }
#nav { float: right; background-color:#FFFFFF; padding: 2px 20px 0 0; width: 520px; text-align:right;}
#nav p { margin: 0; padding: 0; color: black; }
#nav a, #nav a:hover { text-decoration: underline; color: black; padding-right: 15px; font-size: 10px;}
#navigation { float: right; background-color: #FFFFFF; padding: 40px 20px 0 0; width: 520px; text-align:right; }
#navigation ul { list-style-type: none; margin: 0px; padding: 0px;}
#navigation li {display: inline; font-family: Arial; font-size: 12px; font-weight: normal; list-style-type: none; padding-left: 6px;}
#navigation a { text-decoration: none; color: #395164; }
#navigation a:hover { text-decoration: underline; color: #223646; }
#image { background-color: #395164; width: 809px; clear: both; }
#image p { margin: 0; padding: 0; }
#image img { border: none; }
#content { text-align: left; background: #fff url('images/content_bg.png');
overflow: hidden; }
#left { width: 390px; float: left; padding: 4px; margin: 0;}
#middle { width: 246px; color:#000; float: left; padding: 4px; margin: 0;}
#right {width: 147px; color:#fff; float: right; padding: 4px; margin: 0; }
I can't view it in IE 6 cause i cant use IE 6 and IE 7 at the same time at my pc.
Is there a hack for this problem? or is there something wrong with my columns?
Thanks in advance
In FF everything looks good but when i take a look in IE 7 i see a small space between the big image and the faux columns.
take a look: here (http://painlessdesigns.net/test)
Here is the css :body {
background-color: #bababa;
font-family: "Tahoma", Verdana, Arial;
font-size: 11px;
font-style: normal;
color: #395164;
margin: 0;
text-align: center; /*voor IE*/
}
#container { margin: 0 auto; width: 809px; background-color:#FFFFFF; border: 1px solid #939393; }
#logo { float: left; padding: 18px 0 18px 68px; background-color: #FFFFFF; width: 199px; }
#logo p { margin: 0; padding: 0; }
#logo img { border: none; }
#nav { float: right; background-color:#FFFFFF; padding: 2px 20px 0 0; width: 520px; text-align:right;}
#nav p { margin: 0; padding: 0; color: black; }
#nav a, #nav a:hover { text-decoration: underline; color: black; padding-right: 15px; font-size: 10px;}
#navigation { float: right; background-color: #FFFFFF; padding: 40px 20px 0 0; width: 520px; text-align:right; }
#navigation ul { list-style-type: none; margin: 0px; padding: 0px;}
#navigation li {display: inline; font-family: Arial; font-size: 12px; font-weight: normal; list-style-type: none; padding-left: 6px;}
#navigation a { text-decoration: none; color: #395164; }
#navigation a:hover { text-decoration: underline; color: #223646; }
#image { background-color: #395164; width: 809px; clear: both; }
#image p { margin: 0; padding: 0; }
#image img { border: none; }
#content { text-align: left; background: #fff url('images/content_bg.png');
overflow: hidden; }
#left { width: 390px; float: left; padding: 4px; margin: 0;}
#middle { width: 246px; color:#000; float: left; padding: 4px; margin: 0;}
#right {width: 147px; color:#fff; float: right; padding: 4px; margin: 0; }
I can't view it in IE 6 cause i cant use IE 6 and IE 7 at the same time at my pc.
Is there a hack for this problem? or is there something wrong with my columns?
Thanks in advance