PDA

View Full Version : 2 column layout on PC shows as 1 column on mac



lverkeyn
12 Dec 2009, 07:41 PM
on www.cablepublishing.com you'll see a 2 column layout if you are using any browser on a pc. (firefox, IE, opera). I'm told, but haven't seen it for myself, that the right column doesn't show on the right, but underneath the left column when viewed with safari or firefox on a mac. I'm guessing that I'll need to create a 2nd .css sheet for layout on a mac? the .css is below. I've viewed the page on various PC computers at various resolutions with various browsers and cannot duplicate what Mac users tell me is happening... NO mac users I've asked see 2 columns. the outer div of the 2nd column is #sidebar and inside that div there are box-blue div's .
I'm stumped




* {
margin: 0;
padding: 0;
vertical-align: text-top;
}

body, th {
background: #FFFFFF url(images/img01.gif) repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
vertical-align: top;
}

h1, h2 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
}

h1 {
font-size: 197%;
}

h2 {
font-size: 167%;
}

h3 {
margin-bottom: 1em;
text-transform: uppercase;
font-size: 100%;
color: #000000;
}

p, ul, ol {
margin-bottom: 1.5em;
line-height: 1.6em;
}

p {
}

ol {
}

ul {
list-style: none;
}

ul li {
padding-left: 10px;
background: url(images/img16.gif) no-repeat 0px 10px;
}

a:link {
color: #3490F8;
}

a:hover, a:active {
text-decoration: none;
color: #F89934;
}

a:visited {
color: #666666;
}


img.left {
float: left;
margin: 0 20px 10px 0;
}

img.right {
float: right;
margin: 0 0 10px 20px;
}

.hrcolor {
color:#FF9933
}

.byline {
color: #CCCCCC;
}

.col-one {
float: left;
}

.col-two {
float: right;
}

.two-cols {
}

.two-cols .col-one, .two-cols .col-two {
width: 250px;
}

/* Boxes */

.box-orange {
background: url(images/img09.gif) repeat-x;
text-indent: 2px;
}

.box-orange .section {
background: url(images/img11.gif) no-repeat right top;
font-size: 100%;
color: #FFFFFF;
}
.box-orange .title {
background: url(images/img11.gif) no-repeat right top;
font-size: 150%;
color: #FFFFFF;
padding-left: 10px;
}

.box-orange .section b {
display: block;
height: 23px;
padding: 7px 0 0 10px;
background: url(images/img10.gif) no-repeat;
}

.box-orange .content {
padding: 20px;
}

.box-blue {
background: url(images/img13.gif) repeat-x;
}

.box-blue .section {
background: url(images/img15.gif) no-repeat right top;
font-size: 100%;
color: #FFFFFF;
}

.box-blue .section b {
display: block;
height: 23px;
padding: 7px 0 0 10px;
background: url(images/img14.gif) no-repeat;
}

.box-blue .content {
padding: 20px;
}

.box-pink {
background: url(images/img17.gif) repeat-x;
}

.box-pink .section {
background: url(images/img19.gif) no-repeat right top;
font-size: 100%;
color: #FFFFFF;
}

.box-pink .section b {
display: block;
height: 23px;
padding: 7px 0 0 10px;
background: url(images/img18.gif) no-repeat;
}

.box-pink .content {
padding: 20px;
}

/* Header */

#header {
width: 100%;
height: 240px;
margin: 0 auto;
clear: both;
float: left;
}
#header #search h3 {
text-transform:none;
color: #ffffff;
font-size:14px;
}

/* Logo */

#logo {
left: 1px;
top: 1px;
}

#logo h1, #logo h2 {
float: left;
}

#logo h1 {
padding-top: 40px;
text-transform: lowercase;
font-size: 34px;
font-weight: normal;
}

#logo h2 {
padding: 63px 0 0 3px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}

#logo a {
text-decoration: none;
color: #000000;
}

/* Search */

#search {
float: left;
width: 365px;
padding-top:10px;
vertical-align: bottom;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
left: 251px;
top: 1px;
padding-left: 25px;
position: absolute;
}



/* Menu */

#menu {
width: 100%;
height: 30px;
text-align: center;
margin-bottom: 0;
}

#menu ul {
margin: 0;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
padding: 0;
background: #FFFFFF;
margin: 0px;
}

#menu a {
display: block;
float: left;
background: url(images/img07.gif) no-repeat;
text-decoration: none;
color: #666666;
}

#menu a:hover {
color: #1777B1;
}

#menu b {
display: block;
float: left;
height: 23px;
padding: 7px 20px 0 20px;
background: url(images/img08.gif) no-repeat right top;

}

#menu li.active {
background: #CFCECE url(images/img04.gif) repeat-x;
}

#menu li.active a {
background: url(images/img06.gif) no-repeat right top;
color: #C90404;
}

#menu li.active b {
background: url(images/img05.gif) no-repeat;
}

/* Page */

#page {
width: 960px;
margin: 0 auto;
padding: 30px 0 0 0;
}

/* Content */

#content {
float: left;
width: 520px;
}
/* InnerPage Content */

#innerpage {
float: left;
width:650px;
margin-left: 30px;

}

/* Product */

#product {
float: left;
}
/* Feature */

#feature {
margin-bottom: 20px;
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #CCCCCC;
border-right-width: 1px;
border-right-style: dashed;
border-right-color: #CCCCCC;
}

/* Sidebar */

#sidebar {
float: right;
width: 420px;
}

#sidebar .col-one {
width: 220px;
}

#sidebar .col-two {
width: 180px;
}

/* Footer */

#footer {
height: 100px;
padding: 20px;
background: #fddd08;
border-top: 3px solid #f05826;
}

#footer p {
margin: 0;
text-align: center;
font-size: 85%;
}
#buy {
font-size: medium;
font-weight: bold;
}

#alternatingone {
background-color: #F9F0D0;
}
#banner {
position: absolute;
width: 200px;
height: 212px;
left: 739px;
top: 0px;
}
.saleprice {
text-decoration: line-through;
}
.redsale {
color: #CC0000;
font-weight: bold;
}
.imageleft {
float: left;
padding: 4px;
}
.caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #66CC33;
}


.boldwhite {
color: #FFFFFF;
font-weight: bold;
}