DIV Problems

[Emeryl]

I've been having problems getting my layout to be compatible across browsers.

I finally got it doing what I want in IE7, but when I opened it up in Firefox it had all kinds of crazy scrollbars going on everywhere. If I took out the "WIDTH" attribute the scrollbar changed where it was in IE.
http://www.sakuracities.com/test2/index.html

Basically I just wanted it to turn out like this: http://www.sakuracities.com/yaoigames/kkmnovel1.php
I don't care that the scrollbar is gray in other browsers, just that it's where it's supposed to be and there aren't random horizontal scrollbars and such. It's probably simple stuff for professionals, but I haven't coded anything in a long time and I've never had much experience with DIV layers. I mostly just know them from trial and error.

All the stuff is right here (less than 200KB): http://download.yousendit.com/47731FBB31AE0484
I know I always like to have it open in my browser while I work on it.

If anyone could tell me what's messing it up it'd be greatly appreciated. I've spent all my time translating - I don't think I've even attempted to update the layout for around 2 years. I'm incredibly rusty.

[buddylee17]

In main.css, try using a pixel width of 800px or so instead of 100% for the middle class.

[Emeryl]

It seems to work ok. It stayed in the same spot on IE, but moved away from the picture on Firefox.

Do you think thatwould work fine? My resolution is 2560 x 1600, so I tend to try and make things expand and contract automatically.

[buddylee17]

That is a great resolution for a visitor/user but, terrible for a web designer/developer. Assume the user has the least technology available. Scale the resolution down and retest. I would also recommend keeping in mind that Windows XP is the predominant (largely) operating system on the planet. It ships with IE6 so that's one browser that I would test on. Yes, I think IE7 both looks better and has better security, but it's not my opinion that matters, it's the users'. You can't force a gun down their throat to download a different or updated browser. Google IE6 standalone to find a good, fast downloading, and low processor intensive browser. I think you're going to find that the web has changed a bit since you left it. XHTML is slowly replacing HTML, but it's not gonna be that big of a step for you. We don't use capital letters or the font tag anymore. Other than that, not much has changed. You'll find that IE is not the most standards compliant browser, but you'll learn workarounds. You'll also learn that Firefox is almost always right, even though most of the noobs claim that their site works in IE but not Firefox (mainly because their code is deprecated or incorrect and IE has fixed it for them). The main thing to remember is don't give up. In a couple of hours you'll have your page looking great in every browser, and you'll be glad you took the minute to get things right.
Above all, welcome back.

[OpalSos]

hehehehe.. what you have said is right but mine is another way around. My site is best viewed using FireFox than the clumsy I.E

Anyhow I dont care much about I.E and I dont expect people visiting my site to dowload FF either.

[Emeryl]

I think I got it pretty much working. It's not perfect but it could be worse. I took out the WIDTH entirely, adjusted the padding a bit, and fooled around with some other things.

[MidiMagic]

Realize that if you put size styles (width, height) and border styles (margin, border, padding) in the same tag or style, it will always mess up on either IE or FF. They display these styles in the opposite nesting order (FF follows the W3C standard).

The trick is to nest two tags, one with size styles, and the other with surround styles. Then YOU get to select the nesting order, and the page works on all browsers.