Thanks Michael. I'm starting to think that I just don't understand the box
model at all. Here is my simplified HTML body tag contents:
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<div id="homeImage"><a href="index.htm"><img
src="images/transparent.gif" width="150" height="74" /></a></div>
<div id="ttSignUp">
Newsletter Signup div
</div>
<!-- end #header -->
</div>
<div id="sidebar1">
Sidebar1 div
</div>
<div id="sidebar2">
Sidebar2 div
</div>
<div id="mainContent">
Main Content div
</div>
<!-- This clearing element should immediately follow the #mainContent div
in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="footer" align="center">
Footer Stuff
</div>
</div>
</body>
My thinking was that since my #ttSignUp div was contained inside my #header
div, I should position it relative to the #header div. But, now, even when I
remove all the CSS position properties, it is still different between IE and
Firefox. position: static is the default, right? So, removing all the
position properties should make sure my div is in the layout flow, right?
Thanks again for your ideas!
Clarke
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Sheldon
Sent: Monday, August 27, 2007 6:44 PM
To: discussion@acfug.org
Subject: Re: [ACFUG Discuss] Firefox CSS Challenge
Your problem is that you're mixing relative positioned divs along with divs
with no position. This means that they can get out of flow, and IE7 is
simply interpreting it correctly THIS time (it won't
always) because MS overreacted in their box model/div 'fixes' in IE7.
If you simply change the .theColFixHrd #ttSignUp (starts line 29 of
NewTopgrading.css) to position:absolute, you'll see that's the base issue.
This means you can go back and add a default div { position:relative; } as
part of your basic reset css, or you can just change that one and recheck
flow.
Depends on your style and the site.
**Michael
On Aug 27, 2007, at 6:19 PM, Clarke Bishop wrote:
> I have a CSS challenge that's driving me nuts! It's a little <div> for
> a newsletter signup. It looks right in IE7 and Dreamweaver CS3, but it
> get's all scrunched up to the top of the screen in Firefox.
>
> Here's the relevant CSS for the div:
>
> .thrColFixHdr #ttSignUp {
> position: relative;
> margin-left:370px;
> margin-top: 84px;
> margin-right: 0px;
> margin-bottom: 0px;
> padding:0;
> width: 360px;
> height:110px;
> }
>
> The website is at: http://76.12.33.75
>
> Firefox seems to be ignoring the margin-top parameter.
>
> Any ideas?
>
> Also, who on the list is a CSS expert that can help with occasional
> problems? I'm open to spending some money to resolve this (and similar
> problems in the future)!
>
> Thanks,
>
> Clarke
>
> Office: 770-642-1353
> eMail: [EMAIL PROTECTED]
>
>
>
>
>
>
>
>
> -------------------------------------------------------------
> Annual Sponsor FigLeaf Software - http://www.figleaf.com
>
> To unsubscribe from this list, manage your profile @
> http://www.acfug.org?fa=login.edituserform
>
> For more info, see http://www.acfug.org/mailinglists Archive @
> http://www.mail-archive.com/discussion%40acfug.org/
> List hosted by http://www.fusionlink.com
> -------------------------------------------------------------
>
>
>
-------------------------------------------------------------
Annual Sponsor FigLeaf Software - http://www.figleaf.com
To unsubscribe from this list, manage your profile @
http://www.acfug.org?fa=login.edituserform
For more info, see http://www.acfug.org/mailinglists Archive @
http://www.mail-archive.com/discussion%40acfug.org/
List hosted by http://www.fusionlink.com
-------------------------------------------------------------
-------------------------------------------------------------
Annual Sponsor FigLeaf Software - http://www.figleaf.com
To unsubscribe from this list, manage your profile @
http://www.acfug.org?fa=login.edituserform
For more info, see http://www.acfug.org/mailinglists
Archive @ http://www.mail-archive.com/discussion%40acfug.org/
List hosted by http://www.fusionlink.com
-------------------------------------------------------------
