I have been slaving away for months with trial and error of the creation of a new website layout. I FINALLY put something together that I think will make things a lot easier to navigate and better to look at (not that the last layout was bad, it was just getting old and I know some of you have a hard time seeing it due to size and colors).

So now I'm in the final stages of layout creation and I need help from all of you!!

Please note not everything is perfect yet and I will be making some changes here and there; my biggest problem is this:

The position of the banner, the main text area, and the links line up perfect on my firefox browser, but I noticed they're completely off on IE.

If you read this, can you please take a look at my test page and tell me if the layout is lining up properly on your browser or not?

http://www.mana-sama.net/newlayout.html

Also, whether it lines up correctly for you or not, could you please state the browser you are using to view it in? Thanks!

<33 i love it its awesome! i have IE and it looks normal to me so i dont think you have to worry about that XD

I'm on Firefox 2.0.0.20 and it lines up perfectly. I really like the new layout because it's simple and looks professional. Go Sarah!

Works on me XD

I use IE 7.

And ... it's not perfect. Close, but... :P

Look here.

Use the W3C validator to see what's wrong with the code. If you get an all clear from there, it *should* look the same in all browsers. Not that it probably will, but it should.
Know a few professors that could rant on and on about browsers and making proper websites. :D

Anyhoo, apart from that, the general layout's nice. :) ^^

OMG that look so great.
i can't wait until it is up and running!

Thanks guys, I'm really happy you like it and its working for most of you!! :D

Xit> THANK YOU SO MUCH!! That is EXACTLY the problem I got with my IE browser and I didn't know what to do about it. I'll go check out that link right now! :D

hmm, I cleaned up the errors through the validation website and I'm still getting the same problem in Internet Explorer.
I might try to play with the positioning of the page a little and see if that help. If any of you notice the page IS off on your browser as of right now, it could possibly mean that I'm trying to see what I can do with the layout, so don't panic. XDD I'm going to try to get it fixed ASAP.

i use IE and Firefox, everything seems to work well but... i don't know how to explain it, maybe it's just that's not lined up, i see frames in the background in both IE and Firefox, but other than that it's really nice.

What kind of frames? The ones that are supposed to be there or something else that has to do with coding? I'm having a major problem right now because some how my layout got messed up with that fix up I did and I've been trying to figure out how to get things lined back up to how they originally were, or somewhere near. x_x

Backups. Always have backups. :P

Apart from that I found what was wrong.
In "div.c1" in the style sheet, you should write "position: absolute;" not "position: aboslute;". Correcting that little spelling error fixed the horizontal alignment problem.

Sat down and messed with it myself, just because I was bored. :P
And now I remember why I hate making websites. Bloody browsers cannot agree on how tags should be interpreted. <_<

Lookie here for code and screenshots.

I use IE on my laptop and it doesn't line up quite right. The introductory text and the text navigation links run out of the borders on the right side and the buttons on the right have a space between them and the main box. Hope that made sense. If not, I could send you a screenshot. Looks like it will be cool when you work out the bugs!

I just checked again and I have the same problem now on Firefox 2.0.0.20.

Le Ciel and Ludivine > I know that because I was messing with the positioning for hours last night and after a while got tired and quit. I haven't had time to mess with it at all today and I might not do it until tomorrow sometime.

xit> Thanks for all the tips and help! Its looking better on the code you fixed up!! But unfortunately now its even more off than it ever was on my firefox but looks better than it ever did on IE! XDDD
hmm, well on the front page I'm going to have an Enter sign like I always do, so do you think it would be a good idea to have two different links in text -- One for IE users and one for users with browsers compatible to my original code?? I think I actually did save my original code, so it shouldn't be too hard to restore.(^^)

I know what the problem is with FF.
Look at this (totally valid btw!) code from the stylesheet:

div.c1 {position: absolute; left:270px; top:-50px; z-index:-1;}

FF apparently doesn't understand -50 as a value, or at least just ignores it, meaning it won't center the background image as it's being done in IE.
There's is probably a solution to it, I just don't have any bright ideas at the moment. Might look into it tonight. :)

Instead of having two seperat buttons for different browsers, you could check what browser people are using when they click on the enter button , and depending on browser direct to different pages.
It's possible, but cannot remember the code for it. <_<

Got it to look the same in FF and IE! :D
Link to testpage.
Except the scrollbar that is...

Look here for screenshots and code.

wow, looks great!! Thank you so much!!
Yeah, I'm not too sure what to do about that scrollbar on FF. I've NEVER had luck on any website with a scrollbar that is supposed to look blend in with a page in Firefox so I think this just might be as good as we can get it. Thank you so much and I'm definitely going to give you credit for all this help on the main page!! :D

Not a problem. ^^

And found out about the scrollbar thing. It's because the code to change the scrollbar isn't a part of the w3c standard, meaning Firefox won't accept it. But IE and other browsers will. So well, too bad. :P

I also use IE 7, but everything looks to the right, not in the center

I just got a look at the new page, and have to say, there is something missing.

Is this all that there will be, or will there be a nice background, similar to the older page?

Reason I ask is for a new person entering on, this page may strike someone as a "kiddie" page. No offense.

The original page looks really "professional".

The navigation looks quite a lot better though, easier on the eyes, even if the dark blue motif is slightly lost.

Personally I liked Mana-esque (a new term), dark blue shades with black background, for me it seemed very "inviting".

But those are just my two cents.

I think it's the exact opposite.
It's because it's so simple it looks professional. :)

I have to agree with xit on that though a simple background could look nice if you reduce the opacity to make it more subtle.

I liked the first one..... *is ashamed*

Interesting, the "less is more" argument. This is sometimes true. I will say it can be easier on the eyes.

However

I am in a very professional career (aviation), and sites related to such either are very very Boring, and "Government-like", or, say for a parts distributor, there is always a back round motif of some kind. Either with the company's logo, or product shots presented in a faded manner, but there is almost always a back round.

Then again, what is the harm with bucking the "professional" image, heck I like the idea, professional is over rated.

Professional websites can be websites with cute design that is professionally made as well as websites with simple/minimalistic design that is also professionally made. Mana-Sama.net is not an official site so i don't think it is important to make it look like a professional one :D . I am interested in web design but i make only myspace skins. But if Mana-sama.net would be my site, i did different layout for it than this one you talk about. I think first of all colouring is not good. It is kinda black/weird blue and white/grey. To be honest, i am tired of blue/black colouring on almost all the sites of Mana/MDM. I also should choose different main banner...

And then there's the whole technical aspect as well.
My old professors in web technology and design would hate both pages. XD
The new one not as much as the old one, but still...

Personally I like the new layout. Sure it could need a background picture. But it shouldn't be as glaring as the old one. Sure it could probably do with some more colours. But it is also a fanpage for Mana. Besides that changing the colours too much might also confuse people.

But when it comes down to it, it's Sarah's webpage and her decision. :)

Personally all I can do is give a hand if she wants it.
I do know something about coding and design. :P