HTML/Website Help

nitneylion452 · #1 12-04-2010, 18:36

Quote:

Originally Posted by synth3tk

If you really want to get advanced, you could do this with PHP (assuming you're using PHP instead of straight HTML).

Create a file named "header.php", then use a php include to pull that "header.php" in every page (you've got to put the code on each page).

The benefit is obvious: make changes to header.php, and it changes on every page that calls it, across the site. Another benefit is that you won't run into pesky frame issues.

But I don't know what you're using to edit/publish this site, so the above may not work for you.

I'm using webs.com to host and edit the site. The only files they allow when creating a page are .htm and .html files.

nitneylion452 · #2 27-04-2010, 17:51

I'm back with a new problem and figured that it would be best to just continue this thread, rather than start a new one.

I made the website and have the basic layout set up as far as a header, body, and footer. The website looks exactly how I want it to look in Mozilla Firefox, but in Internet Explorer 6,7, and 8, it looks terrible. If you use IE, take a look at what I mean http://www.team3167.webs.com If you could, can anyone look at the HTML and give a possible explanation as to why it appear as it does? (For people using browsers other than IE or Mozilla Firefox, it would be greatly appreciated if you could tell me what the website appears like by possibly including a picture.)

Thank you in advance for your help!

1986titans · #3 27-04-2010, 18:50

It looks like that in Firefox too, at least on Ubuntu.

This seems to be the culprit:

Code:

<img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" height="90%" width="90%" align="center">

That would mean that it's taking up 90% of the page vertically and horizontally. Use pixel values ("100px" etc.) instead as it wouldn't change with window size/screen resolution.

gloomy_lion · #4 27-04-2010, 21:15

I recommend getting your HTML valid before going on. Firefox can be pretty forgiving when it comes to misplacing tags and not closing elements, but IE requires you to be really careful with your coding.

http://validator.w3.org/

Personally, I think the problem is being caused by the following code:

Code:

</head>
<div id="container">
<a href="http://www.usfirst.org" target="_blank"> <img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" border="0" width="10%" height="10%"></a>
<a href="http://www.comcast.com" target="_blank"> <img src="http://gothampr.files.wordpress.com/2009/12/comcast_logo.jpg" border="0" width="15%" height="10%" align="right" image-align="top"></a>
<a href="http://www.etcusa.com" target="_blank" > <img src="http://etcusa.com/img/logo.gif" border="0" width="20%" height="10%" align="right"></a>
<style type="text/css">
<!--

#navbar ul {
    margin: 0;
    padding: 5px;
    list-style-type: none;
    text-align: center;
    background-color: #000;
    }

#navbar ul li {  
    display: inline;
    }

#navbar ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #000;
    }

#navbar ul li a:hover {
    color: #000;
    background-color: #fff;
    }

-->
</style>
</head>
<div id="body">
<body>

You enclose your links and your styles between two </head> tags. Get rid of the first </head> tag, and hopefully you'll be on the right track. You also include a <div> element outside of the <body> tags, which is probably also why IE is giving you grief. Just be careful to keep your code valid and your troubles with cross-browser compatibility should be somewhat lessened

.

Dan Zollman · #5 28-04-2010, 00:46

I'd start by proofreading the HTML. The head and body elements are a little scrambled up, and there are two opening body tags. Put the style and link tags into the head section.

Also check the rest of the structure--make sure tags are nested properly, the document is organized into a tree, etc.

No problems with the CSS jump out at me, but it'll be hard to tell until the HTML is fixed and reorganized.

nitneylion452 · #6 30-04-2010, 20:21

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<title>Team 3167-Home</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
<!--

#navbar ul {
    margin: 0;
    padding: 5px;
    list-style-type: none;
    text-align: center;
    background-color: #000;
    }

#navbar ul li {  
    display: inline;
    }

#navbar ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #000;
    }

#navbar ul li a:hover {
    color: #000;
    background-color: #fff;
    }

-->
</style>
<link href="http://images.freewebs.com/Styles/blog.css" type="text/css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://blogs.members.webs.com/Members/Blogs/viewBlogRSS.jsp?userid=56345546">
<style type="text/css">
 p.c5 {background-color:black;color:white}
 div.c4 {text-align:right}
 img.c3 {border: 0px;}
 p.c2 {color:black}
 p.c1 {color: black}
</style>
</head>
<body>
<div id="container"><a href="http://www.usfirst.org" target="_blank"><img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" border="0" width="10%" height="10%"></a> <a href="http://www.comcast.com" target="_blank"><img src="http://gothampr.files.wordpress.com/2009/12/comcast_logo.jpg" border="0" width="15%" height="10%" align="right"></a> <a href="http://www.etcusa.com" target="_blank"><img src="http://etcusa.com/img/logo.gif" border="0" width="20%" height="10%" align="right"></a>
<div id="body">
<div id="navbar">
<ul>
<li><a href="http://www.team3167.webs.com/index.htm">Home</a></li>
<li><a href="http://www.team3167.webs.com/About_3167.htm">About 3167</a></li>
<li><a href="http://www.team3167.webs.com/About_FIRST.htm">About FIRST</a></li>
<li><a href="http://www.team3167.webs.com/Photos.htm">Photos</a></li>
<li><a href="http://www.team3167.webs.com/Videos.htm">Videos</a></li>
<li><a href="http://www.team3167.webs.com/Contact.htm">Contact Us</a></li>
</ul>
</div>
<p class="c1"><big><strong>Welcome to the Official <abbr title="FIRST Robotics Competition">FRC</abbr> Team 3167 Website!</strong></big></p>
<p class="c2">This site is under construction, and will be here for you to enjoy soon.<br>
In the meantime, <a href="http://www.fatherjudgerobotics.webs.com">take a look at our temporary site</a>.</p>
<img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" height="90%" width="90%" align="center"> <!---  Start Freewebs Blog Code =-->
 <!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js">
</script><script src="http://images.freewebs.com/JS/blog.js" type="text/javascript">
</script> <script type="text/javascript">
startBlog(56345546);
</script><script type="text/javascript">
initBlog();
</script>
<div class="c4"><a title="View RSS feed" href="http://blogs.members.webs.com/Members/Blogs/viewBlogRSS.jsp?userid=56345546"><img class="c3" alt="View RSS feed" src="http://images.freewebs.com/Images/rss.gif"></a></div>
<!--- End Freewebs Blog Code --->
<br>
<br>
<div id="footer"><!-- Footer -->
<p id="footer" class="c5">Copyright ©2010 Father Judge High School 3301 Solley Avenue Philadelphia, PA 19136<br>
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_roundred.js" type="text/javascript">
</script></p>
</div>
</div>
</div>
<!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js">
</script><script type="text/javascript">
if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}
</script>
</body>
</html>

I put the html through a service called HTML Tidy, and that's what it gave me. I put it through a validator and it won't validate because something in one of the lined is no utf-8. Is there anything that looks wrong with the HTML? It's the same as it was before, but reorganized by that program.

synth3tk · #7 30-04-2010, 22:00

According to the W3C validator, you've got 7 errors and 1 warning. The warning (which is the UTF-8 bit) is ok to ignore for now, but you should focus on the errors.

I hope you used this to validate: http://validator.w3.org/

nitneylion452 · #8 02-05-2010, 12:46

The w3 validator validated the HTML, but the page still looks awful in IE. Is there anything else I can do?

Edit
It validates only when I directly put the code into the validator, but if I type "http://www.team3167.webs.com/index.htm" into the "validate by URL tab" I get a fatal error about line 80 containing something that is not utf-8.

MagiChau · #9 02-05-2010, 13:25

I don't know much about coding but I think you should close the <head>? I only saw a starting tag but not an ending one.

nitneylion452 · #10 02-05-2010, 15:59

There's a </head> I just checked.

Dan Zollman · #11 02-05-2010, 17:46

It's the copyright symbol near the bottom. Try using the entity "©" instead of the symbol.

(If you have a text editor that shows line numbers (I use Notepad++), that sometimes helps interpret the validator feedback. For this page, the validator said the bad character was on line 80, but I think that was a couple lines off.)

Edit: Also, I think the IE problems are related to the use of positioning in the stylesheet. One way to debug this is to go back to a blank stylesheet (both mystyle.css and the CSS in the head section) and add items back to the stylesheet one at a time, in order to see the individual effects of each change.

nitneylion452 · #12 03-05-2010, 19:53

The strange thing is that when the images are not aligned right, they stay above the nav bar, once align right is put in, it throw the images to the middle of the bar.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Website Help	Elvenage	Website Design/Showcase	0	06-02-2009 16:45
HTML Help Thread	Compnerd	Website Design/Showcase	1	13-02-2007 18:33
Website Help	Dan50	IT / Communications	3	25-01-2006 07:00
Help with HTML	LBK Rules	CD Forum Support	3	03-02-2003 12:38