Hi guys,
I've created a cut down version of my home page and its css.
The problem is that I'm getting inconsistant result in different browsers. So what's new I hear you say!
I read the last 20-30 posts which has given me some idea of the problem but I haven't solved them all.
If you load the page in NIE6 you get a green line and a grey block, however in Opera and Netscape it displays OK, except for font. The position of the text seems to be different in each of the 3 browsers.
I've pasted in the Code below and would be grateful if someone could shed a little light on metters. Many thanks.
Page code:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ColneSpring Models Home</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"c/colne.css" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args+".location='"+args[i+1]+"'");
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="SitePic">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"i/Img_0019R700.jpg" alt="Welcome to ColneSpring Models">
<div id="PageTitle">
<p>Welcome to ColneSpring Models</p>
</div>
</div>
</div>
</body>
</html>
Css:-
/***************************************/
/* Colne.css for use with Default3.htm */
/***************************************/
body {
font-family: Arial, sans-serif
color: #333333;
margin: 0px;
padding: 0px;
background-color: #C0C0C0; /* Grey */
height:0px;
}
#wrapper{
color:#333;
margin: 0px auto 0px auto;
padding: 0 0 0 0;
border: 1px solid #bbb;
width: 700px;
background-color:#996600; /* Brown */
height:0px;
}
#SitePic{
width: 700px;
top: 0px;
left: 0px;
background-color:#00FF00; /* Green */
height: 0px;
}
#PageTitle{
top: -60px
color: #ffffff;
font-weight: normal;
background-color: #666666; /* Dark Grey */
height:0px;
}
#PageTitle p{
left: 20px;
color: #FFFFFF;
font: Arial, sans-serif;
font-size: 24pt;
font-weight: bold;
width: 550px;
top: -95px;
position: relative;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}Check out your CSS at the CSS Validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->), as it found 3 errors when I ran it.Tanks NogDog,
Fixing the css has solved the font display problem but nothing else!
I was wondering if the Z-index might help?
MimorkerisThe only thing you can do is try to do things differently. Think replacing padding with margin, think absolute or relative positioning elements (that solves a few IE bugs).
Make sure you use valid HTML or XHTML. I found opera to be very sensitive to common mistakes like forgetting to close <li> tags.
Of course, first figure out what's the element that is displayed differently. I usually find it helpful to set bgcolor to everything while trying to figure out what's causing the problem.
If nothing works you could use filters to get different information to different browsers.
BTW, why write
margin: 0px auto 0px auto;
padding: 0 0 0 0;
instead of the shorter:
margin: 0 auto;
padding: 0;
!?
Oh, and when you're done, make sure to look at it in IE 5.x.
It makes a big mess out of my page. Though rather than fixing the CSS I'm planning to use Javascript to print
"What the f_ !? Don't you know about the krafur virus threat? Quick! Go to microsoft and Download IE6 before you lose all your data, stupid!"Thanks for reply, I have now resolved most of the issues.
I do set back colors to highlight errors and I check display in IE6, NS, Opera, Firefox.
The "longhand" is a left over from experimenting.
In my experience of programing in VB that if I'm unsure of what's causing the problem, then hard coding everything eliminates influences from other software, the OS or the program's own defaults may be having. This may be using a sledge hammer to crack a nut, but hey! it matches my character.
The main problems have been doing 2 or 3 items at a time without testing thier effect on the page. Plus not fully grasping the the way properties are inherited.
if you want to see results so far Test Site (<!-- m --><a class="postlink" href="http://www.colnespring.com/index.htm">http://www.colnespring.com/index.htm</a><!-- m -->)
I've created a cut down version of my home page and its css.
The problem is that I'm getting inconsistant result in different browsers. So what's new I hear you say!
I read the last 20-30 posts which has given me some idea of the problem but I haven't solved them all.
If you load the page in NIE6 you get a green line and a grey block, however in Opera and Netscape it displays OK, except for font. The position of the text seems to be different in each of the 3 browsers.
I've pasted in the Code below and would be grateful if someone could shed a little light on metters. Many thanks.
Page code:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ColneSpring Models Home</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"c/colne.css" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args+".location='"+args[i+1]+"'");
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="SitePic">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"i/Img_0019R700.jpg" alt="Welcome to ColneSpring Models">
<div id="PageTitle">
<p>Welcome to ColneSpring Models</p>
</div>
</div>
</div>
</body>
</html>
Css:-
/***************************************/
/* Colne.css for use with Default3.htm */
/***************************************/
body {
font-family: Arial, sans-serif
color: #333333;
margin: 0px;
padding: 0px;
background-color: #C0C0C0; /* Grey */
height:0px;
}
#wrapper{
color:#333;
margin: 0px auto 0px auto;
padding: 0 0 0 0;
border: 1px solid #bbb;
width: 700px;
background-color:#996600; /* Brown */
height:0px;
}
#SitePic{
width: 700px;
top: 0px;
left: 0px;
background-color:#00FF00; /* Green */
height: 0px;
}
#PageTitle{
top: -60px
color: #ffffff;
font-weight: normal;
background-color: #666666; /* Dark Grey */
height:0px;
}
#PageTitle p{
left: 20px;
color: #FFFFFF;
font: Arial, sans-serif;
font-size: 24pt;
font-weight: bold;
width: 550px;
top: -95px;
position: relative;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}Check out your CSS at the CSS Validator (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m -->), as it found 3 errors when I ran it.Tanks NogDog,
Fixing the css has solved the font display problem but nothing else!
I was wondering if the Z-index might help?
MimorkerisThe only thing you can do is try to do things differently. Think replacing padding with margin, think absolute or relative positioning elements (that solves a few IE bugs).
Make sure you use valid HTML or XHTML. I found opera to be very sensitive to common mistakes like forgetting to close <li> tags.
Of course, first figure out what's the element that is displayed differently. I usually find it helpful to set bgcolor to everything while trying to figure out what's causing the problem.
If nothing works you could use filters to get different information to different browsers.
BTW, why write
margin: 0px auto 0px auto;
padding: 0 0 0 0;
instead of the shorter:
margin: 0 auto;
padding: 0;
!?
Oh, and when you're done, make sure to look at it in IE 5.x.
It makes a big mess out of my page. Though rather than fixing the CSS I'm planning to use Javascript to print
"What the f_ !? Don't you know about the krafur virus threat? Quick! Go to microsoft and Download IE6 before you lose all your data, stupid!"Thanks for reply, I have now resolved most of the issues.
I do set back colors to highlight errors and I check display in IE6, NS, Opera, Firefox.
The "longhand" is a left over from experimenting.
In my experience of programing in VB that if I'm unsure of what's causing the problem, then hard coding everything eliminates influences from other software, the OS or the program's own defaults may be having. This may be using a sledge hammer to crack a nut, but hey! it matches my character.
The main problems have been doing 2 or 3 items at a time without testing thier effect on the page. Plus not fully grasping the the way properties are inherited.
if you want to see results so far Test Site (<!-- m --><a class="postlink" href="http://www.colnespring.com/index.htm">http://www.colnespring.com/index.htm</a><!-- m -->)