WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > HTML & XHTML > Safari not recognizing CSS code? (Dreamweaver CS5)

Reply
  Thread Tools Display Modes
Old 16th February 11, 06:38 AM   #1
benstewartdesig
WLC Member
 
Join Date: Feb 2011
Posts: 4
Default Safari not recognizing CSS code? (Dreamweaver CS5)

Hey guys, i've recently published my portfolio sight, and it seemed to be all working correctly in other browsers, until i noticed an image misaligned in Safari. I looked into it and it turns out as though Safari isn't recognizing any of my recent changes to my CSS sheet. Nothing is floating, div's arent sized correctly. You can check it out at www.benstewartdesign.com . It should work fine on Firefox but if you open it in Safari, i'm sure you'll see the same thing. Here is my code of my index page and CSS sheet:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ben Stewart Design</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/png" />
<link href="PortfolioCSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>

<body bgcolor="#000000">

<div id="mainContain">
	
    <img src="images/portfolioKearn.png" width="500" height="300" id="kearnedLogo" />

</div> <!--end mainContain-->

<div id="feedBar">
Follow Me!
<br />
<br />
<a href="http://www.twitter.com/BStewartDesign_" target="_blank"><img src="images/twitterLogo.png" width="40" height="41" border="0" id="twitterLogo" /></a>
<br />
<br />
<a href="http://www.flickr.com/photos/bestewar/" target="_blank"><img src="images/flickrLogo.png" width="60" height="17" border="0" id="flickrLogo" /></a>
<br />
<br />
<a href="http://benstewartdesign.blogspot.com/" target="_blank"><img src="images/blogspotLogo.png" width="43" height="43" border="0" /></a>

</div>

<div id="leftBar">
	<a href="about.html"><img src="images/aboutButton.png" name="aboutButton" width="91" height="24" border="0" id="button" onmouseover="MM_swapImage('dividerLine','','images/aboutDivider.png',1)" onmouseout="MM_swapImage('dividerLine','','images/dividerLine.png',1)" /></a>
	<a href="design.html"><img src="images/designButton.png" name="designButton" width="91" height="24" border="0" id="button" onmouseover="MM_swapImage('dividerLine','','images/designDivider.png',1)" onmouseout="MM_swapImage('dividerLine','','images/dividerLine.png',1)" /></a>
    <a href="feed.html"><img src="images/feedButton.png" name="feedButton" width="91" height="24" border="0" id="button" onmouseover="MM_swapImage('dividerLine','','images/feedDivider.png',1)" onmouseout="MM_swapImage('dividerLine','','images/dividerLine.png',1)"/></a>
	<a href="contact.html"><img src="images/contactButton.png" name="contactButton" width="91" height="24" border="0" id="button" onmouseover="MM_swapImage('dividerLine','','images/contactDivider.png',1)" onmouseout="MM_swapImage('dividerLine','','images/dividerLine.png',1)"/></a>
	<img src="images/dividerLine.png" name="dividerLine" id="dividerLine" />
    
</div>


<div id="bottom">
    <img src="images/BottomLeftLogo.png"  width="916" height="650" id="bottomLeftLogo" />
</div>


</body>
</html>
CSS SHEET:

Code:
a:link {
	color: #FF0;
	text-decoration: none;
}
a:visited {
	color: #FF0;
}
a:hover {
	color: #FFF;
}
#mainContain {
	width: 700px;
	position: relative;
	z-index: 3;
	margin-right: auto;
	margin-left: auto;
	height: auto;
}
#kearnedLogo {
	position: relative;
	top: 103px;
}
#leftBar {
	z-index: 3;
	top: 130px;
	width: 120px;
	clear: both;
	position: absolute;
	height: 220px;
	left: 0px;
	background-image: url(images/leftbarBG.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#button {
	padding-top: 13px;
	padding-left: 20px;
	padding-bottom: 12px;
}
#dividerLine {
	position: absolute;
	top: 3px;
	width: 16px;
	height: 197px;
	left: 3px;
}
#feedBar {
	position: absolute;
	right: 10px;
	top: 5px;
	text-align: center;
	color: #FF0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 60px;
	z-index: 3;
}
#homeText  {
	float: left;
	margin-right: 15px;
	margin-top: 12.5px;
}
#homeIcon  {
	float: left;
}
#mainText {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #FFF;
	text-align: justify;
	font-size: 12px;
	z-index: 2;
}
#designMain {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #FFF;
	font-size: 12px;
	top: -20px;
	position: relative;
	z-index: 2;
}
#designMainPic {
	border: 2px solid #FF0;
	margin-top: 20px;
	padding: 2px;
	z-index: 2;
}
#designDivider {
	margin-top: 20px;
	z-index: 2;
}
#contactInfo {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FF0;
	text-align: left;
	z-index: 2;
	font-weight: lighter;
}
#contactIcon {
	position: inherit;
	padding-right: 35px;
	clear: both;
	z-index: 3;
}
#bottom {
	z-index: 0;
}
#bottomLeftLogo {
	position: absolute;
	left: 0px;
	bottom: -60px;
	overflow: hidden;
	clear: both;
	z-index: 0;
}
#DesignbottomLeftLogo {
	position: absolute;
	bottom: -1550px;
	overflow: hidden;
	clear: both;
	z-index: 0;
}
#flickrWidget {
	float: left;
	margin-right: 10px;
}
#twitterWidget {
	float: left;
	margin-top: 15px;
}
<!--end CSS sheet-->

soooo yeah, its weird because it responding perfectly for my two bars (leftBar and feedBar), which are absolutely placed. Again, its fine in Firefox but not in Safari, if you guys have any hints please let me know asap.

Last edited by benstewartdesig; 16th February 11 at 06:01 PM.
benstewartdesig is offline   Reply With Quote
Old 16th February 11, 07:03 AM   #2
benstewartdesig
WLC Member
 
Join Date: Feb 2011
Posts: 4
Default Re: Safari not recognizing CSS code? (Dreamweaver CS5)

I mean it shows up perfectly when i "Preview in Browser" out of Dreamweaver, both in Firefox and Safari, and then once its up and hosted it shows up fine in Firefox, but then completely ****s out in Safari. I'm at a loss, it just doesnt make sense to me. I feel like there are old id/div names/rules that are left over and causing something to go wrong somewhere or something. Any help is appreciated.
benstewartdesig is offline   Reply With Quote
Old 16th February 11, 05:01 PM   #3
benstewartdesig
WLC Member
 
Join Date: Feb 2011
Posts: 4
Default Re: Safari not recognizing CSS code? (Dreamweaver CS5)

bump....
benstewartdesig is offline   Reply With Quote
Old 16th February 11, 06:02 PM   #4
benstewartdesig
WLC Member
 
Join Date: Feb 2011
Posts: 4
Default Re: Safari not recognizing CSS code? (Dreamweaver CS5)

now it appears as though i've fixed it as far as aligning left and right, but the main content of each page (other than index.html) is 5 lines lower than what it should be in Safari. Firefox is working perfectly as far I can see still. Ideas?
benstewartdesig is offline   Reply With Quote
Old 17th February 11, 03:03 PM   #5
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Safari not recognizing CSS code? (Dreamweaver CS5)

look into using a reset.css file. The problem is probably related to you not defining "0" margins on html page itself. It's always best to use a reset file so you can make sure you're starting out as close to "0 0" as possible.

Without using that technique some browsers have their own idea of where "0" is located. Although this isn't a perfect solution, it's as close as can be gotten.

Ryan
rkrause is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

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. The time now is 04:18 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.