div problem in Firefox 2

[Tearose]

I've been working on a webpage that has a title and subtitle in the #top division, then left and main divisions below. It looks fine in FrontPage and IE7, but when I look at it on Firefox, the text in the top div is partly below the area allotted to the div(260 px). (I know this because the top div has a background color, and the third line in below that. Why would the text and line spacing be so much bigger in Firefox? I've checked my settings in Firefox, and my coding in FrontPage, and can't find anything that would cause this to happen. Is there some piece of code I can enter to force the title and subtitle to stay in the top div?

I can give the website if it would help.
TIA

 

[Vragabond]

I can give the website if it would help.

It would.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Tearose]

http://www.cccil.org/JS.htm

 

[Vragabond]

First of all, you might have noticed that FF did not accept your sans-serif font. It is because you enclosed it in quotes. The only values that should be in quotes in CSS are font names with spaces in them. sans-serif as a generic name has no space, so it should not be enclosed in quotes. This will render your font the same in both browsers.

Second is the gap. It is because of default margins on the paragraph element. As you probably know, paragraphs (in a book or something) have some space above and below it. They work exactly the same in HTML, where they have some default margins on top and bottom set to them. However, these margins differ from browser to browser. From your example it seems that IE likes to define margins with certain fixed value -- every paragraph will have such and such margin. FF however sets the margins in ems, unit that is dependant on the size of the font you're using. Since you're using a very big font, the margins are very big. In IE, the margins stay the same, because their size is not directly related to the font size. If you change the default top/bottom margins in the CSS for your paragraphs to whatever you think works best, you should get a uniform look across both browsers.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BillyRayPreachersSon]

It's because you are setting a height on the top div, rather than using a min-height. However, for IE, you need to use height, so do something like this:

#top {
   min-height: 260px;
   _height: 260px;
}

The "_" restricts the following property to IE only (it's known as a CSS hack - in thise case, "The underscore hack").

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

... and also the "position: absolute;" on the top div. Remove this, and the text will flow naturally.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Oh dear. In fact, remove all your "position: absolute" statements. They're just not needed. Learn to use "float" to get the effect you are looking for with the image on the right.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Tearose]

Thank you Dan and Vragabond. My template was based on the free stylesheets at About.com, which is also where I learned most of what I know about laying out webpages. She didn't explain what each part was supposed to do, so your explanations are really helpful. I'll leave the position:absolute for the right column as I don't know how to use float yet, but I'll look into that. Vragabond, I think I understand what you said about the margins, but I don't know how to code for it. Taking out the quotes,and the position:absolute, and putting in the height code got the text back onto the background, but I'd like to get it higher.

 

[Vragabond]

Just specify margins for each element in your css. [tt]p.CaptionC { margin: 10px 0; }[/tt]

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Tearose]

Thank you again! That did the trick.
Jill