|
Answer» Hello! I'm working on a website called felectronix.com (http://felectronix.com/index.html).
Today, when I was working on my site, I NOTICED that the top left image didn't change until I was pointing on it's upper half. Until then the link on it didn't work.
This issue exist on several of the pages on my site, though not on http://felectronix.com/more.html.
My page is built in html. please help me.
(index.html, the code down to it's content)
Code: [Select]<HTML>
<head>
<title>Felectronix</title>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<div id="Javsacript">
<script type="text/javascript"> // <![CDATA[
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "http://mobile.felectronix.com/mobil.html";
} // ]]>
else
{
if ((navigator.userAgent.indexOf('/iPhone/i') != -1) || (navigator.userAgent.indexOf('/iPod/i') != -1)) {
document.location = "http://mobile.felectronix.com/mobil.html";
}
}
// ]]></script>
</div>
<body BGCOLOR="grey">
<div id="header" style="top: 0px; left: 0px; background: grey; width: 168px;">
<a href="http://felectronix.com/index.html"><img src="http://felectronix.com/resource/header1.png" border="0" width="168" height="200" title="Felectronix!" onmouseover="this.src='http://felectronix.com/resource/header2.png'" onmouseout="this.src='http://felectronix.com/resource/header1.png'" ALIGN="left" hspace="4" VSPACE="0">
</a>
</div>
<div id="header2" style="top: 0px; left: 176px; background: grey; height: 65px;">
<a href="http://felectronix.com/Forum.html"><img src="http://felectronix.com/resource/forum.png" border="0" title="Visit the forum" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/forum.png'" align="top"></a>
<a href="http://felectronix.com/chat/index.html"><img src="http://felectronix.com/resource/chat.png" title="Enter the chatroom" border="0" align="top" hspace="0" vspace="0" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/chat.png'"></a>
<a href="http://m.felectronix.com/index.html"><img src="http://felectronix.com/resource/mobile.png" border="0" title="Visit the mobile site" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/mobile.png'" align="top"></a>
<a href="http://felectronix.com/more.html"><img src="http://felectronix.com/resource/experience.png" border="0" title="Experience MORE!" onmouseover="this.src='http://felectronix.com/resource/more.png'" onmouseout="this.src='http://felectronix.com/resource/experience.png'" align="top"></a>
<a href="http://felectronix.com/contact.html"><img src="http://felectronix.com/resource/contact.png" border="0" title="Contact the felectronix team" onmouseover="this.src='http://felectronix.com/resource/us.png'" onmouseout="this.src='http://felectronix.com/resource/contact.png'" align="top"></a>
<a href="http://felectronix.com/chat/faq.html"><img src="http://felectronix.com/resource/FAQ.png" title="FAQ - Frequently Asked Questions" border="0" align="top" hspace="0" vspace="0" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/FAQ.png'"></a>
</div>
<div id="foot" style="position: fixed; bottom: 0px; left: 0px; background: grey; width: 100%; height: 30px;">
<img src="http://felectronix.com/resource/row.png" width="100%" height="30px">
</div>
<div id="footapp1" style="position: fixed; bottom: 1px; left: 10px; height: 27px;">
<a href="http://felectronix.com/index.html"><img src="http://felectronix.com/resource/face.png" border="0""></a>
</div>
<div id="Google+1" style="position: fixed; bottom: 1px; left: 92%; height: 27px;">
<g:plusone href="http://felectronix.com">+1</g:plusone>
</div>
<div id="TWEET" style="position: fixed; bottom: 1px; left: 80%; height: 27px;">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://felectronix.com/index.html" data-text="I just visited felectronix.com! They've got a forum, a chat AND a mobile site. Check it out!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<DIV id="content" ALIGN="CENTER" style="position: fixed; top: 75px; left: 0%; width: 100%;">
<DIV id="contentbox" ALIGN="CENTER">
<span style="color:black">
almost the same code, but more.html:
Code: [Select]<html>
<head>
<title>Felectronix - MORE!</title>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<div id="Javsacript">
<script type="text/javascript"> // <![CDATA[
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "http://mobile.felectronix.com/mobil.html";
} // ]]>
else
{
if ((navigator.userAgent.indexOf('/iPhone/i') != -1) || (navigator.userAgent.indexOf('/iPod/i') != -1)) {
document.location = "http://mobile.felectronix.com/mobil.html";
}
}
// ]]></script>
</div>
<body bgcolor="grey">
<div id="header" style="position: fixed; left: 8px; background: grey; width: 168px;">
<a href="http://felectronix.com/index.html"><img src="http://felectronix.com/resource/header1.png" border="0" width="168" height="200" title="Felectronix!" onmouseover="this.src='http://felectronix.com/resource/header2.png'" onmouseout="this.src='http://felectronix.com/resource/header1.png'" align="left" hspace="4" vspace="0">
</a>
</div>
<div id="header2" style="position: fixed; left: 183px; background: grey; height: 65px;">
<a href="http://felectronix.com/Forum.html"><img src="http://felectronix.com/resource/forum.png" border="0" title="Visit the forum" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/forum.png'" align="top"></a>
<a href="http://felectronix.com/chat/index.html"><img src="http://felectronix.com/resource/chat.png" title="Enter the chatroom" border="0" align="top" hspace="0" vspace="0" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/chat.png'"></a>
<a href="http://m.felectronix.com/index.html"><img src="http://felectronix.com/resource/mobile.png" border="0" title="Visit the mobile site" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/mobile.png'" align="top"></a>
<a href="http://felectronix.com/more.html"><img src="http://felectronix.com/resource/experience.png" border="0" title="Experience MORE!" onmouseover="this.src='http://felectronix.com/resource/more.png'" onmouseout="this.src='http://felectronix.com/resource/experience.png'" align="top"></a>
<a href="http://felectronix.com/contact.html"><img src="http://felectronix.com/resource/contact.png" border="0" title="Contact the felectronix team" onmouseover="this.src='http://felectronix.com/resource/us.png'" onmouseout="this.src='http://felectronix.com/resource/contact.png'" align="top"></a>
<a href="http://felectronix.com/chat/faq.html"><img src="http://felectronix.com/resource/FAQ.png" title="FAQ - Frequently Asked Questions" border="0" align="top" hspace="0" vspace="0" onmouseover="this.src='http://felectronix.com/resource/visit.png'" onmouseout="this.src='http://felectronix.com/resource/FAQ.png'"></a>
</div>
<div id="foot" style="position: fixed; bottom: 0px; left: 0px; background: grey; width: 100%; height: 30px;">
<img src="http://felectronix.com/resource/row.png" width="100%" height="30px">
</div>
<div id="footapp1" style="position: fixed; bottom: 1px; left: 10px; height: 27px;">
<a href="http://felectronix.com/index.html"><img src="http://felectronix.com/resource/face.png" border="0""></a>
</div>
<div id="Google+1" style="position: fixed; bottom: 1px; left: 92%; height: 27px;">
<g:plusone href="http://felectronix.com">+1</g:plusone>
</div>
<div id="Tweet" style="position: fixed; bottom: 1px; left: 80%; height: 27px;">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://felectronix.com/index.html" data-text="I just visited felectronix.com! They've got a forum, a chat AND a mobile site. Check it out!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<br><br><br><br>
</div>
<span style="color:gold">
<big><big><big><big><br>
<DIV id="content" style="position: center; align: center; top: 90px;">
<div align="center">Wow. That's a bit of a mish-mash. Are you coding this in a text-mode editor or using a WYSIWYG editor?
Your javascript div - why have you created a div for this? Why not just put that script in the head instead?
You're mixing CSS (style="...") with deprecated HTML tags (ALIGN, HSPACE, VSPACE, WIDTH, HEIGHT). I would strongly recommend ditching the deprecated tags - just use CSS. It will cause less confusion and make debugging easier.
In the above case, the ALIGN="left" tag is apparently causing the browser to float the image and consequently lose its height in the text flow. But if you remove that tag you will cause other problems, related to the odd way you're mixing your styling.
Why not strip it all back, start with one of the classic CSS layouts and begin again?
Here are some good examples:
http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html
http://www.beansoftware.com/CSS-Table-Div-Layouts/Three-Columns-Fixed-CSS-Table-Div-Layout.aspx
http://www.sohtanaka.com/web-design/semi-liquid-layouts-tutorial-tips/
http://960.gs/
(Personally I use 960.gs a lot.)Thanks for the tip. I'll have a check and see if it solves my prob. I've never done any other coding than html, and then I've implemented what I've learnt on the web to create what it is now.
It's all been done with notepad and gedit, so purley text coded. I've actually borrowed some books on CSS and JavaScript today, and hopeully, I'll be able to improve my site layout (and codinglayout too ).
Someday I'll go on a course for all this, when there's one availible that's NOT basic word or ppt knowledge. (small town)
THX!
|
