Help needed: Menus in IE and Firefox [Archive]

hmtpn

11-21-2007, 04:48 PM

Hello,
i have a problem about a menu (tab menu) that i need some help about. Here is the URL to my site: www.mutfaktalezzet.com
i took the menus from another free-script-sites (dynamicdrive.com if i am not mistaken). They work ok in IE browsers, but there is a problem when i try to open the site in Firefox. Am i doing something wrong, or is it like that i cannot use the same codes for IE and for other browsers?
P.S. This is my first site so any kind of advice (even the smallest ones) are greatly appreciated.
P.S.2: i hope my English is understandable :)
Thanks in advance

Centauri

11-21-2007, 05:19 PM

You have many errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mutfaktalezzet.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) that need to be fixed - a lot of then are due to missing quotes around things. IE is ignoring a lot of the errors, while FF isn't quite so forgiving and is not loading the external style sheets.

WebJoel

11-21-2007, 07:33 PM

...<table border=0 width=100% cellpadding=0 cellcpacing=0>
<tr>
<td class="hucre1" valign=top style="padding: 10px">
<span class="ys">Lütfen Öneri ve Görüşleriniz için üye olunuz!</span><p>
<FORM NAME="MyForm" ACTION="../cgi-bin/mycgi.pl">

<span class="yy">Adınız Soyadınız:</span> <input name="realname"><P>
<span class="yy">e-mail Adresiniz:</span> <input name="email"><BR><BR>
            
            
               
<input type=reset value="Gönder" margin:80px 200px onClick="return confirm('Üyelik Sistemimiz Geliştirilmektedir.(0322) 232 89 21 numarali telefonu kullanarak bize ulaşabilirsiniz.')">
</form> The correct spelling is "cellspacing", not "cellcpacing".
And the second BOLD needs to be style="margin:80px 200px".
and a few other things that need fixing. These two are rather important. :)

<style type="text/css">

A:link {
Text-Decoration: none
}
A:active {
Text-Decoration: none
}
A:visited {
Text-Decoration: none
}
A:hover {
Text-Decoration: none
}

body {
background-color:#bfdfff;
}

</style> And for looks/correct functioning of these, the correct order is lvha (link-visited-hover-active). Here it doesn't matter, as the values are all the same. Therefore, moot. But it could be also written as:

a:link, a:visited, a:hover, a:active {text-decoration: none}

Suggestion: -try to get into the habit of writing your HTML code all in lowercase. No capitalization starts a tag or element, etc. Caps are okay 'inside' of an element name (like id="thisBoxHere").
Using lowercase is easier, and prevents possible validation problems with some !doctypes that require all lowercase be used.

hmtpn

11-22-2007, 07:34 AM

thanx for both replies that helped a lot to reduce the number of errors, i made some corrections about the capital letters and punctuation, and there are less errors now. And for my menus to be seen in FF, should i get rid of external style sheets, i mean should i always use the CSS in the index page?
And also i came across another problem after making some changes in my page. The upper-left corner cell's height grow bigger - weirdly - and unwantely. i dont know why it happened, because i didnt change anything concerning the height of the cells etc. And actually in my CSS i didn't specify any height for this cell, but i just defined the width. Why am i seeing this much blank before and after the submit button? if these are not too personal questions, i'd like to hear your guys' opinions. Thanks in advance again,
Hamit

WebJoel

11-22-2007, 08:00 AM

There is a "<p><p>" element in here that doesn't really need to be there. This is not a 'paragraph', it's a "<form>" with a submit button and as such, it doesn't really require being containerized by this "p" element. Any paddings or margins of both, are added together, creating this height.

See screenshot image: the "<p></p>" is the red border... that is where you're height is coming from. :)

Centauri

11-22-2007, 08:18 AM

What was this written with? - the W3C validator says it is encoded as utf-16le ???? As the meta tag specifies UTF-8 encoding, you should probably check that your editor is actually saving both the html and css files as UTF-8

It is only something small affecting the loading and application of stylesheets in FireFox - instigating css edit in the Webdeveloper Toolbar is enough to apply the css styles - and the page encoding could be it.

You also have a "Content" with a capital letter in one meta tag that should be changed to lower case as well.

hmtpn

11-23-2007, 03:52 AM

What was this written with? - the W3C validator says it is encoded as utf-16le ???? As the meta tag specifies UTF-8 encoding, you should probably check that your editor is actually saving both the html and css files as UTF-8

It is only something small affecting the loading and application of stylesheets in FireFox - instigating css edit in the Webdeveloper Toolbar is enough to apply the css styles - and the page encoding could be it.

You also have a "Content" with a capital letter in one meta tag that should be changed to lower case as well.

Buddy, i am sorry but i didnt understand it completely. Since this is not my native language, if you can be more simple with your words, i will be so glad. i wrote that document in notepad and i saved it as Unicode. (since i used some Turkish characters in it, while trying to save it the first time it warned me like "The file contains characters in unicode format which will be lost if you save this file as an ANSI encoded text file. To keep the Unicode information............." so i saved it in Unicode format. And about being ableto have it FF, what should i do? (again in simple words please) thanks for your patience :)

hmtpn

11-23-2007, 04:25 AM

There is a "<p><p>" element in here that doesn't really need to be there. This is not a 'paragraph', it's a "<form>" with a submit button and as such, it doesn't really require being containerized by this "p" element. Any paddings or margins of both, are added together, creating this height.

See screenshot image: the "<p></p>" is the red border... that is where you're height is coming from. :)

And WebJoel,
i got rid of those <p> tags, but it is still the same height :( (I did not upload the new page, without those <p> tags in the net yet) Can it be something else?

Centauri

11-23-2007, 05:08 AM

Resave the files from Notepad, but select UTF-8 option for encoding when you do.

WebJoel

11-23-2007, 02:47 PM

And WebJoel,
i got rid of those <p> tags, but it is still the same height :( (I did not upload the new page, without those <p> tags in the net yet) Can it be something else?
<form name="MyForm" action="../cgi-bin/mycgi.pl">
<span class="yy">Adınız Soyadınız:</span> <input name="realname" /><p>
<span class="yy">e-mail Adresiniz:</span> <input name="email" /><br /><br />
            
            
               
<input type="reset" value="Gönder" onclick="return confirm('Üyelik Sistemimiz Geliştirilmektedir.(0322) 232 89 21 numarali telefonu kullanarak bize ulaşabilirsiniz.')" style="margin:80px;" />
</p>
</form> No, you didn't. :o This is the "<p></p>" that is causing the height problem.
Also, -there is a better way to 'space' elements without using so many non-breaking spaces. A 'non-breaking space' is the same thing as:
ThisSentenceHasNoWhitespaceInIt,Therefore,ItWillNot"break"WhenItReachesTtheEdgeOfTheContainer...

If you need to 'center' the button, using margins. ("margin:0 auto;" usually works best).

I'd just go ahead and fix this for you but the unicode problem prevents me from seeing the results in my HTML-editor. :o
You have not uploaded the new file yet? I am using the URL at the top of this thread: -it may not be accurate to what you have now.
Re-post your code please.