headerWrapper behaving oddly on window resize below site minimum width?

[yelow]

Site: http://vedicpower.com

Thanks in advance for looking at this for me. It's starting to bother me that I cannot figure this out.

When the window is resized to a width below the minimum site width, the body of the page pushes scroll bars on the window, but the headerWrapper resizes tot he window as happily as it can, in the process destroying the structure of the stuff that is in the header.

I've been looking through the stylesheet and can't figure it out for the life of me. Maybe someone else has already solved this problem or has ideas?

thanks,

-Tim

[tony_sar]

width of your site is set to 100% .. thats why when you resize your browser , you will see elements shifting to accommodated for new small window size.
your header is controlled by mainwrapper (100%) . if you want to keep things the way they are in any size, use pixel as size ..

[yelow]

I like my page stretching to the window size, and having a 50px margin on either side (left/right) and no margin on top.

However, the header and the body don't resize together, this is the issue that I'm having with it. The header keeps getting smaller with the window when the rest of ther body isn't. I need both to behave like the body, so that the head doesn't break if someone makes the window half-width.

-Tim

[edit] that [/edit]

[tony_sar]

you can try adding min width to header.


#headerWrapper {stylesheet.css (line 252)
background-image:url(../images/75p_white.png);
height:175px;
min-width:780px;
}

[yelow]

Thanks, I remember seeing that tag elsewhere on the interwebs, but I now realize why it didn't jump to mind - it doesn't work in IE 5.5.

Yes, I'm coding for legacy browsers too, direct orders from the top.

I also just realized that the bottom footer is getting smaller with the page, but in its own special way, and there isn't any kind of harmony to the way it redraws.

Maybe there is some other declaration that is inheriting to these elements? Or something?

-Tim

[tony_sar]

IE 5.5 ?
Then you may want to add transparent gif above your logo

[yelow]

yea but the fields still resize each in their own way, which is a no-go for me, I'm way too OCD for that. Also this is supposed to be a professional product, not my personal hobby, so it should work across everything and everywhere under the largest set of circumstances possible without making it ######## up its main functions.

I am still having trouble seeing how the three are defined to have different widths, but what if I put all three into something like this:

#topHeader, #mainBodyDiv, #bottomFooterDiv {
width: thesamething;
}

[edit] Sorry I meant IE 6 not 5.5 - I don't care how it looks like in 5.5, I don't even think we have that installed in the office anymore... [/edit]

[yelow]

Semi-update, it looks like the footer is wrapping at the same rate as the header, and it's only the body that is expanding to the whole width. Curiously enough (for me?) the left-hand margin does not move a single pixel.

Is this what you meant, when in the first message, you told me the body width is 100%?

thanks,

-Tim

[tony_sar]

the only reason body stops moving during resize , is because you have sideboxs , those sideboxs are set to Pixel . your footer has only one link , there is nothing really there to stop browser from shifting elements , thats i guess nature of % ..

[yelow]

So changing my sideboxes to work on a % instead of a static pixel number, it should theoretically fix itself?

It's funny that I refreshed this page just as you posted, and before I got the email notice in my inbox.

I'm going to try to change all values to %, see how that flies. Thanks for your help,

-Tim