[SOLVED] IE 6 problem,I can't solve it

[Rommeo]

Hi

 

I'm new about CSS programming. I have a problem about my left div, and an empty space.

The problem can be seen here clearly;

 

And my css file is ;

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #000000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #000000;
}
#wrapper {
background-color: #bdcef5;
padding: 0px;
width: 740px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(back.gif);
background-repeat: repeat-y;
}
#header2 {
background-color: #cd8804;
padding: 0px;
text-align: right;

}

#left {
float: left;
background-color: #4e82f7;
width: 150px;
margin: 0px;
}
#middle {
float: left;
background-color: #a1bbf6;
width: 430px;
margin: 0px;
}
#caption {
background-color: #4e82f7;
}
#right {
float: left;
width: 160px;
background-color: #bdcef5;
margin: 0px;
}
#footer {
background-color: #cd8804;
clear: both;
text-align: center;
margin: 0px;
}

/* CSS Tabs Starts here*/
#button {
        width: 148px;
        border-right: 1px solid #4e82f7;
        padding: 0 0 0 0; /* aslinda padding: 0 0 1em 0; idi */
        margin-bottom: 1em;
        font-family: Tahoma, Arial, sans-serif;
        font-size : 10px;
        background-color: #90bade;
        color: #333;
        }

        #button ul {
                list-style: none;
                margin: 0;
                padding: 0;
                border: none;
                }

        #button li {
                border-bottom: 1px solid #90bade;
                margin: 0;
                list-style: none;
                list-style-image: none;
                }

        #button 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 #button li a {
                width: auto;
                }

        #button li a:hover {
                border-left: 10px solid #1c64d1;
                border-right: 10px solid #5ba3e0;
                background-color: #2586d7;
                color: #fff;
                }

        #button li #active {
                border-left: 10px solid #1c64d1;
                border-right: 10px solid #5ba3e0;
                background-color: #2586d7;
                color: #fff;
                }
h2 {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
margin: 0px;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
}
p {
margin: 5px 0px 0px;
padding-top: 1px;
padding-right: 4px;
padding-bottom: 1px;
padding-left: 4px;
}

I ll be glad if anyone can help. Almost finished the work but could not solve this.

Thanx in advance.

 

[obsidian]

Believe it or not, the first can be solved with removing the white space from around your image tags in your markup. For some strange reason, IE likes to try and render white space sometimes... crazy, but it usually clears up those little picky nuances. The second may well be caused by the width of 100% you have assigned to the anchor tags. I would definitely recommend you put a fixed width on layouts that need to be so precise.

[Rommeo]

Believe it or not, the first can be solved with removing the white space from around your image tags in your markup. For some strange reason, IE likes to try and render white space sometimes... crazy, but it usually clears up those little picky nuances. The second may well be caused by the width of 100% you have assigned to the anchor tags. I would definitely recommend you put a fixed width on layouts that need to be so precise.

obsidian glad to see you here ! (: When i delete the spaces around the pic. empty space was disapperared. I was trying everything about the margins / pads. Now my first problem is solved. Thank you so much !

 

For the second one i changed 100% to 148px which it has to be. but it didn't work. maybe there is something wrong with the previous rules or something..

[obsidian]

Are you floating the anchor tags at all? In a list like that, floating is a good idea to help clear up discrepancies sometimes, too.

[Rommeo]

obsidian Thank you for the advice, ll be careful about it..

 

I found the solution ( dunno if it's the correct solution though ) but it's so weird. Solution is i added the "width : 118 px" to "button ul "and  "button li".The weird thing here is; it should be 148 .. The whole buttons width is 148 px. but when i try 148, it does not work. I tried 118 and now it works. Also i solved the problem which i have just noticed (also there are spaces between button images ) by the technique you said - deleting the spaces - around images. That works. Thanks.

[obsidian]

I found the solution ( dunno if it's the correct solution though ) but it's so weird. Solution is i added the "width : 118 px" to "button ul "and  "button li".The weird thing here is; it should be 148 .. The whole buttons width is 148 px. but when i try 148, it does not work. I tried 118 and now it works. Also i solved the problem which i have just noticed (also there are spaces between button images ) by the technique you said - deleting the spaces - around images. That works. Thanks.

 

Remember that IE and FF don't always interpret width and padding the same, so when you have an element with padding, you need to usually subtract the width of the padding from the declared width of the element since it literally gets added onto the final width... Another one of those beautiful rendering quirks