displaying problem with IE6 - problem only on homepage and "double col - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

displaying problem with IE6 - problem only on homepage and "double col

marco_ita

11:06 am on Aug 28, 2008 (gmt 0)

Hi guys,

i am new here and I am not very expert yet with coding.

I installed a wordpress blog.
Everything was fine until i decided to change the layout.

Now the blog is displayed perfectly in all the browsers, exception made for IE6.
The only problem is the HOME PAGE and the pages with double columns.
I have already tried to reduce the columns, to float them left and right... but nothing to do!
It doesnt work!

Please contact me for the website so u can have a look at it.
Unfortunately i am not allowed to post the link to my website.
Thanks.

As you can see, the header, footer , and content page are moved on the left side, without respecting any padding, any margins.

But if u see this page with Opera, Firefox, Mozilla, IE7, Maxthon or whatever... it is fine!

Please any helps?

Thank you very much,

Marco :)

vincevincevince

12:33 pm on Aug 28, 2008 (gmt 0)

Take your homepage HTML + CSS code, copy it to a local file, and then cut out everything you can until you have the very minimum of code which still causes the problem. Probably that will be two or three emptied DIVs, and two or three lines of CSS. Post that code here (be sure it really is the 100% minimum)... and we will tell you what the problem is.

95% chance you find the problem yourself whilst preparing the minimal code.

marco_ita

1:23 pm on Aug 28, 2008 (gmt 0)

Thanks Vince.

Here is the CSS minimum CODE:

/* Begin Structure */
body {
margin: 0 0 0 0;
padding: 0;
}

#page {
background-color: white;
margin: /*20px*/ auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}

#header {
background-color: #73a0c5;
margin: 0px 11px 0px 11px;
padding: 0;
height: 200px;
width: 738px;
}

/*
#headerimg {
margin: 0px;
height: 200px;
width: 100%;
}
*/

.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}

.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}

#footer {
padding: 0;
/*margin: 0 auto;*/
margin: 1px 11px 1px 11px;
width: 738px;
clear: both;
}

/* End Structure */

/* Begin Sidebar */
#sidebar
{
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}

#sidebar form {
margin: 0;
}
/* End Sidebar */

Here is the XHTML code (header, index, sidebar and footer

********************************************
HEADER
********************************************
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?>
</div>
</div>
</div>

*************************************************
INDEX
*************************************************
<div id="content" class="narrowcolumn">
<div class="entry">
</div>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

*************************************************
SIDEBAR
***************************************************
<div id="sidebar">

<p align="center">
</p>

</div>

*******************************************
FOOTER
********************************************

<p>
<?php bloginfo('name'); ?> is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
</p>

</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

Thanks for ur help!
Marco :)

[edited by: marco_ita at 2:07 pm (utc) on Aug. 28, 2008]

vincevincevince

1:34 pm on Aug 28, 2008 (gmt 0)

Marco! That is not minimal code by any means! Delete things, delete things, and delete things until you have only the very very smallest code possible to show the problem. You got to make a bit of an effort if you want us to read your code and understand them.

marco_ita

2:08 pm on Aug 28, 2008 (gmt 0)

just edited!
is that ok?
hope i havent missed anything really important.
if u see some <div> or </div> without correspondent, dont worry cause i just cut the code.
But it still perfectly valid in xhtml.

marco_ita

2:57 pm on Aug 28, 2008 (gmt 0)

SORTED OUT!
not really as i wanted, but found some tricks.
It is a blog and i included the CLOUD TAG so in the "sidebar" there was a tag too big (larger than the width of the column), so the sidebar was dropping down!
I just renamed that tag with a unique word.
Now it works.
But i would like to keep that tag (as long as it is)... any suggestions?

Thanks!

vincevincevince

3:00 pm on Aug 28, 2008 (gmt 0)

It does sound like that's the problem. Apply 'overflow:hidden' to the side bar; it will make IE6 chop off the extra as it should. Technically you won't want it for other browsers but it shouldn't hurt.

marco_ita

3:36 pm on Aug 28, 2008 (gmt 0)

thank u Vince!
:)
Marco :)