Resizing problem in IE (& FF)

[Michael7]

Hi everyone,

I thought I had it all fixed, but today I noticed IE mistreating my page that I was setting up to use CSS.

Here's the page:
http://workmenforchrist.org/
The CSS affecting that part, is:

  /*Container for Sidebar and Main Part*/  
.page {  overflow:    auto;  }  
.
.
.
.
 
 
/*Header Positioning*/
.header {
position:    normal;
max-width:    800px;
min-width:    600px;
left:        159px;
text-align:    center;
}
 
/*Header (image and verse)*/
.header h3 {
color:        red;
font-family:    Arial;
}
 
/*The Link to the Bible Study*/
#studylink {
display:     block;
text-align:    center;
font-size:    200%;
}
 
/*Main Body of the page Actually Encloses header and main text*/
.main {
position:    relative;
max-width:    800px;
min-width:    600px;
margin-left:    190px;
}
 
/*Main Text Area*/
.maintext {
position:    normal;
font-size:    150%;        /*Use percent instead of em, due to IE bug*/
}
.maintext h1, .maintext h2, .maintext h3, .maintext h4, .maintext h5, .maintext h6 {
font-size:    100%;
}
.jesussaid {
color:        red;
}
.verse {
color:        black;
}
.scripture {
font-family:    Arial;
}

In Opera it resizes nicely.

In FF, it resizes alright, with the exception of having a horizontal scroll bar at the bottom, and so that poses the huge problem. (The scrollbar is in the actual page, not the regular scrollbars that show up)

In IE, things go horribly wrong, and there's both horizontal and vertical scrollbar. ALSO my main div, goes to the next line after the floating sidebar div (when I thought setting overflow:auto in a containing div took care of that, but I suppose I'm wrong there)!

Can anyone help me out with this. I was just about to get to the rest of the website, but then I still am having trouble with the front page! Sheesh . . .

Thank you in advance for the help!

~Michael

[drhowarddrfine]

Change this:
<meta http-equiv=Content-Type: "text/html"; charset=utf-8>
to this:
<meta http-equiv="content-type" content="text/html;charset=utf-8">

In you CSS, remove 'position:normal'. There is no such thing.

'max-width' and 'min-width' do not work in IE. See if the scroll bar goes away by just changing it to 'width'.

[Michael7]

Change this:
<meta http-equiv=Content-Type: "text/html"; charset=utf-8>
to this:
<meta http-equiv="content-type" content="text/html;charset=utf-8">

In you CSS, remove 'position:normal'. There is no such thing.

'max-width' and 'min-width' do not work in IE. See if the scroll bar goes away by just changing it to 'width'.

(Thanks, I was trying to figure out the whole charset thing)

I thought I removed all the "position:normal" before, but now they are. Thanks!

I changed everything you mentioned, but it still has the issue.

(Didn't upload it yet to the internet, tested it offline. Would you need/prefer to see the changes yourself, or is that alright?)

[drhowarddrfine]

It's easier to upload it because all the images and stuff are available. As long as it doesn't mess anything else up.

[Michael7]

It's easier to upload it because all the images and stuff are available. As long as it doesn't mess anything else up.

Well, sorry for the delay. I went ahead and uploaded it and everything, justing using a test page with test css too because it would have messed up the other page too.

Here it is:
Test Page

To get rid of the scroll bars I changed "overflow: auto" to "overflow:visible" but I don't think that's a good idea, is it?

I still have the issue of the main div jumping down to after the menu div, upon resizing.

Then I also have the issue of honestly needing the page to be able to resize accordingly (which is why I used min and max width, but that poses IE problems?) Is there another way to do it, without percentages because I can't have it too wide, and I can't have it too narrow. It needs to stop at a particular width for min and max . . . Otherwise, with a single width set in stone it will either be too narrow for widescreen users, or too wide for those viewing the page with a narrow screen (or different resolutions). The less the people see and have to use scroll bars to view the whole page width-wise, the better.

Thank you for all the help, I'll be waiting for your replies!

~Michael

[Michael7]

Well, I haven't been able to figure anything out with the floating problem. So I just set my sidebar to position:absolute. That way it's kinda ignored and the main part doesn't go skipping to the next line and all that.

I'll have to hard-code a bunch of line breaks in the pages that end up with the sidebar larger than the main section, to keep the footer/copyright info from interfering with it though. I don't think there's too many pages like that, that I recall anywho.

However, That only solved the issues with the main part skipping to the next line.

Is there anything that can be done with the min/max-width issue? Searching, I've read of javascript alternatives, but to be honest I wouldn't like that because it would need the users to have javascript enabled. Sorta forcing something on them, just for my site.

Is javascript coding the only alternative to having the page resize with the window (not going past certain sizes and all that)? I really appreciate the help on this. This has seemed to be long process, and all on one page pretty much.