Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS script problem in Safari pls HELP

R

RAHQ

macrumors newbie
Original poster
Feb 26, 2010
2
0
Hi Guys:)

As this is my firs post please dont be to harsh:eek:

Sure some of you have had a problem like this so sorry for asking the question again. I am very new to css scripts and this type of web desighn. I have recently started working of a template wesite and it is now complete, the problem is that it displays perfectly in IE but not in Safari. It is as if Safari is not reading the CSS properly, text is wrong color size etc and buttons is all messed up. Please tel me what you think as I am totally confused by this:confused:

www.frontierhouse.co.za

Thank You.
PHP: 
--------------------------------------------------- */

/* ------------------------------------------------
   HTML ELEMENTS
--------------------------------------------------- */

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }

body {
	background: #fff;
	font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
	color: #666666;
	text-align: left;
	margin: 0;
}

/* links */
a, a:visited {	
	color: #326ea1; 
	background: inherit;
	text-decoration: none;		
}
a:hover {
	color: #724F2C;
	background: inherit;
	padding-bottom: 0;
	border-bottom: 2px solid #dbd5c5;
}

/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;
	font-weight: Bold; 	
	color: #333;		
}
h1 {
	font-size: 160%;	
	font-weight: normal;
}
h2 {
	font-size: 130%;
	text-transform: uppercase;	
}
h3 {
	font-size: 130%;	
}

h1, h2, h3, p {
	padding: 10px;
	margin: 0;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}

/* images */
img {
	border: 1px solid #999;
	padding: 8px;
	color: #FFF;
	background-color: #FFF;
}
img.float-right {
  	margin: 5px 0px 10px 10px;  
}
img.float-left {
  	margin: 5px 10px 10px 0px;
}

code {
  	margin: 5px 0;
  	padding: 10px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  	/* white-space: pre; */
  	background: #F5F5F5;
	border-left: 3px solid #D4D4D4;
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
	font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;	
	margin: 10px;
 	padding: 0 0 0 25px;  
   background: #F5F5F5;
	border-left: 3px solid #D4D4D4;	
	color: #444;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px;	
}
th strong {
	color: #fff;
}
th {
	background: #e7e6e6 url(button.jpg) repeat-x;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;	
	text-align: left;
	border-left: 1px solid #f4f4f4;
	border-bottom: solid 2px #fff;
	color: #333;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;		
}
/* end - table */

/* form elements */
form {
	margin:10px; padding: 0 5px;
	background: #F5F5F5;	
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button {
	height: 24px;
	margin: 0;
	color: #724F2C;
	background: #e7e6e6 url(button.jpg) repeat-x;
	border: .5px solid #dadada;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
	font-size: 12px;
	font-weight: normal;
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0 5px 0 10px; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 100px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button {
	width: 60px;
	height: 18px;
	vertical-align: top;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	position: relative;
	width: 910px;	
	margin: 0 auto;
	text-align: left;
	background: #fff url(content.jpg) repeat-y center top;
}
#content-wrap {
	float: left;
	width: 850px;
	margin-left: 30px;
	display: inline;
	padding: 0;
	border-top: 5px solid #fff;
	background: #fff url(content-wrap.jpg) repeat-x;
	color: #724F2C;
	font-size: 12px;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
}
#header {
	position: relative;
	background: #fff url(header-bg.jpg) repeat-y center top;
	height: 35px;
	width:910px;	
	padding: 0;	
	color: #fff;	
}

/* header links */
#header #header-links {
	position: absolute;
	top: 44px;
	right: 36px;
	color: #838181;
	font-size: 10px;
	font-weight: bold;
}
#header #header-links p {	
	padding: 0;	margin: 0;	
}
#header #header-links a {	
	color: #838181;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #444;		
}

/* header-photo */
#header-photo {
	position: relative;
	clear: both;
	margin: 5px auto;
	height: 250px;
	width: 850px;
	background: #fff url(header-photo.jpg) no-repeat center center;
}
#header-photo h1#logo-text a {
	position: absolute;
	margin: 0;
	padding: 0;
	font: bold 48px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -1px;
	color: #fff;
	text-transform: none;
	text-decoration: none;
	border: none;
	/* change the values of top and left to adjust the position of the logo*/
	top: -19px;
	left: 262px;
	width: 289px;
	height: 87px;
}

#header-photo h2#slogan {
	position: absolute;
	margin: 0;
	padding: 0;
	font: bold 14px 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #B6D1F8;
	/* change the values of top and left to adjust the position of the slogan*/
	top: -124px;
	left: 232px;
	background-color: #FFFFFF;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}

/* Navigation */
#nav {
	clear: both;	
	padding: 0;			
}
#nav ul {
	float: left;
	list-style: none;
	background: #E4E4E4 url(nav.jpg) repeat-x;
	width: 850px;
	padding: 0;
	height: 45px;
	display: inline;
	text-transform: uppercase;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 30px;
	overflow: hidden;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 15px;
	border-right: 1px solid #dadada;
	border-left: 1px solid #fafafa;
	border-bottom: none;
	color: #555;
	text-transform: capitalize;
	text-decoration: none;
	letter-spacing: 1px;
	font-family: "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	font-size: 14px;
	line-height: 45px;
	font-weight: bold;
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #326ea1;
	font-family: "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	font-size: 9px;
}
#nav ul li#current a {
	background: #DBDBDB url(nav-current.jpg) repeat-x;
	font-size: 11px;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
	font-weight: normal;
	color: #724F2C;
	display: table-cell;
}

/* Main Column */
.three-col #main {
	margin-top: 10px;
	margin-right: 70px;
	margin-bottom: 0;
	margin-left: 200px;
}
.two-col #main {
	margin: 10px 5px 0 200px;
}

#main h1 {
	margin: 10px 10px 0 10px;
	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
	color: #444;
	padding: 15px 0 2px 0px;
	border-bottom: 1px solid #dadada;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
}

/* Sidebar */	
#sidebar {
	float: left;
	width: 195px;	
	margin-top: 10px;	
}	
/* right column */
#rightcolumn {
	float: right;
	width: 190px;
	margin-top: 10px;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
}
#rightcolumn h1, #sidebar h1 {
	margin: 10px 5px 0 5px;
	padding: 5px 5px;
	font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #724F2C;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
	font-weight: normal;
}

/* sidemenu */
ul.sidemenu {
	text-align: left;
	margin: 7px 8px 8px 10px;
	padding: 0;
	border-top: 1px solid #E5E5E5;
	text-decoration: none;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
}
ul.sidemenu li {
	list-style: none;
	padding: 4px 0 4px 5px;
	margin: 0 2px;		
	border-bottom: 1px solid #E5E5E5;
}
* html body ul.sidemenu li {
	height: 1%;
}
ul.sidemenu li a {
	text-decoration: none;	
	color: #326ea1; 
	border: none;		
}
ul.sidemenu li a:hover {	
	color: #383d44;
	border: none;
}

/* footer-wrap */
#footer-wrap {
	clear: both;
	width: 910px;
	font-size: 95%;
	padding: 20px 0;
	text-align: left;	
	background: url(footer-bottom.jpg) no-repeat center bottom;	
}
#footer-wrap a {
	text-decoration: none;
	color: #666666;
	font-weight: bold;
}
#footer-wrap a:hover {
	color: #000;	
}
#footer-wrap p {
	padding: 10px 0;
	color: #724F2C;
}
#footer-wrap h2 {
	color: #666666;
	margin: 0;
	padding: 0 10px; 
}

/* footer */
#footer {
	clear: both;
	color: #666;	
	margin: 0 auto 10px auto; 
	width: 850px;
	padding: 5px 0;
	text-align: center;
	background: #F8F7F7;
	border-top: 1px solid #F2F2F2;	
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }

/* post */
.post-by {
	font-size: .95em;
	padding-top: 0;
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
}
.post-footer {
	background: #F5F5F5;
	padding: 5px; margin: 20px 10px 0 10px;	
	font-size: 95%;	
	color: #666666;	
}
.post-footer .date{
	margin: 0 10px 0 5px;	
}
.post-footer a.comments {
	margin: 0 10px 0 5px;	
}
.post-footer a.readmore {
	margin: 0 10px 0 5px;	
}
.TextHEading {
	font-family: "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold";
}
#wrap #content-wrap #main p .TextHEading {
	font-size: 16px;
	color: #724F2C;
}
#wrap #content-wrap p {
	color: #724F2C;
	font-size: 16px;
}
#wrap #header-photo #slogan img {
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
.Contact {
	font-size: 24px;
}
#wrap #content-wrap p2 {
	font-size: 10px;
}
#wrap #content-wrap p3 {
	font-size: 10px;
}
#wrap #content-wrap p {
	font-size: 12px;
}
 
Looks the same to me. I checked on Windows with Firefox, Safari, and IE8 and everything looks the same.
 
It seems ok if I use safari for windows but still looks bad if a mac views the page with safari. Any ideas?
 
Fonts

Hi, I could be wrong on this, but are you simply stating the use of Gill Sans or are you loading it into your website?

Gill Sans is not a standard Web Font, and has a few different variations, such as Gill Sans, and Gill Sans MT. These will differ between windows and mac, though you can get the MT version on mac.

I like Gill Sans myself, so in order to use this properly, you will need to make sure you call for the correct versions of the font on both systems. Gill Sans MT is not the default on mac, and you may be limited when it comes to Extended Condensed etc, therefore it will default back to Times etc as your page can't find the font specified.

If you are simply calling the font, which obviously isn't working... search for a Gill Sans web font and load it into your design and use Verdana etc as its fallback, ie, some older versions of IE don't seem to support loading of custom fonts, so always nice to suggest a fallback rather than leaving it up to the system to pick.

I hope this makes sense lol... haven't totally woken up yet haha
 
RAHQ said:
It seems ok if I use safari for windows but still looks bad if a mac views the page with safari. Any ideas?
Click to expand...

Just compared the site with Mac Safari and Firefox and I don't see any differences. Maybe it's your Safari that has problems. I'll attach what I see with Firefox on left and Safari on right.
 

Attachments

  • frontier.png
    frontier.png
    310 KB · Views: 124
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back