problem with div not aligning in Firefox

My test page is here:

http://www.crochetgarden.com/cgtest

Now in IE everything is fine. however in firefox, the text moves up on the baby's face...

how do I fix this? I am trying to move form tables to DIV tags and not sure if I am grasping everyhting correctly.

Edited by lilyrain on 07/17/06 12:31 PM (server time).

Looks fine to me.

And word to the wise; if it works in IE not in Firefox, your best bet is that there's a problem with the page. IE is NOT standards compliant. It should be the other way around.

If it doesn't work in Firefox, you're chances are almost 100% it wouldn't work in Opera or Safari either.

What browser did you use to view the page in? Firefox?

The text (not the text links) but the text above the carousel moves up onto the baby's face in firefox, whereas in IE it is lower. I am not sure which one is correct; knowing the relationship of each one would then tell me that... I know how I want them to look, the text below the baby's face... but not sure if it is my coding.. in which then IE eventhough it looks good, still could be wrong an dthen I would compensate. Do I make any sense? lol

Well I second the motion about designing for Firefox/Safari/Opera first and IE second. However each browser may implement the standards differently due to bugs, ambigous specifications, and differences of opinion.

This is even more apparent when trying to get "pixel perfect" layout using CSS positioning (ie, position, top/bottom and left/right properties)

I would take cues from other web designers and scrap your layout that relies on CSS positioning and go with the fluid layouts. Put the navigation links in a "column" and float the column to the right. Then put this column and the content in a wrapper and specify width of the wrapper, ie:

<style type="text/css">
#wrapper {
  width: 768px;
}
#navigation {
  float: right;
  width: 192px;
}
#footer {
  clear: both;
}
</style>
<div id="wrapper">
  <div id="navigation>list of links</div>
  <p>Yadda yadda yadda</p>
  <div id="footer">Footer</div>
</div>

Then to force the paragraph down you only need to apply a top margin.

cool Atropos | openvein.org

In reply to:
What browser did you use to view the page in? Firefox?

I used Firefox. Firefox will be more correct than IE. Not to say Firefox is prefect, it's just more in line with real standards vs IE. If your site doesn't work in Firefox, I'd suggest fixing it.

Build a site using Firefox. Then use IE hacks to get it looking right in IE.

I would also second Atropos7 suggestion in making the site fluid instead of a pixel by pixel layout cause that'll cause you problems *especially* in IE where it incorrectly formats the box model.

Ah- it is looking good... I saved it to be here:

http://www.crochetgarden.com/cgtest/index6.html

Now, is there any way to make the link list extend more to the right... like, have it be 5% from the right side of screen and then it will adjust automatically for people with smaller screens?

On my 17 inch screen, i think the links are too close to the center of the screen...

wooohooo I am making progress because of you both!! (going to be dancing in my living room soon)! Ok.. I used a percentage on the wrapper to make it go more to the right.

Now.. my next question is... hwo do I center those links? I see they are left justified per se. Is there anyway to make it more like each link is centered ?

And then, the text- whichis at the top.. I tried adding a top-margin to the body, but that did not work, to bring the text and rotating images down... how do I make those move down, and make it into a column? (off to go and experiment)

Edited by lilyrain on 07/17/06 02:23 PM (server time).

well.. progress...! sort of.
And this is same link: http://www.crochetgarden.com/cgtest/index6.html

I add this: TOPMARGIN=300px;

to the BODY and it drops down the text, but it also drops down the links too.

How do I only drop down the colum of text with the rorating pictures?

aha more progress!!

http://www.crochetgarden.com/cgtest/index6.html

I have now got the links centered and i got the left column to come down some! Oh m y you both are godsends! I have been trying to figure this out for so long.. posting on other forums etc and nada.. finally I am seeing progress!

Ok.. so now, I am wondering if i am able to center the carousel under the text... and also on the right the navigation links, the header "Question Support Feedback" looks misaligned?

I re-wrote your site, too.

http://atropos.openvein.org/web/dreamhost/cg/

layout stylesheet
theme stylesheet

For the carousel, add a left margin.

The headers are aligned correctly, it just doesn't look like it.

Don't forget to set a width on #wrapper.

cool Atropos | openvein.org

Thank you Thank you Thank you! I have been trying to get back on.. I got these messages before everything was down. They helped a LOT!!!I have now recoded all my pages... things ar estill a little off center but now i have a much better hang of this coding and how it works!

I can't thank you enough for doing that for me!!

problem with div not aligning in Firefox