Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css help please!? my site looks differnt when viewing on mac vs pc vs mobile browser

    here the link to my site
    www.wedydit.com its suppose to look similar to this www.410bc.com but when viewing on mac it looks differnet then pc or even on my iphone?no idea why? here is my css code any ideas? pretty please lol
    /*============================================================
    Theme Styles - contains all the base styles for the theme.
    To receive automatic updates and bug fixes, we recommend
    leaving this import and overriding specific styles below.
    ============================================================*/


    @import url(/themes/sexy/stylesheets/styles.css);



    /*============================================================
    Basic Styles - used for the simple controls.
    ============================================================*/

    /* @gui Font */
    *
    {font-family: Arial;}


    /* @gui Background */
    body
    {background-color: #FFFFFF;}


    /* @gui Text */
    body,
    p,
    input,
    textarea,
    #product-details .price,
    #faq-content .faq-list dt,
    #contact-form label,
    #cart-footer .cart-total #cart-shipping-tax p
    {color: #000000;}


    /* @gui Links */
    a:link,
    a:visited,
    #products .product-a h3,
    #products .product-a p
    {color: #000000;
    text-align:center;}


    /* @gui Links rollover */
    a:hover,
    a:active,
    #products .product-a:hover h3,
    #products .product-a:hover p
    {color: #FF0033; outline:none}


    /* @gui Header background */
    #main-title, #navigation div.pod h3, #minicart h3, #cart-head {
    background-color:transparent;
    }


    /* @gui Header text */
    #main-title h2,
    #navigation div.pod h3,
    #minicart h3,
    #minicart .minicart-contents,
    #cart-head
    {color: #0C0B0B;}

    #minicart .minicart-total
    {border-left-color: #0C0B0B;}


    /* @gui Sidebar links */
    #navigation div.pod a
    {color: #000000;}


    /* @gui Sidebar rollovers */
    #navigation div.pod a:hover
    {color: #000000;}


    /* @gui Products background */
    #products,
    #products .product-pic,
    #product-images .images-nav
    {background-color: transparent;}



    /*============================================================
    Custom Styles - add and override styles below.
    ============================================================*/

    body {
    margin:0;
    }

    #pricebox {
    background:#000000;
    }

    #onsale {
    background-color:#FF0033;
    color:#FFFFFF;
    float:right;
    font-size:14px;
    font-weight:bold;
    margin-top:-214px;
    padding:5px;
    position:relative;
    width:60px;
    }

    #header h1 {
    font-size:50px;
    font-weight:bold;
    line-height:35px;
    margin-bottom:13px;
    padding-top:25px;
    text-transform:uppercase;
    }

    #wrap {
    margin:0 auto;
    text-align:left;
    width:100%;
    }


    #main-title h2 {
    color:#000000;
    font-size:20px;
    font-weight:bold;
    margin:15px 0 1px;
    width:872px;
    text-transform:uppercase;
    }

    #main-title {
    background:transparent;
    float:left;
    height:auto !important;
    margin-bottom:2px;
    min-height:50px;
    width:100%;
    }

    #header {
    margin-bottom:5px;
    margin-top:20px;
    }

    #cart-count {
    float:right;
    font-size:14px;
    margin-top:-70px}

    #main-content {
    background:#E5E4E4 none repeat scroll 0 0;
    float:left;
    margin-bottom:0;
    margin-left:-12px;
    margin-top:-30px;
    padding:0 20px 20px;
    width:856px;
    }

    body.custom #main-content {
    padding:30px 25px 20px;
    width:825px;
    }

    #product-images .images-nav {
    float:left;
    height:28px;
    margin:-4px 0 0 3px;
    position:relative;
    width:300px;
    }

    #main {
    float:none;
    margin:auto;
    width:872px;
    }


    #mainimage {
    background:#FF0033 none repeat scroll 0 0;
    height:287px;
    margin-bottom:30px;
    margin-top:5px;
    padding-top:3px;
    text-align:center;
    width:100%;
    }

    ul#product_thumbnails {
    float: left;
    padding: 0;
    margin: 0;
    list-style: none;
    }


    #products {
    background:transparent none repeat scroll 0 0;
    display:inline;
    float:left;
    margin:auto;
    width:880px;
    }

    #products div.product {
    background:transparent;
    border-bottom:2px solid transparent;
    border-top:2px solid transparent;
    height:360px;
    padding:0;
    width:275px;
    }

    #products div.product p {
    background:#000000 none repeat scroll 0 0;
    color:#FFFFFF;
    float:right;
    font-size:14px;
    font-weight:bold;
    height:20px;
    margin-bottom:-30px;
    margin-right:0;
    padding:5px;
    position:relative;
    text-align:center;
    width:60px;
    }


    #products .product {
    margin:0px 0px 0px;
    position:relative;
    text-align:center;
    }

    #products .product-a {
    background:transparent;
    clear:left;
    cursorointer;
    display:block;
    float:left;
    height:100%;
    margin-left:0;
    overflow:hidden;
    text-align:center;
    text-decoration:none;
    width:300px;
    }

    #product-a {text-align: center; background:transparent;}

    #product-content {
    float:none;
    margin-left:100px;
    margin-top:30px;
    padding-bottom:25px;
    width:700px;
    }

    #product-image img {
    vertical-align:middle;
    }

    #product-image {
    display:block;
    height:420px;
    overflow:hidden;
    position:relative;
    text-align:center;
    width:300px;
    }

    #products .product-img {
    display:inline;
    float:none;
    vertical-align:middle;
    }

    #products .product-a {
    clear:left;
    background:transparent;
    cursorointer;
    display:block;
    float:left;
    height:100%;
    margin-left:0;
    overflow:hidden;
    text-align:center;
    text-decoration:none;
    }

    html #products .product-info {
    padding-left:0;
    text-align:center;
    width:100%;
    }

    html #products .product-price {
    width:100%;
    }

    #products .product-info {border-top:0px; float:left;
    padding:5px 0 11px;}

    #products .product-title {
    font-size: 14px;
    }

    #products .product-price {
    font-size: 12px;
    margin-left: 0px;
    width: 300px;
    }

    #cart-footer .cart-total h3 {
    font-size:26px;
    margin:0;
    }

    #contact-form {
    margin-left:150px;
    padding:15px 0;
    width:425px;
    }

    #contact-content {
    margin-top:20px;
    padding:15px 25px;
    }

    #product-1, #product-2, #product-3, #product-5, #product-6, #product-7, #product-9, #product-10, #product-11, #product-13, #product-14, #product-15, #product-17, #product-18, #product-19, #product-21, #product-22, #product-23, #product-25, #product-26, #product-27, #product-29, #product-30, #product-31, #product-33, #product-34, #product-35, #product-37, #product-38, #product-39, #product-41, #product-42, #product-43, #product-45, #product-46, #product-47, #product-49, #product-50, #product-51, #product-53, #product-54, #product-55, #product-57, #product-58, #product-59, #product-61, #product-62, #product-63, #product-65, #product-66, #product-67, #product-69, #product-70, #product-71, #product-73, #product-74, #product-75, #product-77, #product-78, #product-79, #product-81, #product-82, #product-83, #product-85, #product-86, #product-87, #product-89, #product-90, #product-91, #product-93, #product-94, #product-95, #product-97, #product-98, #product-99 {
    padding:0 15px 0 0;
    }

    #navigation {
    float:right;
    font-size:14px;
    height:30px;
    margin-left:267px;
    margin-top:50px;
    padding-bottom:0;
    padding-left:0;
    padding-top:0;
    width:670px;
    }



    #home-body {
    margin-top:15px;
    width:850px;
    height:725px}

    li {
    border-right:2px solid #000000;
    display:inline;
    font-size:12px;
    font-weight:bold;
    padding-left:10px;
    padding-right:10px;
    text-align:left;
    text-transform:inherit;
    }

    #onsaleproduct {
    background-color:#FF0033;
    color:#FFFFFF;
    float:right;
    font-size:14px;
    font-weight:bold;
    margin-top:-214px;
    padding:5px;
    position:relative;
    width:60px;
    }

    #onsale {
    background-color:#FF3000;
    color:#FFFFFF;
    margin-left:-307px;
    margin-top:120px;
    position:absolute;
    width:60px;
    }

    #head-nav {
    display:inline;
    padding-left:30px;
    padding-right:30px;
    }

    #header-navigation {
    float:right;
    margin-bottom:15px;
    margin-right:-10px;
    }

    h3 {
    color:#000000;
    font-size:16px;
    font-weight:bold;
    margin-bottom:0;
    }

    #product-details {
    float:left;
    margin-left:15px;
    width:340px;
    }

    #product-details .info, #product-form .options {
    padding-top:10px;
    width:100%;
    }

    input, textarea {
    color:#000000;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:normal;
    height:14px;
    width:5%;
    }

    #product-details .price {
    color:#000000;
    font-size:16px;
    font-weight:bold;
    margin-bottom:0;
    padding-bottom:5px;
    padding-top:0;
    width:100%;
    }

    #product-form .options select {
    margin:0.8em 0;
    width:100%;
    }

    #product-form .options {
    border-bottom:0 solid #000000;
    width:100%;
    }

    #inventory li {
    background:#FFFFFF none repeat scroll 0 0;
    border:1px solid #999999;
    display:block;
    float:left;
    list-style-image:none;
    list-style-positionutside;
    list-style-type:none;
    margin-bottom:3px;
    position:relative;
    width:90%;
    }

    #inventory .bar {
    background:#FF0033 none repeat scroll 0 0;
    height:14px;
    margin-left:-10px;
    position:inherit;
    }

    #inventory .bar span {
    color:#FFFFFF;
    font-size:10px;
    height:12px;
    left:5px;
    line-height:12px;
    overflow:hidden;
    position:absolute;
    top:1px;
    width:150px;
    }

    a#product-image span.icon_zoom {
    background-image:url(/themes/sexy/images/icon_zoom.png) !important;
    background-position:-50px 50%;
    background-repeat:no-repeat;
    cursorointer;
    display:block;
    height:20px;
    left:15px;
    overflow:hidden;
    position:absolute;
    top:7px;
    width:20px;
    z-index:100;
    }

    #product-addtocart {
    background:transparent url(http://i587.photobucket.com/albums/s...add-button.gif) no-repeat scroll 0 0;
    border:medium none;
    clear:both;
    cursorointer;
    display:block;
    height:37px;
    margin-left:0;
    margin-top:15px;
    width:71px;
    }

    .products_extra_pod {
    float:right;
    width:150px}


    #products_top_selling {
    background:#fff6f9 none repeat scroll 0 0;
    border:solid 1px #da1d5b;
    float:right;
    padding:5px;
    text-align:center;
    width:150px;
    }

    .product-info-thumb {text-align:left}



    .thumbnail{float:left; padding:2px}

    #cart-content {
    float:left;
    margin-bottom:80px;
    width:100%;
    }

    #cart-body {
    font-size:12px;
    }

    #cart-body th {
    font-weight:normal;
    padding-left:0px;
    width:0;
    }

    #cart-table {
    border-collapse:collapse;
    border-spacing:0;
    margin-top:25px;
    text-align:left;
    width:872px;
    }

    #cart-head {
    background:#000000 none repeat scroll 0 0;
    color:#FFFFFF;
    font-size:12px;
    text-transform:uppercase;
    }

    #cart-footer .update-btn {
    background:transparent url(http://i587.photobucket.com/albums/s...ate-button.gif) no-repeat scroll 0 0;
    border:medium none;
    cursorointer;
    height:24px;
    width:94px;
    }

    #cart-footer .checkout-btn {
    background:transparent url(http://i587.photobucket.com/albums/s...t-button-7.gif) no-repeat scroll 0 0;
    border:medium none;
    cursorointer;
    height:43px;
    margin-left:8px;
    width:129px;
    }

    #cart-footer .cart-shipping {
    display:inline;
    float:left;
    margin:15px 0 0;
    }

    #contact-submit {
    background:transparent url(http://i587.photobucket.com/albums/s.../sendtemp1.png) no-repeat scroll 0 0;
    border:medium none;
    clear:both;
    cursorointer;
    display:block;
    height:50px;
    margin:0 0 0 95px;
    width:250px;
    }

    .row-alt {background:transparent}

    #footer {
    background:transparent;
    height:40px;
    margin-bottom:-20px;
    margin-top:25px;
    text-align:center;
    }

    #footercontent {
    background:#FF0033 none repeat scroll 0 0;
    color:#FFFFFF;
    margin:auto;
    padding-bottom:15px;
    width:896px;
    }

  • #2
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ::bump:: Please help willing to pay if needed be i know its has to be something small and picky need help asap!!

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    108
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Welcome to the realm of browser compatibility.

    I think the reason people aren't answering is because of how in depth the fix would need to be.

    A.) Every browser loads html/css etc slightly differently. So by itself, each browser needs minor fixes to make sure the site loads the same.
    B.) Every device (Mac, PC, iPhone, Droid, Blackberry etc) tends to load different browsers. For instance Mobile Opera etc.

    Your best bet is to start by fixing the site as it appears across Firefox, Chrome, Safari and IE8. Use sites like browsershots to check this.

    THEN start working on a mobile version of your site in which you'll need to rip out any non-essential parts to make it load the most similar across devices.

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Crap... The browser check is fine on my mac all browsers look the same l! But on pc it's different then my mac. The browsers are fine it's just pc and mac look different regardless of which browser I use


  •  

    Posting Permissions

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