Home/ Questions/Q 3593548
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T19:35:31+00:00

It should look like this – working on IE but it is’t showing like

  • 0

It should look like this – working on IE
alt text

but it is’t showing like the above on Google Chrome:

alt text

Let me paste the codes I’ve been using :

Structure :

.header
|_ .h-box-style & .h-box-1
  |_.ad-title
  |_.ad-content

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>OrderBorder.com -- The way you want the deals for Apple mobile phones </title>
    <link href="styles/main.css" type="text/css" rel="stylesheet"/>
    <script src="scripts/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>
    <script src="scripts/cufon-yui.js" type="text/javascript" language="javascript"></script>

</head>
<body>

    <div class="main">
        <div class="header">
            <div class="h-box-1 h-box-style">
                <span class="ad-title">Enjoy Group Savings</span>
                <div class="ad-content">
                    Wholesale prices for your Apple gear get lower with larger group size.
                </div>
            </div>
            <div class="h-box-2 h-box-style">
                <span class="ad-title">Earn Points</span>
                <div class="ad-content">
                    Keep earning points with every purchase you and your friends make.
                </div>
            </div>
            <div class="h-box-3 h-box-style">
                <span class="ad-title">Reach Borderline Prices</span>
                <div class="ad-content">
                    Eat my dust group!!! Use your points to bring your own prices to the border.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

and CSS Code:

body
{
    margin:0px;
    background-image:url(../images/background.jpg);
}
 div.main
{
    background-image:url(../images/main_background.jpg);
    background-repeat:no-repeat;
    height:950px;
    width:897px;
    margin-right:auto;
    margin-left:auto;
}

div.main div.header
{
    width:893px;
    height:120px;
    margin-top:120px;
    float:left;
}

div.main div.header div.h-box-style
{
    width:100%;
    height:100%;
}

div.main div.header div.h-box-style span.ad-title
{
    color:Black;
    font-family:Arial;
    font-size:20px;
    width:100%;
    background-color:Red;
}

div.main div.header div.h-box-style div.ad-content
{
    color:Gray;
    font-family:Arial;
    font-size:12px;
    width:100%;
    height:40px;
}   

div.main div.header div.h-box-1
{
    float:left;
    width:220px;
    height:80px;
    margin-left:80px;
    margin-top:20px;
}

div.main div.header div.h-box-2
{
    float:left;
    width:220px;
    height:80px;
    margin-left:70px;
    margin-top:20px;
}

div.main div.header div.h-box-3
{
    float:left;
    width:250px;
    height:80px;
    margin-left:30px;
    margin-top:20px;
}

When I inspect source code with Google Chrome developer tool, I can see that css is applied to the .ad-title and ad-content but these codes don’t change anything.

So I’ve pasted everything I’ve done. can some one help me why Google Chrome behaves like that and doesn’t show the text on the page under `.header’.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve found the problem. ad-title and ad-content are somehow matching some other internal css rules which don’t belong to my application. When I change the names to h-title and h-content they started working fine.

    Especially be careful, when you are using AdBlock extension since they don’t like ad word.

    • 0