website design problem :-( [Archive]

nick1

06-30-2004, 12:57 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:D27CDB6E-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*

David Harrison

06-30-2004, 01:35 PM

You have your image sources wrong, you have used \\'s where you should use /'s.

You have done this:<img src="picz\nav\home.gif" border="0">Instead of this:<img src="picz/nav/home.gif" border="0">Also you have not specified alt attributes for the images, and they do not have dimentions either.

peteg3

07-01-2004, 06:54 AM

You should also consider users that do not have javascript or flash players - make sure you have an alternative available!

As for problems with the url coding, i've got a really useful app that can be downloaded from my website (www.pgale.co.uk/shareware/) called htmllib and some accessibility links & tools available from the webtools section.
Pete.

Ben Rogers

07-02-2004, 08:11 PM

It would also help to use valid code...
<koff> http://validator.w3.org/check?verbose=1&uri=http%3A//www.limeblue.org/ </koff>