Problems with FF and Safari compitablity

[jimdeluxe]

Hey! =)

Im new here and also new to web design. I made my first page ever a few weeks ago in Dreamweaver 8 using HTML and CSS and without knowing any better I only tried it during development in IE7. About the time it was finished and uploaded I realized that it didnt work as expected in either FF och Safari. FireFox seems to create margins around some of the divs on certain pages, and Safari just shows a black page :S

Since I am a severe noob in this area my efforts of fixing this have been without result. If anyone of you have the time and energy help me or just guide me to a place where I can get help I would greatly appreciate it!

My page is at www.johnscott.se

Thank you in advance!

Sincerely
John Hellman

Edit: Oh perhaps you need to access the css-file? It is located at www.johnscott.se/css.css , I hope you can access it like that =)

[notagz1]

It works fine in FF fore me.

Try seting margins to 0 not 0px.

or
*{margin: 0;
}


or try html, body{ margin: o;
}

Or you could just set up a new css for only FF.


set up a wrap tag
#wrap{
width: 850px;
}


<notagz1>

[BGarner]

I would say don't put all your text in an image. It's terrible for SEO. Not to mention accessibility. Firefox seems to display well. If you're having trouble with margins try...

Code: Select all

* {
margin: 0;
padding: 0;
}

Hope this helps, I don't have Safari so I can't help you much there.

[jimdeluxe]

Thank you for your replies!

I tried the different mentioned versions of border and margin set to 0, but no to success. I still get two black horisontal lines on the "News" and "Portfolio" pages, do you not get these? What can cause this? And why only in FF?

I am aware of the problems with text placed in images (trust me updating my news is a pain). But since I am using a home-made font I thought it was the easiest way to make the page viewable without forcing viewers to download and install the font. Better ideas are very welcome!

Edit: Notagz1 what do you mean with wrap? Where would I use that code?

[Lchad]

The way you have designed the site is less than conventional.

Do you have any css for the #menu?
I don't see one. My guess would be that there is extra space being added in the menu or just below it.

Firefox renders css/html for accurately than IE. Design your site for Firefox first and then make adjustments for IE. That will cause you less frustration in the future.

[MikeHopley]

You do realize that your site has no real text, don't you? You're using images for the content instead of text.

Bad idea.

[jimdeluxe]

Thank you Lchad for your eagle eye =)
Of course the reason this was happening was that I completley forgot to add the menu, top and bottom to my CSS, noob mistake

I am aware of the inconvienience with imagebased text and this was a choice I made fully aware of the problems it will cause. As I mentioned in my previous post this was the only way I could come up with to use such a customized font without forcing people to download and install it first. Better to have the inconvience on me then on my viewers =)

It works now, however there's still some difference in how FF and IE7 handles the CSS, is there any easy way to make a page determine if the viewer is using FF or IE7 and choose between different CSS-files?

[MikeHopley]

Originally Posted by jimdeluxe

I am aware of the inconvienience with imagebased text and this was a choice I made fully aware of the problems it will cause. As I mentioned in my previous post this was the only way I could come up with to use such a customized font without forcing people to download and install it first. Better to have the inconvience on me then on my viewers =)

I'm not thinking of the problems it will cause you, I'm thinking of the problems it will cause your "viewers" and search engines.

I very much doubt you are "fully aware" of these problems.

[karinne]

Members are here to help. Don't insult them!

From http://www.quirksmode.org/css/quirksmode.html

on img display

Standard: An image has display: inline by default. Therefore it has a slight space below it, because the image is placed on the baseline of the text. Below the baseline there should be some more space for the descender characters like g, j or q.
In quirks mode img has a default display: block, while in really strict mode it has a default display: inline. The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.

So ... just add

Code: Select all

#top img {
   display: block;
}

and it should be fine.

[jimdeluxe]

Gah Im confusing myself, please delete this post, or just ignore it! =)

[jimdeluxe]

Thank you karinne, and everyone else!
I will try that.

My apologizes for the unnecessary comments, and to mikehoply.

[jimdeluxe]

Originally Posted by karinne

So ... just add

Code: Select all

#top img {
   display: block;
}

and it should be fine.

This helps removing the top line (between the #top and #menu divs), but when I put it on #menu too it flips out probably because of the many images in the #menu div.

E.g.

Code: Select all

#top img {
  display: block;
{
 
#menu img {
  display: block;
{

Any ideas?

Edit: Ohh and btw thank you very much! =)

[karinne]

just add a class to that one image that's causing the problem.