...

View Full Version : I'm going mad - Firefox OK and IE6 messed up



irishsoul
05-21-2007, 01:44 PM
Hello everybody. I'm going mad trying to figure out how to get this css showing out right in IE6. IE7 is fine, FF is fine... IE6 mess things up.

I think it's a trouble with these divs


<div id="wrap">
<div id="keep">

<div id="outside">
<div id="inside">
<div id="holder">
<div id="menu">

but I really don't know where the problem is.

This is the full css:


body {
font-family: serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
background: #E1B26B url("images/bg.gif");
margin: 0;
padding: 0;
}

/* Design Containers and Specifications */

#wrap {
background: url("images/bgtp.gif") repeat-x;
width: 100%;
margin: 0;
padding: 0;
border: 0;
float: left;
}

#keep {
width: 965px;
clear: left;
margin: 0 auto;
padding: 0;
}

hr {
background-color: #22201d;
color: #22201d; /* for coloring the background in IE7 */
}

#outside {
background: #B5B6B4 url("images/bgcon.gif") repeat-y top center;
width: 965px;
float: right;
padding: 0;
}

#inside {
background: url("images/bghead.gif") no-repeat top center;
width: 965px;
clear: both;
padding: 0;
}

#holder {
margin-left: 30px;
margin-right: 38px;
width: 898px;
padding: 0;
}

* html #holder {
margin-left: 15px;
float: left;
padding: 0;
}

#search {
background: url("images/search.gif") no-repeat bottom;
width: 272px;
height: 53px;
float: left;
text-align: middle;
}

#cpgtitle {
background: url("images/title.jpg") no-repeat;
width: 576px;
height: 53px;
text-align: right;
float: right;
}

#menu {
background: url("images/menu.jpg") no-repeat;
width: 685px;
height: 191px;
float: left;
text-align: left;
}

#tree {
background: url("images/tree.jpg") no-repeat;
width: 213px;
height: 283px;
float: right;
}

#content {
width: 632px;
margin-left: 20px;
float: left;
text-align: justify;
font-size: 13px;
color: #CACACA;
font-family: "times new roman", georgia, serif;
overflow: auto;
overflow-y: hidden;
overflow-x: auto;
/* overflow-x: auto; handle overflow with scrollbar */
}

* html #content {
margin-left: 15px;
width: 610px;
}

#sidebar {
width: 205px;
float: right;
text-align: left;
margin: 0 35px 15px 0;
}

* html #sidebar {
margin: 0px;
}

#footer {
background: url("images/footer.jpg") no-repeat bottom;
width: 898px;
height: 83px;
clear: both;
font-family: tahoma;
}

/* Headers */

h4 {
background: url("images/sidebg.jpg") no-repeat bottom;
width: 198px;
height: 28px;
text-transform: lowercase;
margin: 0px;
padding-right: 50px;
color: #E5B655;
font-size: 18px;
text-align: right;
font-family: "times new roman", georgia, serif;
}

* html h4 {
padding: 0 50px 0 0;
}

h3 {
color: #F3F1B7;
font-size: 18px;
font-family: "agency fb", sans-serif;
font-weight: bold;
padding: 0;
margin: 0;
}

h1, h1 a:link, h1 a:visited {
color: #FFA303;
font-size: 16px;
font-family: "times new roman", serif;
text-transform: uppercase;
font-weight: bold;
padding: 0;
margin: 7px 0 0 0;
text-decoration: none;
}

.id {
color: #686C24;
padding-right: 3px;
}

h2 {letter-spacing: 5px;
font-weight: bold;
padding: 0;
margin: 0 0 0 0;
color: #FFFED9;
font-size: 14px;
text-align: left;
font-family: "tw cent mt", arial, helvetica, sans-serif;
}

h2 a:link, h2 a:visited {
color: #A12600;
text-decoration: none;
}

h2 a:hover {
color: #DF3500;
text-decoration: none;
}

h6 {
padding: 0;
margin: 0;
font-size: 35px;
float: right;
text-align: right;
color: #222;
}

.btitle a:link, .btitle a:visited {
padding: 0 25px 0 0;
color: #FFA052;
font-size: 30px;
font-family: "trebuchet ms", sans-serif;
text-decoration: none;
}

.stitle {
padding: 0 10px 0 0;
color: #FFFFFF;
font-size: 12px;
font-family: arial;
font-weight: bold;
font-style: italic;
}

.tinfo {
color: #D4C082;
font-size: 14px;
font-family: "times new roman", serif;
text-transform: uppercase;
border-bottom: #4E370F 1px solid;
padding: 0 0 3px 0;
}

/* Top Search */

#sform {
padding: 15px 0 0 0;
margin: 0;
}

#search input {
width: 170px;
font-size: 10px;
color: #CCC;
font-family: trebuchet ms, arial, sans-serif;
background:#1A1A1A;
border: #414141 1px solid;
}

#search input:focus {
border:#2E2E2E 1px solid;
}

#simage {
background: url("images/s2.gif") no-repeat;
width: 39px;
height: 23px;
}

/* Top Menu*/

#menu ul {
list-style-type: none;
margin: 171px 0 0 0;
padding: 0;
}

#menu ul li {
display: inline;
text-transform: lowercase;
}

#menu ul li a {
text-decoration: none;
color: #494949;
font-weight: bold;
font-size: 13px;
font-family: verdana, tahoma, sans-serif;
padding: 13px 13px 0 10px;
font-weight: bold;
}

#menu ul li a:hover {
background: #000;
-moz-opacity: 0.7;
color: #FFF;
border-bottom: #99280A 5px solid;
text-decoration: none;
background:
}

/* Side Navigation */

.navigate {
padding: 10px 0 30px 35px;
font-size: 10px;
font-family: verdana, sans-serif;
}

.navigate ul {
list-style-type: none;
font-size: 11px;
padding: 0;
margin: 0;
}

.navigate li a {
background: url("images/arw.gif") no-repeat top left;
text-decoration: none;
display: block;
color: #7F8062;
border-bottom: #1F270B 1px solid;
padding: 4px 0 4px 21px;
margin: 0;
}

* html .navigate li a {
height: 13px;
}

.navigate li a:hover {
background: url("images/arw2.gif") no-repeat top left;
text-decoration: none;
color: #F7FABF;
}

.navigate li li a {
background: url("images/sub.gif") no-repeat top left;
text-decoration: none;
display: block;
color: #7F8062;
border-bottom: #1F270B 1px solid;
padding: 4px 0 4px 41px;
margin: 0;
}

.navigate li li a:hover {
background: url("images/sub2.gif") no-repeat top left;
text-decoration: none;
color: #F7FABF;
}

/* Posts */

.info {
background: #3A130A;
-moz-border-radius: 10px;
color: #FFFFFF;
font-family: verdana, sans-serif;
font-size: 11px;
text-align: left;
padding: 7px;
margin: 15px 0 50px 0;
}

.info a:hover, .info a:visited {
color: #FFA052;
text-decoration: none;
}

.info a:link, .info a:visited {
color: #FFFFFF;
text-decoration: none;
}

/* Footer Styles */

.credits {font-family: verdana, sans-serif;
text-align: center;
padding-top: 30px;
color: #A1A1A1;
font-size: 12px;
}

#footer a:link, #footer a:visited {font-family: verdana, sans-serif;
color: #A1A1A1;
text-decoration: none;
}

#footer a:hover {font-family: verdana, sans-serif;
color: #E1E1E1;
text-decoration: none;
}

/* Miscellaneous */

img {
border: 0;
}

a:link, a:visited {
color: #AAAF54;
text-decoration: none;
}

a:hover, a:active {
color: #C3C963;
}

input:focus, textarea:focus {
border: #2E2E2E 1px solid;
}

small {
color: #555;
font-family: arial, helvetica, sans-serif;
}

label {
color: #555;
font-size: 10px;
}

table {
font-family: verdana, tahoma, sans-serif;
font-size: 12px;
}

.textinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.85em;
border: 1px solid #999999;
padding-right: 3px;
padding-left: 3px;
background-color : #22201D;
color:#ffffff;
}

.clickable_option {
border-bottom : 1px dotted #999999;
cursor : default;
}

.listbox_lang {
background-color : #22201D;
color:#ffffff;
border: 1px solid #999999;
font-size: 0.90em;
font-family: Arial, Helvetica, sans-serif;
vertical-align : middle;
}

.listbox {
font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
background-color : #22201D;
font-size: 0.85em;
border: 1px solid #999999;
vertical-align : middle;
color:#ffffff;
}

.button {
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.85em;
border: 1px solid #999999;
background-color : #22201D;
color:#ffffff;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}

.button a {
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}

.button a:hover {
border: 1px solid #999999;
background-color : #22201D;
color:#FFFFFF;
}

.comment_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.85em;
border: 1px solid #999999;
background-color : #22201D;
color:#ffffff;
padding-left: 3px;
padding-right: 3px;
}

.radio {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
vertical-align : middle;
}

.checkbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
vertical-align : middle;
}

.bblink a {
color: #8090A3;
text-decoration: none;
}

.bblink a:hover {
color: #0033CC;
text-decoration: underline;
}

.admin_menu_red a {
color: #BE0027;
}

.cpg_main {
height: 100%;
width: 512px;
overflow-x: auto; /* handle overflow with scrollbar */
}

.cpg_footer {
height: 100%;
width: 570px;
padding-left: 20px;
}

.graybox {
background-color: #22201d;
border-top: 1px solid #22201D;
border-bottom: 1px solid #22201D;
}

.breadlink {
border-bottom: 1px solid #57470C;
}

.maintable {
margin-top: 1px;
margin-bottom: 1px;
}

.cath1 {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
}

.tableh1 {
font-size: 0.90em;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 15px;
}

.tableh1_compact {
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tableh2 {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableh2_compact {
background : #22201D;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tableb {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableb_compact {
padding-top: 2px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}

.tablef {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.catrow_noalb {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.catrow {
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}

.album_stat {
font-size : 85%;
color: #555555;
margin: 5px 0px;
}

.thumb_filename {
font-size: 0.90em;
display: block;
}

.thumb_title {
font-weight : bold;
font-size: 0.90em;
padding: 2px;
display : block;
}

.thumb_caption {
font-size: 0.85em;
padding: 1px;
display : block;
}

.thumb_caption a {
text-decoration: underline;
color: #AEAEAE;
}

.thumb_num_comments {
font-weight: normal;
font-size: 0.85em;
padding: 2px;
font-style : normal;
display : block;
}

.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}

.user_thumb_infobox th {
font-weight : bold;
font-size: 1em;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox td {
font-size: 0.90em;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox a {
text-decoration: none;
color: #AEAEAE;
}

.user_thumb_infobox a:hover {
color: #CCCCCC;
text-decoration: underline;
}

.sortorder_cell {
background : transparent;
color : #000000;
padding: 2px;
margin: 0px;
}
.sortorder_options {
font-family: Verdana, Arial, Helvetica, sans-serif;
background : transparent;
color : #000000;
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 0.85em;
white-space: nowrap;
}


.navmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
font-size: 1em;
font-weight: bold;
border-style: none;
}

.navmenu img {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
}

.navmenu a {
position: relative;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #AEAEAE;
}

.navmenu a:hover {
background : #22201D;
text-decoration: none;
color: #FFFFFF;
}

.admin_menu_thumb {
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.85em;
border: 1px solid #000000;
background-color : #22201D;
color:#000000;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}

.admin_menu_thumb a {
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}


.admin_menu_thumb a:hover {
border: 1px solid #000000;
background-color : #57470C;
color:#FFFFFF;
}

.admin_menu {
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.85em;
border: 1px solid #000000;
background-color : #22201D;
color:#FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}

.admin_menu a {
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}

.admin_menu a:hover {
background-color : #363430;
color:#FFFFFF;
}

td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}

.comment_date{
font-size : 90%;
vertical-align : middle;
}

.image {
border: 2px solid #000000;
margin: 2px;
}

.image a:hover { filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: .5;

opacity:0.5; }

.imageborder {
border: 0px solid #aaaaaa;
background-color: #FFFFFF;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 2px;
margin-left: 2px;
}

.display_media {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.thumbnails {
padding: 5px;
}

.thumbnails a:hover img { filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: .5;

opacity:0.5; }

.breadlink (
color: #657172;
font-size: 0.90em;
font-family: tahoma, arial, Microsoft Sans Serif;
}

.statlink {
color: #4C4A2F;
font-size: 1.1em;
font-family: tahoma, arial, Microsoft Sans Serif;
}

.statlink a {
text-decoration: none;
}

.statlink a:hover {
text-decoration: underline;
}

.alblink {
color:#4C4A2F;
font-size:1.4em;
font-family:tahoma, arial, Microsoft Sans Serif;
font-weight:bold;
display: block;
}

.alblink a {
text-decoration: none;
}

.alblink a:hover {
text-decoration: underline;
}

.catlink { letter-spacing: 5px;
padding-bottom: 0px;
color:#4C4A2F;
font-size:1.2em;
font-family:tahoma, arial, Microsoft Sans Serif;
font-weight:bold;
}

.catlink a {letter-spacing: 5px;
text-decoration: none;
}

.catlink a:hover {
text-decoration: underline;
}

.topmenu {
font-size : 100%;
margin-top:5px;
margin-right:5px;
}

.topmenu a {
color : #DFDFDF;
text-decoration : none;
}

.topmenu a:hover {
color : #FFFFFF;
text-decoration : none;
}

.topmenu td {
white-space: nowrap;
font-weight : bold;
}


.img_caption_table {
border: none;
background-color: #49525D;
width : 100%;
margin : 0px;
}

.img_caption_table th {
background: #49525D ;
font-size : 100%;
color : #cccccc;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top : 1px solid #394049;
}

.img_caption_table td {
background: #49525D ;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top : 1px solid #394049;
white-space: normal;
}

.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width : 100%;
margin : 0px;
}

#vanity a {
display:block;
width:57px;
height:20px;
margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}

irishsoul
05-21-2007, 01:44 PM
and this is the template


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta name="mssmarttagspreventparsing" content="true" />
<link rel="stylesheet" type="text/css" href="themes/dfire/style.css" />
<title>{TITLE}</title>
{META}

<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
{CUSTOM_HEADER}

<div id="wrap">
<div id="keep">

<div id="outside">
<div id="inside">
<div id="holder">
<div id="menu">
<ul>
{SYS_MENU}
</ul>
</div>
<div id="tree">
</div>
<div id="content">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.it/custom" target="google_window">
<table border="0" bgcolor="#000000">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25blk.gif" border="0" alt="Google" align="middle"></img></a>
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="www.doloresoriordan.it"></input>
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="64" maxlength="255" value="" id="sbi"></input>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb"></input>
</td></tr>
<tr>
<td>&nbsp;</td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="white">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.doloresoriordan.it" id="ss1"></input>
<label for="ss1" title="Search www.doloresoriordan.it"><font size="-1" color="white">www.doloresoriordan.it</font></label></td>
</tr>
</table>
<input type="hidden" name="client" value="pub-9653185638410119"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="flav" value="0000"></input>
<input type="hidden" name="sig" value="lRv6BXjrqQrkGuAF"></input>
<input type="hidden" name="cof" value="GALT:#3399FF;GL:1;DIV:#000000;VLC:FFFFFF;AH:center;BGC:000000;LBGC:FFFF00;ALC:FFFFFF;LC:FFFFFF;T:CCC CCC;GFNT:FFFFFF;GIMP:FFFFFF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->
<hr>
{GALLERY}
<br />
<div class="cpg_footer" align="center">
{THEME_SELECT_LIST}{LANGUAGE_SELECT_LIST}<br />
{LANGUAGE_SELECT_FLAGS}
{VANITY}
</div>
</div> <!-- end content -->

<div id="sidebar">
<h4>menu</h4>
<div class="navigate">
<ul>
{ADMIN_MENU}

{SUB_MENU}
</ul>
</div>

<h4>links</h4>
<div class="navigate">
<ul>
<li><a href="http://www.zombieguide.com" title="Latest News on Dolores">Zombieguide</a></li>
<li><a href="http://istilldream.altervista.org" title="Italian Forum">I Still Dream Forum</a></li>
<li><a href="http://www.doloresoriordan.ie" title="Official Site">doloresoriordan.ie</a></li>
<li><a href="http://www.myspace.com/doloresoriordan" title="Dolores O'Riordan On Myspace">Dolores' Myspace</a></li>
</ul>
</div>

<h4>related links</h4>
<div align="center" class="navigate">
<script type="text/javascript"><!--
google_ad_client = "pub-9653185638410119";
google_ad_width = 160;
google_ad_height = 90;
google_ad_format = "160x90_0ads_al_s";
//2007-05-20: prova
google_ad_channel = "1166115215";
google_color_border = "000000";
google_color_bg = "000000";
google_color_link = "7F8062";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


</div> <!-- end sidebar -->

<div id="footer">
<div class="moi"></div>
<div class="credits">
<!-- Please leave these credit links intact as they are small and unobtrusive to the theme. Thanks! -->
<a href="http://chain.darkfaerytale.com/themes/dfire/">DFire Theme</a> by <a href="http://www.darkfaerytale.com">Tracy Ou aka Viitoria L.(dfCOM)</a><br />
<a href="http://www.billygbullock.com" title="Billy Bullock">Ported to Coppermine by Billy Bullock</a>
</div>
</div> <!-- end footer -->

</div> <!-- end holder -->
</div> <!-- end inside -->
</div> <!-- end outside -->
{CUSTOM_FOOTER}
</div> <!-- end keep -->
</div> <!-- end wrap -->

</body>

</html>

I noticed that if I delete margins on #holder class, IE6 displays it right... but FF no more.
Thanks to anybody for help...

Mara.

kewlceo
05-21-2007, 02:07 PM
Hey mate, do you have a link to this?

One thought: In quirks mode IE6 uses its own, non-standard box model.

irishsoul
05-21-2007, 02:14 PM
hello!
thanks for reply.
the link to see the code in action is: http://www.doloresoriordan.it/index.php

thanks again

kewlceo
05-21-2007, 02:30 PM
Beautiful work, really a stunning site. :thumbsup:

My first thought would be to consider making the simple switch to HTML 4.01 Strict, and validating for it. XHTML 1.0 Transitional + "text/html" does nothing for you anyway, whereas valid HTML 4.01 Strict will provide consistency across browsers.

Next idea would be to install the IE Web Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en). This works in IE6 as well as IE7, and allows you to outline divs, reveal class & IDs, and just really see how IE6 is building your page.

irishsoul
05-21-2007, 03:12 PM
no luck at all.
thanks anyway...

koyama
05-22-2007, 03:35 PM
I noticed that if I delete margins on #holder class, IE6 displays it right... but FF no more.
Hmm... It seems that you are aware of the IE6 double float margin bug (http://www.positioniseverything.net/explorer/doubled-margin.html).

From your code:


#holder {
margin-left: 30px;
margin-right: 38px;
width: 898px;
float: left;
padding: 0;
background: #000000;
}

* html #holder {
margin-left: 15px;
float: left;
padding: 0;
}

This is fine because now the margin will be equal in IE6, IE7 and Firefox, namely 30px.

But another place you have this:


#content {
width: 632px;
margin-left: 10px;
float: left;
text-align: justify;
font-size: 13px;
color: #CACACA;
font-family: "times new roman", georgia, serif;
overflow-x: auto; handle overflow with scrollbar */
}

* html #content {
margin-left: 15px;
width: 610px;
}

Here you have messed things up. Why not use the same width for #content in IE6? Also, the left margin is wrong for the IE6 styles.

It may be simpler to use the magical display:inline fix to solve for the IE6 doubled float margin bug. Read the article for the details.

You could avoid having to use the * html hack for #holder and #content above. Just use this:


#holder {
margin-left: 30px;
margin-right: 38px;
width: 898px;
float: left;
display: inline; /* IE6 double float margin fix */
padding: 0;
background: #000000;
}
#content {
width: 632px;
margin-left: 10px;
float: left;
display: inline; /* IE6 double float margin fix */
text-align: justify;
font-size: 13px;
color: #CACACA;
font-family: "times new roman", georgia, serif;
overflow-x: auto; handle overflow with scrollbar */
}

There may be more floats affected. Be sure to check for that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum