Need help on CSS bug in IE6

Can you look at this website in IE6

http://www.pinoyopensourcecodes.com

and compare it with FF and IE7

as you've noticed, there is an extra blue padding at the right most of the header if you view the site using IE6. I can't figure it out what's wrong with my CSS, maybe it's an IE6 bug, or maybe there's something wrong with my style sheet.. need help CSS Gurus..

 

Biggest 'problem' I'm seeing is you got too complex for your own good there. You've got at least a dozen containers that don't seem to do anything apart from add code.

The 'big' thing that is probably making your design reject is the sheer volumne of DHTML (you know, javascript) that is unnecessary and is certainly not saving you any download time, much less giving you anything approaching semantic markup. As cute as the rounded corners are - in this case they are being more hindrance than help.

I'd likely have to chuck it and start over to even approach clean code - which is typical of anything involving the latest in blog crapware (blogger, xanga, my.opera.com,etc)

 

IE6 has numerous bugs because it doesn't fully support CSS! IE7 has less bug but still doesn't match up to FF's support. I'm not a CSS fundi so I don't know or understand the CSS hacks. Mys solutions is to have a default CSS file and IE specific CSS files.

What I do is create a default CSS for FF. Then check IE7 for bugs. If there are any bugs, I try to identify which elements IE7 is having problems with. Then I create a CSS for IE7 with only the elements and properties that IE7 has a problem with. On my web page I add an <!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]-->

Then I do the same for IE6, only this time I use <!--[if lt IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]-->

 

Dear , Its Not a IE6 Bugs :

You just Have additioanl Colum in the right page !

that not show in the Other browser but with IE You could see that !
how you can rid of that :

In your Editor Goto to the right Colum table and you will found a Style (CSS) Class recorded with that colum you just delete the Value and Thats Correct !

Goodluck .

 

So you're coding to a browser rather than the specification? That's a BAD idea, given that you'll be forced to rebuild your sites every time a browser version (and I don't just mean Internet Explorer) is updated.

Here's what I'm seeing in Opera (I'm not at home, so I don't have access to my armada of browsers). A header, a menu, a content area, and a sidebar followed by a footer. Yes, the menu and sidebar share the same column, but that's beside the point.

The HTML would look somewhat like this - note, this is just an example:

<div id="header">
    <img src="/images/header.jpg" width="xxx" height="yy" alt="Web Site Title" title="" />
</div>
<ul id="menu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
</ul>
<div id="content">
    <div class="wrapper">
        <h1>Page Title</h1>
        <p>Page content goes here.  Page content goes here.  Page content goes here.</p>
        <p>Page content goes here.  Page content goes here.  Page content goes here.</p>
        <h2>Section Title</h2>
        <p>Page content goes here.  Page content goes here.  Page content goes here.</p>
        <p>Page content goes here.  Page content goes here.  Page content goes here.</p>
        <p>Page content goes here.  Page content goes here.  Page content goes here.</p>
        <h2>Section Title</h2>
        <p>Page content goes here.  Page content goes here.  Page content goes here.</p>
        <p>Page content goes here.  Page content goes here.  Page content goes here.</p>
    </div>
</div>
<div id="sidebar">
    <!-- sidebar content goes here -->
</div>
<div id="footer">
    <small>Copyright &copy; 2007, The Monster Under the Bed.  All Rights to Scare Unsuspecting Children Reserved.</small>
</div>

Code (markup):

Of course, the "xxx" and "yy" are just placeholders, as is the value of the alt="" attribute. In your case though, I'd look at a DIV around the menu, since that particular block contains other information that is related to the site's navigation just to make things easier (I can probably do it without the DIV, but I'm not your typical coder).

Then in the stylesheet, I'd look at floating the menu to the right, floating the content to the right as well, while floating the "wrapper" DIV to the left to force the sidebar to snap in underneath the menu when that gets floated to the right as well (at least I think that's how it should work - it's been a little while since I've had to do something like that; that and deathshadow showed me how to do it with one of his test layouts).

But that's just me.

 

wow thanks for ur answers