Difference between firefox and chrome

can anyone help me how to fix it should be seen in firefox the same how it shows in chrome
thanks
my site is
http://www.pointycards.com/new/shopping
thanks

pointy, your WordPress design is hopelessly broken in all browsers.

You must be using a wide screen monitor and a full screen browser. Have you tried narrowing the width of your browser window? I suggest that you start over.

The links are not associated with the respective ad boxes. The first thing you need to do is put the links in the same box as the image and text. Make one fixed-width ad box that works, then replicate it as in inline-block. Then, as the browser window (UA) narrows, the ads will flow to the next line instead of trying to resize.

OK, pointy. This is an example of how you might want those ad boxes to behave. Just guessing, of course.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ad Boxes - inline-block;</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1193977-difference-between-firefox-and-chrome
Thread: difference between firefox and chrome
2014.02.06 17:29
pointy
-->
    <style type="text/css">
*, *:before, *:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body {
    background-color:#ddd;
    padding:0;
    margin:0;
}
ul {
    list-style:none;
    text-align:center;
    padding:0;
    margin:0 auto;
}
li {
    display:inline-block;
    vertical-align:top;
    margin:12px 9px;
}
img {
    display:inline-block;
    vertical-align:top;
    background-color:#ddd;
    outline:1px solid #888;
    margin:6px 12px 12px;
}
.store,
.category {
    display:block;
    font-size:1.25em;
    font-family:Arial,sans-serif;
    text-align:center;
    margin-bottom:.25em;
}
.category {
    color:#888;
}
.shop {
    color:#393;
    font-weight:bold;
    font-size:1.25em;
    font-family:Arial,sans-serif;
    position:absolute;
    left:0;
    right:0;
    bottom:6px;
    margin:-1.25em 0 0;
}
a {
    display:inline-block;
    min-height:265px;
    background-color:#fff;
    text-align:center;
    position:relative;
    box-shadow:3px 3px 3px #777;
    outline:none;
    padding:6px 12px 1.625em;
}
a:link,a:visited {text-decoration:none;}
a:hover,a:focus {box-shadow:0 0 3px 3px #00f;}
a:active {box-shadow:0 0 3px 3px #f00;}
    </style>
</head>
<body>

<ul class="ads">
    <li>
        <a href="">
            <img src="imgs/buydig.jpg" alt="Buy Dig" width="125" height="125">
            <span class="store">Buy Dig</span>
            <span class="category">Digital</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/bhphoto.jpg" alt="B & H Photo" width="125" height="125">
            <span class="store">B & H Photo</span>
            <span class="category">Photo</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/beachcamera.jpg" alt="Beach Camera" width="125" height="125">
            <span class="store">Beach<br>Camera</span>
            <span class="category">Photo</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/best-buy-big-e1390583707365.jpg" alt="Best Buy" width="125" height="125">
            <span class="store">Best Buy</span>
            <span class="category">Marketplace</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/canon.jpg" alt="Canon" width="125" height="125">
            <span class="store">Canon</span>
            <span class="category">Photo</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/cameta.jpg" alt="Cameta Camera" width="125" height="125">
            <span class="store">Cameta<br>Camera</span>
            <span class="category">Photo</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/crocs2.jpg" alt="Crocs" width="125" height="125">
            <span class="store">Crocs</span>
            <span class="category">Shoes</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/dell3-e1391552615571.jpg" alt="Dell" width="125" height="125">
            <span class="store">Dell</span>
            <span class="category">Tech</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/drugstore.jpg" alt="Drugstore.com" width="125" height="125">
            <span class="store">Drugstore.com</span>
            <span class="category">Drug Store</span>
            <span class="shop">SHOP</span>
        </a>
    </li><li>
        <a href="">
            <img src="imgs/" alt="Store Name" width="125" height="125">
            <span class="store">Store<br>Name</span>
            <span class="category">Category</span>
            <span class="shop">SHOP</span>
        </a>
    </li>
</ul>

</body>
</html>

I am using headway themes
So I am not making the boxes alone
But I got your point about the wide browser window maybe thats the problem
Thanks for your help
You folks here are the greatest
Any more advice
Thanks
Pointy

The main problem with the wide screen (and it could have happened with a smaller screen, too) is that you were unaware of how the boxes on the page behaved.

Regardless of the theme that you are using, no matter how you are making the boxes, if you have not done so, please copy the example code that I included in post #3 and paste it into an empty file. Use EditPad or some such text editor. Give the file an .htm or .html suffix and open it in your favorite browser. The example code is a stand-alone page that demonstrates how the ad boxes and the “SHOP” text might behave. Hopefully the example will help you visualize how code works, whether it’s WordPress’ code or simple HTML and CSS.

Cheers :slight_smile:

It can never look exactly the same on chrome as it is on firefox as these browsers render some things quite differently. You can make them look almost the same, but not 100% exactly the same

Both render things according to the standards. The only way to get things looking different is to use non-standard code.

Note that most CSS3 and HTML 5 are not yet part of the standard so support for them is incomplete in both browsers. To get them to look the same you must use HTML 4 and CSS2 with perhaps those parts of CSS3 already adopted into the standard.

There are often other differences, like how fonts are rendered (and thus how tall some elements are etc. based on the font size). And bugs in one browser or another can cause differences, though these are pretty few. For the most part they are pretty similar.