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

browser compatibility

W

webbyman

macrumors newbie
Original poster
Oct 7, 2009
1
0
UK, The North
hey all,

just a quick question, well only if it is quick :p

I am a student new to web design and currently designing my own website however when viewing the site in firefox it is perfect to my requirements however in safari it is not. How can I overcome this issue?

Many Thanks
 
Every browser render things differently.

google: browser compatibility website design
 
To answer the OP's question as to how to overcome said problems, high level view...

How is complex, here are the basics:

Start out by learning about standards, specifically W3C standards. Meaning, learn HTML and CSS properly, i.e. which attributes are cross browser supported and the proper syntax. For reference use sites like W3CSchools.com, for example. The next thing you always do is validate your code and resolve all errors and heed all warnings. This step, alone, will teach you most of what you need to know. Finally, do a little research on browser quirks, especially in the CSS realm, and consider installing reset.css scripts which fix many CSS issues and do your best to minimize CSS conditionals which are browser proprietary and can be quite confusing.

When you think you got most of this down, consider coding in XHTML transitional, then eventually to XHTML strict which by current W3C standards will render the page more similarly than other types, although far from perfect.

Knowing all this comes from experience, and even the most guru developers still look things up and validate and fix, and attend Google University. Which is to say, use Google to find solutions to common problems as Consultant wisely mentioned earlier. Just bear in mind someone's code from a blog might not be strict compliant, but experience will help you recognize this.

If you use frameworks to assist in development, make sure they follow W3C standard compliancy, and for Javascript frameworks in particular - follow DOM standards. JQuery is one such JS framework of many.

Start using good tools like the developer toolbar for FFox to help you debug issues and easily link to the validation sites.

I'm sure others will chime in with observations and suggestions. Hope this helps you get started with the high level view of things.

Cheers.

-jim
 
Just getting my start in web design and loving it so far. Completely self taught so far using some books and google university as you said. I've run into a bit of a snag. I already have the top area where I want it, a drop down menu made from modified from resources that works in all the major browsers. That's fine. But when I go to make a basic test area to start putting body content into place it displays in all browsers besides safari. I've learned so far just from the drop down menu that the browsers have different specifications towards css, and also leading to me hating IE more than I already did before. Any thoughts on what could cause something to not display properly with this browser?
 
Last edited:
mrbw said:
Just getting my start in web design and loving it so far. Completely self taught so far using some books and google university as you said. I've run into a bit of a snag. I already have the top area where I want it, a drop down menu made from modified from resources that works in all the major browsers. That's fine. But when I go to make a basic test area to start putting body content into place it displays in all browsers besides safari. I've learned so far just from the drop down menu that the browsers have different specifications towards css, and also leading to me hating IE more than I already did before. Any thoughts on what could cause something to not display properly with this browser?
Click to expand...

Need to see the site or at minimum the code to be able to help. It's just guessing otherwise.
 
my html

PHP: 
<!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>Meritage Research & Investigations</title>

<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
<script type="text/javascript" src="dropmenu_ie.js" ></script>
</head>

<body>
<div id="top_container">
	<div id="logo_bar_top"></div>
    <div id="logo"></div>
	<div id="logo2"></div>
    <div id="menu">
	<ul>
		<li>
			<div class="dwn_arw">   Main Menu</div>
			<ul>
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="Services">Services</a>
					<ul>
                		<li><a href="#" title="!!!">!!!</a></li>
          				<li><a href="#" title="!!!">!!!</a></li>
						<li><a href="#" title="!!!">!!!</a></li>
                	</ul>        
            	</li>
    			<li><a href="#" title="About Us">About Us</a></li>
            	<li><a href="#" title="Order">Order</a></li>
            	<li><a href="#" title="News">News</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
			</ul>
    	</li>
	</ul>
	</div>
</div>	
<div id="main_container">
    <div class="content1_home">
        <h3></h3>
        <p>This is a test!!!</p>    <<<<crazy enough this is the only thing i've had a problem with. it wont display. even opera will do it.
    </div>
    <div id="logo_bar_btm"></div>
</div>
</body>
</html>


css

PHP: 
@charset "utf-8";
/* CSS Document */

html, body{
background:#fcff97;
border:0;
margin:0;
padding:0;
height:100%;}
	#top_container{
	height:126px;
	position:relative;
	border-bottom:double 2px #000;}
		#logo_bar_top{
		background: url(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo_bar1.gif) repeat-x;
		height:36px;
		width:auto;}
		#logo{
		position:absolute;
		top:36px;
		left:102px;
		background: url(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo.gif) no-repeat;
		background-color: #fcff97;
		margin-top:0;
		height: 90px;
		width: 376px;}
		#logo2{
		height:90px;
		width:650px;
		position:absolute;
		top:36px;
		right:0;
		background: url(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo2.gif) no-repeat;}
	#main_container{
	background: -moz-linear-gradient(top, #ffff99, #b98631);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffff99), to(#b98631));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=ffff99, end Colorstr=#b98631);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff99, endColorstr=#b98631)";	
	height:100%;
	position:relative;}		
		#content_home{
			position:relative;
			height:500px;
			width:500px;
			z-index:500px;}
		#logo_bar_btm{
		position:absolute;
		bottom:0;
		width:100%;
		height:36px;
		background: url(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo_bar0.gif) repeat-x;}		
#menu{
	position:absolute;
	top:36px;
	left:0;
	padding-top:71px;	
	width: 103px;
	background: #b98631;
	float: left;
	background:#b98631;
	background: -moz-linear-gradient(top, #ffff99, #b98631);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffff99), to(#b98631));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=ffff99, end Colorstr=#b98631);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff99, endColorstr=#b98631)";
	-moz-shadow:inset 0px 0px 1px #edf99ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	text-shadow: #666666 5px 5px 5px;}
	#menu li .dwn_arw{
	padding-right:21px;
	background: url(../../Meritage%20Research%20&%20Investigation,%20Inc/img/strt_arw.gif) no-repeat right 4px;}
	#menu li:hover .dwn_arw{background: url(../../Meritage%20Research%20&%20Investigation,%20Inc/img/drp_arw.gif) no-repeat right 7px;}
	#menu ul{
	list-style: none;
	margin: 0;
	padding:0;
	width:103px;
	float: left;}
	#menu a{
	text-align:center;
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	margin: 0;
	padding: 2px 3px 0 0;
	color: #000;
	background:#b98631;
	background: -moz-linear-gradient(top, #ffff99, #b98631);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffff99), to(#b98631));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=ffff99, end Colorstr=#b98631);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff99, endColorstr=#b98631)";
	text-decoration: none;}
	#menu a:hover {
	color: #a00;
	background:#b98631;
	background: -moz-linear-gradient(top, #b98631, #ffff99);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b98631), to(#ffff99));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=b98631, end Colorstr=#ffff99);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b98631, endColorstr=#ffff99)";}
	#menu li {position: relative;}
	#menu ul ul {
	position: absolute;
	z-index: 500;}
	#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;}
	div#menu ul ul,
	div#menu ul li:hover ul ul,
	div#menu ul ul li:hover ul ul
	{display: none;}
	div#menu ul li:hover ul,
	div#menu ul ul li:hover ul,
	div#menu ul ul ul li:hover ul
	{display: block;}
.content1_home{
	position:absolute;
	top:300px;
	left:300px;
	background:#FFFFFF;
	height:200px;
	width:200px;}
.content_home>h2{}
.content_home>p{}
.content_home>.sub{}

learning as I go so most likely more than few unnecessary things in it. Any help would be awesome. Been looking into the topic and so far have come up with nothing.
 
Last edited by a moderator:
I copied and pasted the code into a new local page and it displayed the same in Firefox and Safari. I don't have the script file that you declare though, so perhaps it does something bad for Safari. That would be the only real difference. I have Safari 5.0.3. Also be sure to clear your cache in Safari.
 
PHP: 
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" drop";
   }
    node.onmouseout=function() {
	this.className=this.className.replace (" over", "");
   }
   }
  }
 }
}
window.onload=startList;

thought I should of added it, it's the only thing I've found to make the drop down work in IE.

I tried clearing the cache and it still did the same.
 
Last edited by a moderator:
Adding that had no effect. One other difference for me is that I don't have the images referenced in the CSS. You also use a comma and a space in the files names, which could be part of the problem.

Example:
Code: 
../../Meritage%20Research%20&%20Investigation,%20Inc/img/drp_arw.gif
The %20 stands for a space. You should also avoid the & in file names as those are used in URLs for parameters. I'd be willing to be this is the source of your problem. Don't uses space, commas, or ampersands in file/folder names for the web.
 
Those images that are attributed to those file names display just fine. But the advise is well noted. I use linux, that shouldn't of slipped by me. Windows is making me lazy. Mainly what I see is that on the other browser i'm testing in, rockmelt, firefox, opera and IE show the 200 by 200 px box in front of the gradient in display and in safari it doesn't. I'll switch the file names around and change those values.
 
Attached is what I see for reference. I shrunk it a little just to reduce file size, but shows what you describe.
 

Attachments

  • mr-safari.gif
    mr-safari.gif
    18.5 KB · Views: 85
hmmmm... yeah I got nothing, I have it on win 7 so maybe its a problem with that. Mainly just downloaded it so if anyone using a mac saw the site they could see the content. Glad to hear it showed up. Thanks for all the help. :D
 
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