website design problem :-(

nick1 · #1 (**permalink**) 06-30-2004, 12:44 PM

Greetings,

I am developing a personal website which is located at www.limeblue.org
I am using notepad to create my website. I have designed it so it will display nicely
even at 800x600 resolution.

However, here is my current situation:

1.) version 6.0.2800 of Internet Explorer displays the website just the way i want it to.
2.) version 7.1 of the Netscape browser does not display the website very well at all
3.) version 7.51of the Opera browser does a decent job of displaying the website

When i view my website on my local computer without connecting to the internet to view it,
netscape displays the website much better then when i view it over the internet. This doesn't
make sense to me why this is. The html, CSS, and browser version are all the same.

Here is my HTML code for the index.htm page:
======================================

<html>
<head>
<title>Welcome to limeblue.org</title>
<link rel="stylesheet" href="css\index.css">
<script type="text/javascript" language="JavaScript" src="scripts\index2popup.js"></script>
</head>

<body>

<br><br><br>

<center>
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
id="lb1" width="700" height="233">
<param name="movie" value="lb1.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed name="lb1" src="lb1.swf"
quality="high" bgcolor="#FFFFFF" swLiveConnect="true"
width="700" height="233"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

</center>

<br><br>

<p class="text">
<center>

<a href="index2.htm" onclick="OpenPopup(this.href); return false">enter</a>

<br><br>

<font size="1">
taste the full flavor of limeblue.org with the latest
<br>
release of internet explorer, java, and flash installed on your computer.

<br>

<a href="http://www.microsoft.com/windows/ie/downloads/default.asp">ie</a> |

<a href="http://www.java.com/en/download/windows_automatic.jsp">java</a> |

<a href="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">flash </a>

<br><br>

limeblue.org is powered by KMAN Technologies. ©2004.
</font>

</center>
</p>

</body>
</html>
==========================================

and here is the CSS code that index.htm links to:
========================================

a:link {text-decoration:none; color:#0000ff; font-weight:bold;}
a:visited {text-decoration:none; color: #0000ff; font-weight:bold;}
a:hover {text-decoration:none; color: #00ff00; font-weight:bold;}

body {
margin:0;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
filter: chroma (color=#ffffff);
}
=========================================

here is my HTML code for the index2.htm page which is accessed after the 'enter' button on index.htm is clicked:
=============================================

<html>
<head>
<title>limeblue.org</title>
<link rel="stylesheet" href="css/iframes&menu.css">
</head>

<body>

<p class="image">
<img src="picz/theboard750x500.jpg">
</p>



<p class="pic">
<iframe src="pic.htm" width="200px" height="200px" frameborder="1" scrolling="no" name="pic"></iframe>
</p>

<p class="message">
<iframe src="message.htm" width="535px" height="20px" frameborder="0" scrolling="auto" name="message" allowtransparency="true"></iframe>
</p>



<p class="nav">
<a href="index2.htm"><img src="picz\nav\home.gif" border="0"></a>  
<a href="music.htm"><img src="picz\nav\music.gif" border="0"></a>  
<a href="art.htm"><img src="picz\nav\art.gif" border="0"></a>  
<a href="writingshtm\writingsindex.htm"><img src="picz\nav\writings.gif" border="0"></a>  
<a href="photoshtm\photosindex.htm"><img src="picz\nav\photos.gif" border="0"></a>  
<a href="thrift.htm"><img src="picz\nav\thrift.gif" border="0"></a>  
<a href="credits.htm"><img src="picz\nav\credits.gif" border="0"></a>  
<a href="lime.htm"><img src="picz\nav\lime.gif" border="0"></a>
</p>

</body>
</html>
=============================================

and here is the CSS code that index2.htm links to:
==========================================

a:link {text-decoration:none; color:#0000ff; font-weight:normal;}
a:visited {text-decoration:none; color:#0000ff; font-weight:normal;}
a:hover {text-decoration:none; color:#00ff00; font-weight:normal;}

p.image
{
position:absolute;
left:0px;
top:0px;
}

p.pic
{
position:absolute;
left:275px;
top:104px;
}

p.message
{
position:absolute;
left:215px;
top:475px;
}

p.nav
{
position:absolute;
left:284px;
top:2px;
width:500px;
}

p.nav
a:link{text-decoration:none; color:#0000ff; font-weight:bold;}

p.nav
a:visited{text-decoration:none; color: #0000ff; font-weight:bold;}

p.nav
a:hover{text-decoration:none; color: #00ff00; font-weight:bold;}

p.display
{
position:absolute;
left:55px;
top:50px;
width:650px;
height:400px;
overflow:auto;
font-family:"bookman old style",sans-serif;
font-size:12px;
background-color:transparent;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
filter: chroma (color=#ffffff);
}

p.toc
{
position:absolute;
left:125px;
top:138px;
width:100px;
}

p.display1
{
position:absolute;
left:272px;
top:132px;
}

p.bul
{
position:absolute;
top:102px;
left:253px;
}

p.bur
{
position:absolute;
top:102px;
left:600px;
}

p.bll
{
position:absolute;
top:350px;
left:253px;
}

p.blr
{
position:absolute;
top:350px;
left:600px;
}
==================================

Can someone please shed some light on this situation for me? Please feel free to view my website with
I.E., Netscape, and Opera.... amongst other browsers. Any advice is GREATLY appreciated.

Thank you for your time,

*Nick*

dhromed · #2 (**permalink**) 07-01-2004, 04:48 PM

My notes:

- Get rid of the splash page. It's unnecessary, and as fate would have it, I don't have Flash installed yet anyway, so I can't see the Cool animation.

Not to mention the fact that it uses some really bad-looking HTML, such as <font>. No <font>. Do not use it.

- Your site likely looks different between IE/Gecko/Opera because of some things:
* No valid doctype. Get one here:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
No doctype, and IE6 switches to quirkes mode, which is mostly an incorrect box model that affects padding/border/margin/width, and can upturn a layout.
* IE's generally bad support of CSS in these modern times. Advice: write for Gecko (Mox, FFX, Netscape 6+) or Opera, then squish bugs for IE.

- I'm not sure why your site looks different online/offline. There must be some kind of difference somewhere, so view the source of the online file first, and compare it to the offline file.

- for :visited and :hover, you only need to specify styles that actually change. And font-weight:normal is obviously unnecessary, unless the parent element has its font weight set to bold.

- try not to use P (paragraph) for DIV. Try not to use too much DIV with all those unique classes; they'll only clutter up your stylesheet. Use logical markup. For instance this baby:
<p class="image">
<img src="picz/theboard750x500.jpg">
</p>

Why the P there? Why not remove the P, set the image to display:block and predictably modify its CSS from there on?

Clean XHTML = :driver

tfk · #3 (**permalink**) 07-06-2004, 07:38 AM

Splashpages are not always unnecessary.

As a matter of fact, if your website heavily depends on whatever technology is used, I would check up on it.

For general HTML, CSS and so on, I'd recommend the following:

CSS Validator:
http://jigsaw.w3.org/css-validator/

HTML Validator:
http://validator.w3.org/

For JavaScript, the JavaScript console (Tools -> ...) from Firefox or Mozilla browser is the best tool to debug and fix code.

Hope that helps!