tags:

views:

30

answers:

3

UL element margins same but Firefox and IE showing different.

alt text

alt text

FULL CODE:

    <html>
    <head>
        <style>
            body
            {
                background-color: Red;
            }
            ul
            {
                font-family: Verdana;
                font-size: 8pt;
            }
            ul a
            {
                text-decoration: none;
                color: Black;
            }
            ul a:hover
            {
                text-decoration: underline;
            }
            table
            {
                background-color: Transparent;
                border-collapse: collapse;
            }
            table tr td
            {
                vertical-align: top;
                text-align: left;
                font: Verdana, Geneva, sans-serif;
                font-size: 12px;
            }
            #tblYayinAkisi
            {
                border: 1px white solid;
                background-color: #222222;
                font-family: Verdana;
                color: #ffffff;
                vertical-align: middle;
                font-size: 10pt;
                width: 100%;
            }
            #tblYayinAkisi th
            {
                background-color: Transparent;
                background-image: url(../images/bckSiyahGriTram.png);
                background-repeat: repeat-x;
                height: 20px;
                padding-left: 10px;
            }
            #tblYayinAkisi td
            {
                background-color: #222222;
            }
            #tblYayinAkisi td ul
            {
                border: 1px white solid;
                width: 100%;
                margin-left: 10px;
            }
            #tblYayinAkisi td ul li
            {
                clear: both;
                padding-top: 7px;
                list-style: none;
            }
            #tblYayinAkisi td ul li b
            {
                margin-right: 10px;
                float: left;
            }
            #tblYayinAkisi td ul li a
            {
                color: #ffffff;
                float: left;
            }
        </style>
    </head>
    <body>
        <table id="tblYayinAkisi">
            <tbody>
                <tr>
                    <th>
                        YABAN'da bugün
                    </th>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li>
                            <li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li>
                            <li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li>
                            <li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li>
                            <li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="text-align: center;">
                            <img src="images/canliYayin.png" />
                            <img src="images/tumAkis.png" />
                        </div>
                        <br />
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
A: 

You need to set the padding on the ul as well. E.g.

ul {
    padding: 0;
}
BalusC
But why this works?
uzay95
Most browsers comes with default margins/paddings on certain block elements, slightly similar this one: http://www.w3.org/TR/CSS21/sample.html
BalusC
Oh, here's a more comprehensive link: http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
BalusC
+2  A: 

Add this to your first ul declaration:

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

You will need to adjust your other ul declaration (i.e. margin-left: 10px) to suit your needs, but this rule will zero it out the differences.

The reason is that each browser uses a different combination of padding and margin to indent the ul. By zeroing out both, and setting only one (i.e. padding or margin) you can keep the display consistent.

Additionally, you need to use a valid DOCTYPE in your code so modern browsers don't revert to Quirks mode. Something like this goes at the very top of your HTML file with NOTHING in front of it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
Doug Neiner
A: 

I was wandering how to avoid that ie (7 and 8) display the child category (ul li ul) with margin 0 as well. That's what happens to me; the child elements display over theire parent (when hovered) cause theire margin is 0 as well. (they should display right of theire parent. When I set a margin (175px) to to the child cat. it gets apparently overruled by the ul, and still resides to margin 0. Any help would be apreciated!

Bello