Web Page Troubles... *sigh*

[Clanky]

Ok. I have an assignment for IT, and I have to make a web page for a chosen company. I have attached what I have done so far. We haven't got the content yet, so don't worry that the pages aren't filled with beautiful information 
But.
My problem is, I have done the page the easiest easy I know - trial and error! And, I have to say when you run it in Firefox it looks great!
Trusty old Microsoft Internet Explorer 7 makes it ugly...
I was wondering if there is an easy way to fix the annoying IE7 bug?

We tried a box model before this one, but it was making the page really wide - so you could scroll across to see nothing.

Hmm...

[Shockwave]

I can't see a bug on IE or Firefox...

All that I can see is that the images you have can get moved around when the page is small. This is easy to fix.

As you are using css, look into using width to define the width of your elements, perhaps that will fix it.

For me though I can't see a bug

[Clanky]

Yea I used width in CSS to fix the Restore Down bug...

The bug in IE is the picture positioning... like - the navigation bar doesn't match with the background 'navigation bar'... and the header (logo and name) cross into the navigation bar... (sorry for calling it a bug!)

How can I fix the positioning?

[Clanky]

Hmm. I was also wondering what the little 10x10 pictures which appear for the bookmarked pages, as well as in the address bar are called? My teacher told me, but I forgot 
It was an easy word to remember so I didn't write it down... silly me!

[Shockwave]

favicon.ico

And to fix the positioning I guess that you should look at some style sheet reference I am shit at webpages sorry!

[Paul]

haha, internet is not compatible with microsoft IE, and not hte other way round.

[Clanky]

Ok. I was wondering. How could I make this bit of code work to make a Contact Us form?

Code: [Select]

<div id="content">
<script language="JavaScript" type="text/javascript">
function validate(){
if ( ( document.emailForm.text.value == "" ) || ( document.emailForm.email.value.search("@") == -1 ) || ( document.emailForm.email.value.search("[.*]" ) == -1 ) ) {
alert( "Please make sure the form is complete and valid." );
} else {
document.emailForm.action = "http://www.IDONTKNOWWHATTOPUTHERE!.confused"
document.emailForm.submit();
}
}
</script>

<div id="contact_form">
<form action="http://www.IDONTKNOWWHATTOPUTHEREEITHER!!!.evenmoreconfused" method="post" name="emailForm" target="_top" id="emailForm">
<div class="contact_email">
<p>Enter Your Name:</p>
<input name="name" size="30" class="inputbox" value="" type="text"></input>
<div id="contact_height">
<p>Email Address:</p>
<input name="email" size="30" class="inputbox" value="" type="text"></input>
<p>Message Subject:</p>
<input name="subject" size="30" class="inputbox" value="" type="text"></input>
<p>Enter Your Message:</p>
<textarea cols="50" rows="10" name="text" class="inputbox"></textarea>
<p><input name="email_copy" value="1" type="checkbox"></input>
Email a copy of this message to your own address</p>
<input name="send" value="Send" class="button" onclick="validate()" type="button"></input>
</div>
</div>

<input name="option" value="com_contact" type="hidden"></input>
<input name="con_id" value="1" type="hidden"></input>
<input name="sitename" value="Litchfield Springs Natural Spring Water" type="hidden"></input>
<input name="op" value="sendmail" type="hidden"></input>
</form>
</div>
</div>


[p01]

Just looking at acceability.html.

Regarding purely technical mistakes:

• <meta http-equiv="Content-Style-Type" content="text/css" /> is useless since you set the content type of the stylesheet in <link rel="stylesheet" type="text/css" href="../styles/style.css" />
• Two elements use the ID header. IDs are UNIQUE. Should you use an ID more than once, black holes might appear and suck in the entire planet.
• In XHTML 1.0 Strict, A tags have neither target nor alt attributes.

Now about more subtle mistakes:

• The <p id="utilities">...</p> should/could be a UL
• The separators in that list of links should be done in CSS, not in the markup
• On your links, the title attributes bring no added value to the text content. Therefore they should be removed
• The <div id="navigation_container"> seem unnecessary too. The <ul class="navigation"> can be style appropriately without a container. Speaking of the navigation, since you only have ONE main navigation, it should use an ID instead of a class.
• Likewise the <div id="lftcolumn"> seems redudant.
• B tags have a specific meaning, should you really use them to achieve the specific styling of the navigation links, you should rather use a SPAN which is a generic container. Or you could get rid of them and use BORDER ( and OUTLINE ) to achieve the exact same styling, or at worst fix the width of the links.
• The :hover effect in the navigation could/should use a CSS sprites, not a swap (background) image.
• It is common practice to use a unique H1 for the page/article title then use H2 and so on, therefore you might spare the class on your first H1 and use less important headings in the rest of the page.
• The topics of the items in the list of actions should use a H2/H3
• width: 1000px; is not the most brilliant idea on a page about accessibility.
• Ditto for setting font sizes and sizes in general in px instead of a relative unit like em
• Use CSS shorthand properties to set several properties in one go, e.g:    line-height: 35px; font-size: 12px; font-family: arial, verdana, sans-serif; font-weight: bold; -> font:bold 12px/35px arial, verdana, sans-serif;
  

Removing the extra id="header" beautifies the page a bit in IE6.


Hope that helps,

[Clanky]

Thanks! I'll see what I can do

[Shockwave]

That's worth some good karma p01.