Question

I can't understand, what is my problem. I have this HTML code:

<div id="ad-wrapper" >
    <div id="ad-left-wrapper" >
        <img src="Images/promo-left.png" alt="" />
    </div>
    <div id="ad-middle-wrapper" >
        <img src="Images/promo-middle.png" alt="" />
    </div>
    <div id="ad-right-wrapper" >
        <img src="Images/promo-right.png" alt="" />
    </div>
</div>

and this CSS for it:

#ad-wrapper
{
    height: 450px;
    width: 900px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#ad-left-wrapper
{
    width: 210px;
    height: 450px;
    float: left;
}

/* for middle and right blocks styles are similar*/

And this blocks are disappears in Google Chrome. What's happened?

Was it helpful?

Solution

It's the adBlock chrome extension ;) rename your id's

OTHER TIPS

Your HTML script is working fine. This is not displaying in FireFox and Chrome because you have not mention any border color or background color.

I have tested on Chrome. Just look into it

<div id="ad-wrapper" >
        <div id="ad-left-wrapper" >
            <img src="Images/promo-left.png" alt="" />
        </div>
        <div id="ad-middle-wrapper" >
            <img src="Images/promo-middle.png" alt="" />
        </div>
        <div id="ad-right-wrapper" >
            <img src="Images/promo-right.png" alt="" />
        </div>
    </div>

#ad-wrapper
{
    height: 450px;
    width: 900px;
    margin-top: 20px;
    margin-bottom: 20px;
    border:solid 1px; <!-- Border pixel -->
    border-color:#ff0;<!-- Border color-->

}

#ad-left-wrapper
{
    width: 210px;
    height: 450px;
    float: left;
    border:solid 1px; <!-- Border pixel -->
    border-color:#999;<!-- Border color-->
}

/* for middle and right blocks styles are similar*/
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top