SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,613
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pointy View Post
    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.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,613
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    OK, pointy. This is an example of how you *might* want those ad boxes to behave. Just guessing, of course.
    Code:
    <!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>

  4. #4
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,613
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pointy View Post
    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
    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

  6. #6
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,870
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jugtk View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    Both render things according to the standards. The only way to get things looking different is to use non-standard code.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •