why does mozila not recognise <div>

[otuatail]

http://www.reallifemalawi.com/Project2.php Works in IE8 but not in Firefox 3.6.9.

Would it work in IE7 ????

 

Desmond.

 

[trq]

The problem is what exactly?

[dgoosens]

you've got a typical Windows error in your code:

 

<img src="images\thermometer.jpg" alt="" style="height:390px"> 

 

should be:

 

<img src="images/thermometer.jpg" alt="" style="height:390px"> 

 

 

 

[otuatail]

Ok thanks for that. Sometimes that worked. I have notced even though the default font in the style sheet is

body

{

    font-family:Times New Roman;

    font-size: 14px;

}

 

Firefox is larger.

Is this an error in my code as well?

 

Desmond.

 

 

[dgoosens]

they are the same, although they look the same to me.

but the default line-spacing for IE and FF is not the same....

you might want to set that in your body{} as well

 

about Times New Roman

are you sure you want that font ?

it is recommended to use a Sans Serif font for things one reads on a screen...

Serif fonts are more suited for printed material.

You want to consider Arial or Verdana

 

Also, be careful with your top navigation...

when reducing the window size, the right block (next to Funding) goes to the next line...

[otuatail]

Ok thanks for that I will change the font. Microsoft recomend Calibri is this the better one. It would only work though if the font is on the client system. As for the wrap around top menu can this be prevented from wraping?

 

Desmond.

 

[dgoosens]

Ok thanks for that I will change the font. Microsoft recomend Calibri is this the better one. It would only work though if the font is on the client system. As for the wrap around top menu can this be prevented from wraping?

 

Desmond.

 

I personally don't think M$ is very reliable when talking about the Web... but that's only my personal opinion...

 

About the wrapping...

Sure you can... As your menu has a fixed width, just put a DIV around it with that width and you should be fine... But this is not "the best way"

 

I would personally put the background as one image, put the menu in a <ul><li> list and then work with borders and padding to get the same effect

 

<ul style="background-image:url(); width:xxx">
  <li><a href="" title="">menu element</a></li>
  <li><a href="" title="">menu element</a></li>
  <li><a href="" title="">menu element</a></li>
  <li><a href="" title="">menu element</a></li>
  <li><a href="" title="">menu element</a></li>
   [...]
</ul>

 

the hover effect your implementing can be obtained very easily with some CSS (no need to use JS here)