Major layout issue

I am still practicing on layouts and I am just testing new ones and my layouts are starting to differ from one another. I made a much more complicated layout and I can't seam to get it to work on Mozilla and IE.

http://koinonia-imboden.com/newlayout.htm

If you take a look at it on Mozilla the top image is too high...but It's pefect for IE. Can anyone help. I believe I made it too complicated and I didn't slice the images correctly on my psd.

Please validate your HTML first.

You mean validate it, then show you...or tell you what's wrong with the validation?

Validate it! You have 13 errors in there and some of them are pretty major.

It might fix your problem, it might not but at least we will know that we are working with a validated document.

The process of fixing a website bug:

1. Validate HTML. Brain not required. Often solves problem.
2. Validate CSS. Brain not required. Often solves problem.
3. Switch on brain.
4. Do the hard stuff.

What's with all the insults??? It's now valid......

http://koinonia-imboden.com/newlayout.htm

Hes not insulting u webkid, MikeHopley likes to stress the importance of having valid html before fixing bugs, and he's right ;-)

Sorry, I didn't intend that as an insult.

Rather, I was stressing that validation is easy. It doesn't require much thinking; you just do it.

Solving bugs, however, is hard.

To fix, sort of, your problem, add a margin-top: 7px; to either #masthead or #nav but then you get some white-space at the top.

Apology accepted. I just get so frustrated with this stuff sometimes that I lose focus and don't realize the minor errors I make. Therefore, I forget that my Xhtml needs to be validated. Thans again for your help.

Your bug may be the result of different default margins/padding between browsers.

Except where you want margins and padding, be sure to set the margin and padding of all your layout elements to 0.

Apology accepted. I get so frustrated with this stuff sometimes that I forget I may have errors and need to validate

I know I have tried that, but the white space came up, I was hoping you could tell me that I was wrong in doing that, but I guess it's more complicated.

Stripey backgrounds are always a b*tch to play around with

Instead of having that big blocky image for the header, have you tried instead of just having the words in one image as a transparent PNG?

And the menu, I would just use a transparent PNG as well for the rounded buttons.

I have never used transparent png's before...I would love to learn about that. I mean I have seen transparent images, but I didn't know they were called transparent png's. How would I go about doing that?

Have you got Photoshop of Fireworks?

__________________
Marc
Staff Manager - Webforumz.com

Want to be a moderator? PM me.

Yes. I do.....it's on another computer, but I do.

if you try adding margin-top:21px; in your body and margin-top:-6px; in your #nav that should sort it out in ff. Not sure on the effect in ie though.

Are there such things as negative pixels? For example:

Code: Select all

margin-top: -6px;

That seamed to work for it....could that just be something on my computer...or is that something that actually exists and works?

Yes, negative margins exist. They're actually quite useful!

Read more

Cheers

I love negative margins .

__________________
Jack Franklin - Webforumz Moderator
(x)HTML | CSS | PHP | MySQL | JQuery (Javascript)
Contact: My Blog | Twitter | Delicious
Want Lessons? PM me.
If you think I've helped, please press the 'Thanks' Button.