Firefox Issue - Help from Experts Wanted AGAIN!!

[dwzemens]

http://www.stoneycreekwebdesign.com/...ate_footer.htm

I am a fledgling web designer who stumbles through a few projects a year to make a little extra income for a nice vacation - I enjoy it and I envy you "full timers" who earn your living doing it.

I have recently tried to change over to CSS and am stumbling through it with terrific help from this board. I recently revised the project I am currently working on, doing away with 'absolute' references CSS (done using Dreamweavers interface) and trying to do things the right way.

I was delighted this afternoon when I got the template page completely re-done and it looks great in IE - perfect, even validates at www.w3.org. However, when I looked at the template with Firefox my #maincontent division is thrown to the left margin and is all out of place. Try as I might, I cannot determine why this is occuring and how to fix it.

Can I ask you kind experts once again for some guidance - your help has got me this far, including the 100% height footer placement that I am so proud of!

Thanks agian - Dave Zemens - Rochester, Michigan USA

[AutisticCuckoo]

Try removing 'float:right' from #maincontent. You are floating it, but not specifying a width. Since the content is wider than the canvas, the 'shrink-wrapped' width probably becomes 100%, and a 100%-wide DIV cannot sit next to a 160px-wide left-floated DIV.

If you don't want the content to wrap under the menu DIV if the content is taller, you can set a left margin equal to the width of the menu (beware of quirks in IE, though).

[dwzemens]

Thanks, AutisticCuckoo ... you got me going down the right path. When I took out the float I seemed to have some "padding" issues with the text, so I left the float:right in place, but added width: 735px to the #maincontent and it seems to work great in both browsers. I never quite understand why things work, but am happy when they do and am learning a bit more each time.

Thanks again ----

[dwzemens]

I just noticed that this modification made my <p></p> tags in the #maincontent not function in Firefox. I get one thing fixed and I mess something else up. Any suggestions, as I suspect you CSS guys don't use <p> very often!

Thanks once more ...

EDIT: actually, this modiifcation did not make the <p> tag nor work - it was like that before - the <p> tag causes a new line in Firefox, but causes a new line with a blank line in IE -- confused again!

[dwzemens]

I *am* trying, and this is what I came up with that works? Any comments on how you do it would be appreciated.

p {
line-height: 1.3em;
margin: 0;
padding-top: 1.2em;
}

[AutisticCuckoo]

Any suggestions, as I suspect you CSS guys don't use <p> very often!

Of course we do: to mark up paragraphs!

You need to remember that different browsers have different default values for margin and padding on various elements. If I recall correctly, IE defaults to

p {margin:0 0 1em}

while Gecko browsers default to

p {margin:1em 0}

(i.e. IE uses only a bottom margin, while Gecko uses both top and bottom margins). Since adjacent vertical margins collapse, the net effect is usually the same.

If you want margins and padding to be the same cross-browser, you need to specify all of them explicitly.

[Paul O'B]

Hi,

I notice your whole page is dropping down in ie when the page width is reduced. This is due to the min-height hack for safari which should be hidden form ie as it doesn't need it.

html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-77px;} /*safari wrapper*/
/* margin-bottom must equal #footer height */
/* html #minHeight{margin-bottom:-75px;} not needed*/

[spinball]

You may also want to address the fact that those with 800X600 resolution will have to side scroll to see all of the content on the pages. Just my 2cents

[dwzemens]

Thanks again, guys ... great help. Any idea why when I include this code:

/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */

which I assume (remember, hacker here) is needed to force my page to 100% height when it does not naturally fill) causes me problems. When using IE, if I try to minimize the window screen narrower than my content it forces my content down the page by several inches...Firefox does not show the same problem. I isolated this code as the code that causes the issue, but if I do not use this code then my pages do not default to a *full* screen, which is what I desire.

Anyone know why IE causes this glitch and what I can do to rectify it>

Again, my thanks in advance for helping me out.

[Paul O'B]

I try to minimize the window screen narrower than my content it forces my content down the page by several inches...

I gave you the answer in my post above!

[dwzemens]

Thanks, Paul. I feel stupid not seeing your earlier response. The problem with your fix is that I end up with a page that does not fill the user screen 100% if the content of the page is brief - I was trying to find a solution that filled each page to 100% regardless of the content, and that threw the footer to the bottom of the page when the content extended past one screen. Your fix solved the problem of the page dropping down just fine, however. Thanks again - I hope I can get the page with little content to expand to 100% of the screen, however!

Thanks again - very much!

[Paul O'B]

was trying to find a solution that filled each page to 100% regardless of the content, and that threw the footer to the bottom of the page when the content extended past one screen

All my layouts from the three column demo do exactly that (and your code is taken from there)

The fix I gave you above will make no difference to the page height in IE because the outer is already set to 100%. Its only safari that needs the min-height div so hiding it from ie will make no difference.

You must leave in this code or it won't work:

/* commented backslash hack \*/ 
html, body{height:100%;}
/* end hack */

Then change the min-height styles as follows:

html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-77px;} /*safari wrapper */
/* html #minHeight{margin-bottom:-75px;} not needed for ie*/

I have just checked with your code in case you misplaced something but it works fine and exactly as intended. If it doesn't work for you then you are doing something wrong and I'd need to see the code you are using to determine what's wrong

[dwzemens]

Paul,

That does it. 100% minimum height and not scrunched down when minimizing the page. Thanks very much. You are gonna get tired of me soon, and I will not blame you!

Dave