New Website (FireFox bug)

Cyclone · Post by **Cyclone** » Tue May 30, 2006 12:51 am

Today I designed this website. It works fine in IE but theres a glitch with the menues in FireFox. I have no idea what's causing the problem.

http://3dartisan.net/chris

obviously it's not done so please ignore the table with the huge photot in it.

Xamindar · Post by **Xamindar** » Tue May 30, 2006 1:20 am

As long as you follow web standards your site will work in firefox. IE has a habbit of not following standards. The menus seem to be working for me, just that the Links menu is under the Main menu and that messes things up a little.

Cyclone · Post by **Cyclone** » Tue May 30, 2006 9:23 am

Yea, the links menu is supposed to be on the same line with the other menus. Everything is supposed to be whithin that double border. It all works fine in IE but glitches up in FireFox.

Anyone find anything wrong with the code?

BUBBALOU · Post by **BUBBALOU** » Tue May 30, 2006 9:28 am

I have both IE and FF, the page is just big blank screen with a title, no menus of any sort in either browser

um

 
<center><a href=\"Main.html\"><img src=\"Images/Logo.gif\" border = off></a></center>

Cyclone · Post by **Cyclone** » Tue May 30, 2006 10:35 am

you have to click the name to enter to the next page. sorry

Xamindar · Post by **Xamindar** » Tue May 30, 2006 2:21 pm

Looks like you fixed it. Good job

Mobius · Post by **Mobius** » Tue May 30, 2006 7:35 pm

Works for me with FF 1.5.03

BUT - that hideous iFrame has GOT TO GO MAN!! And I mean that most sincerely.

Lorem Ipsum dude!

Sirius · Post by **Sirius** » Tue May 30, 2006 10:27 pm

Agreed - but, as was said, it's not done, so...

One thing I spotted in the CSS code at the top - there's some \"BACKGOUND\" thing there. This obviously isn't going to work (that's if you wanted it anyway considering I think it was an image there!).

DCrazy · Post by **DCrazy** » Tue May 30, 2006 11:33 pm

The XHTML Validator found a ton of problems with your code.

In XHTML, all elements are lowercase. There is no <A> tag, there is no tag. There are, however, <a> and .

It seems you're trying to use litUp1 (a CSS class) as an attribute. You want to do instead of just .

IFRAMEs don't exist outside of the IE world, which probably partially explains why FF is freaking out with yours.

Cyclone · Post by **Cyclone** » Wed May 31, 2006 9:51 am

Thanks.

What is wrong with using iframes? I tried using normal columns but the menus wouldn't go overtop of the bottom frame. I wanted the menu to be separate so I don't need the code in each and every page and have the page reload with every click.

I fixed the FireFox bug. If I fix the dimentions of the borders on one computer. Everything is aligned properly on that computer... but then I try it on a different computer and the layout changes. It's so weird.

Anyone willing to fix the code for me? I like the design and stuff just want to fix the problems.

Help much appreciated. Thanks.

fliptw · Post by **fliptw** » Wed May 31, 2006 10:51 am

you don't need iframe: the same can be achieved using the overflow css attribute on, say, a div tag.

thats how the silly quoting thing is done on this board.

all of the tags that have been deprciated in HTML4 are ones that css can also do(ie all the visual formating elements)

You also might want to review the CSS box model, as it is quite counter-inuitive, and probably the source of your issues with the menu.

Cyclone · Post by **Cyclone** » Wed May 31, 2006 12:30 pm

http://3dartisan.net/chris/

I think I fixed it but I couldn't try it on another computer.

body {
font-family: arial, helvetica, serif;
FONT-SIZE: 100%;
background: white;
BACKGOUND: url(Images/MenuBG.gif);
padding: 2em;
margin: 0;
}

I changed the FONT-SIZE from 80% to 100%. I think maybe font sizes are different on more then one computer???

Is there a way to lock the font size so you can't change it in IE? cuzz when I change the font size in IE it messes up the page.

hmm about the overflow css thing. I will have to see if I can find a tutorial on it. I'm a newb when it comes to coding.

DCrazy · Post by **DCrazy** » Wed May 31, 2006 1:17 pm

Quick, before Mobius gets you for that one...

The reason CSS offers different font size methods (em, %, px, pt, etc.) is because most of them can be dynamically resized. The right thing to do would be to design your code so that it renders properly regardless of font size.

The practical thing to do might be to do that, or use \"pt\" or \"px\" as the specifier for font-size (e.g. font-size: 8pt). The browser cannot resize fonts that are specified to be a certain height in points or pixels.

It is perfectly possible to design a layout that works well when resized but is beautiful. But if that would take a substantial re-engineering of your code, then it might make more sense just to go with point or even pixel sizes.

fliptw · Post by **fliptw** » Wed May 31, 2006 1:24 pm

Code: Select all

div { overflow : scroll}

when using percentage, it techincally uses the parent containers font-size settings to scale it. if that isn't explicitly specified, then the browser will fall back on its font size settings.

You can specify a font size be so much bigger or smaller than the parent by adding a minus or a plus in front of the value.

eg:

Code: Select all

p { font-size: -3pt}

Cyclone · Post by **Cyclone** » Wed May 31, 2006 2:56 pm

Thanks! I got the text size to work properly right now.

One thing I notice is that my links don't change colour in FireFox when I have my mouse over them. In IE it works fine. Not a big deal I guess.

This is the code i'm using right now to embedded the other pages within the table.

<IFRAME SRC=\"Pages/Welcome.html\" Width=\"995\" Height=\"590\" FRAMEBORDER=\"0\"></IFRAME>

I can't find any tuts on the overflow command. I have no idea what to even search for. How is it better for compatibility.

Thanks.

DCrazy · Post by **DCrazy** » Fri Jun 02, 2006 12:11 pm

Instead of using an IFRAME, you would use the following:

Code: Select all

<div style=\"overflow: scroll; width: 995px; height: 590px; border: 0px\">
<!-- page content goes here -->
</div>

The downside is that now every one of your pages needs to follow the same \"template\" -- <div> does not behave like <iframe>.

If you knew JavaScript it would be easier to get around this problem (by dynamically changing the content: attribute) but we won't get into that.

Jeff250 · Post by **Jeff250** » Fri Jun 02, 2006 7:12 pm

Or instead of Javascript, you could also handle it server side with server side includes (SSI). Chances are your hosting package allows for these. This way, you still only need to save the menu to one file. But for each of your real pages, you'll need to insert a line of code into your HTML that your server will interpret and include the menu automatically into the code before anyone's browser even gets to see it, so you don't have to worry about whether or not the user's Javascript is existent or borked. That's the advantage. The disadvantage is that the user's browser will still have to redownload the menu code every time he clicks on a page that he hasn't been before. But maintenance-wise, it's just as effective as Javascript and doesn't require the user to have working Javascript.

Cyclone · Post by **Cyclone** » Thu Jun 08, 2006 4:11 pm

Sorry for the late responce....

Thanks for the help and suggestions. I wish I new more about coding pages but I don't know enough to use java script etc. Right now I will just stick with the iframes...