Go Back   CodingForums.com > :: Client side development > General web building > Building for mobile devices
Reload this Page Css help please!? my site looks differnt when viewing on mac vs pc vs mobile browser

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-06-2010, 03:28 AM   PM User | #1
wedydit
New to the CF scene

 
Join Date: May 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
wedydit is an unknown quantity at this point
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;
}
wedydit is offline   Reply With Quote
Old 05-06-2010, 02:45 PM   PM User | #2
wedydit
New to the CF scene

 
Join Date: May 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
wedydit is an unknown quantity at this point
::bump:: Please help willing to pay if needed be i know its has to be something small and picky need help asap!!
wedydit is offline   Reply With Quote
Old 05-06-2010, 09:28 PM   PM User | #3
CSSQuest
Regular Coder

 
Join Date: Mar 2009
Posts: 108
Thanks: 13
Thanked 0 Times in 0 Posts
CSSQuest is an unknown quantity at this point
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.
CSSQuest is offline   Reply With Quote
Old 05-06-2010, 09:33 PM   PM User | #4
wedydit
New to the CF scene

 
Join Date: May 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
wedydit is an unknown quantity at this point
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
wedydit is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 05:35 AM.
Advertisement
Log in to turn off these ads.