Question

I have made my site in static html,css and it’s work fine. I have tested it in Ie7, firefox and chrome and thing are equally fine.

Sometime a text is overlap to other div. I don’t know what this make it. If I refresh it’s work but sometime it’s happen

Is this bug in Chrome or I am doing something wrong in my code. I found it only sometime and amazed because it’s simply html file.

this is the code

<div class="slider-wrapper theme-default">
                        <div id="slider" class="nivoSlider">
                            <img alt="" data-thumb="img/ban1.png" src="img/ban1.png" />
                            <a href="http://dev7studios.com">
                                <img alt="" data-thumb="img/ban1.png" src="img/ban1.png" /></a>
                            <img alt="" data-thumb="img/ban1.png" src="img/ban1.png" />
                            <img alt="" data-thumb="img/ban1.png" src="img/ban1.png" />
                        </div>
                        <div id="htmlcaption" class="nivo-html-caption">
                        </div>
                    </div>
                    <div class="news-wrap">
                        <strong>Latest News: </strong>06/01/10 | A guide to maximizing your investment
                    </div>
                    <div class="vert-list">
                        <ul>
                            <li>
                            <div class="left-part">
                                <div class="head-txt">
                                    <img src="img/li1-h.png" alt=""/>
                                </div>
                                <div class="txt">
                                error sit voluptatem accusantium doloremque laudantium,
                                </div>
                                <div class="lm">
                                <img src="img/lm1.png" alt=""/>
                                </div>
                            </div>
                            <div class="right-part">
                                <img src="img/li-i1.png" alt=""/>
                            </div>
                            </li>
                            <li class="mid">
                            <div class="left-part">
                                <div class="head-txt">
                                    <img src="img/li2-h.png" alt=""/>
                                </div>
                                <div class="txt">
                                error sit voluptatem accusantium doloremque laudantium,
                                </div>
                                <div class="lm">
                                <img src="img/lm2.png" alt=""/>
                                </div>
                            </div>
                            <div class="right-part">
                                <img src="img/li-i2.png" alt=""/>
                            </div>
                            </li>
                            <li>
                            <div class="left-part">
                                <div class="head-txt">
                                    <img src="img/li3-h.png" alt=""/>
                                </div>
                                <div class="txt">
                                error sit voluptatem accusantium doloremque laudantium,
                                </div>
                                <div class="lm">
                                <img src="img/lm3.png" alt=""/>
                                </div>
                            </div>
                            <div class="right-part">
                                <img src="img/li-i3.png" alt=""/>
                            </div>
                            </li>
                        </ul>
                    </div>

here is the style

 .slider-wrapper {
        float: left;
        margin-top: -2px;
        position: relative;
    }

        .news-wrap {
            background: url('img/news.png') no-repeat;
            height: 22px;
            width: 100%;
            margin-top: 330px;
            padding-left: 19px;
            padding-top: 8px;
        }

        .news-wrap strong {
            font-weight: bold;
        }

        .vert-list {
            margin-top: 12px;
        }

Answer 1

That looks to me like an issue with float style rules instead of line-height. If an element only contains floating elements, then it will have 0 height, and no impact upon the surroundings, and all its contents will float ‘above’ the elements following it.

Providing the code you are using, or a snippet of it, would be helpful.