IE/Firefox and text in divs

**subnet_rx** · Oct 2, 2004, 11:46

In Firefox, any text inside a div is at the bottom and I mean, the very bottom, in IE it seems to center it or at least give it some padding, what property controls this? And does IE have a different default than Firefox on this?

**Paul O'B** · Oct 2, 2004, 12:25

Hi,

I'm afraid the browsers don't do any of those things that you think they do

Text inside a div is placed in exactly the same place at the top of the div. The differences between browsers is solely down to the default margin and padding applied to elements.

This varies between browsers and quite often firefox puts more padding/margin top on of an element that IE does. To see what I mean just put this style in your stylesheet.

Code:

* {margin:0;padding:0}

The universal selector (*) will match all elements and set all margin and padding to zero. This means that you will explicitly need to set the padding and margins on every element to the size that you want. Some people find it easier this way but it does mean that you have to take control and not rely on browser defaults etc.

Paul

**subnet_rx** · Oct 2, 2004, 14:46

Well, take a look at the footer at http://www.esitenow.com, I've tried everything, but can't get that text to be in the same place in IE and Firefox.

Also, what controls whether elements like <p> or <form> stay on the same line? I've tried display:inline; but it doesn't work.

**Paul O'B** · Oct 3, 2004, 04:22

I've tried everything, but can't get that text to be in the same place in IE and Firefox.

You've tried everything except what i've told you to try lol

Code:

#footer p {margin:0;padding:0}

The default top margin on the p is greater in mozilla than in ie (as I told you above

)

Also, what controls whether elements like <p> or <form> stay on the same line? I've tried display:inline; but it doesn't work

It does work its just that you haven't understood it

If you declare an elemnt as inline then it will behave as an inline element and not generate a line feed at the start or finish of its content. However that isn't going to magically stop any other elements from being block elements and other elements will still generate their block level behaviour.
e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1 {display:inline}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>This isn't on the same line</h2>
</body>
</html>

The above code will not pute the h1 and h2 on the same line because even though the h1 has been turned into an inline element the h2 hasn't.
However:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1,h2 {display:inline}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>This is on the same line</h2>
</body>
</html>

Declaring them both to be inline allows them to line up alongside each other.

Hope that answers your questions

Paul

**subnet_rx** · Oct 4, 2004, 09:44

ok, I see my problem now, I had tried your solution but it didn't work, apparently this was because the W3 image was there, when I take it out, it shows up correctly in both browsers.

With it, it aligns the text with the bottom of the image, even with a different vertical-align rule, no margins, etc. I tried many different options.

**Paul O'B** · Oct 4, 2004, 10:02

had tried your solution but it didn't work

My solutions always work lol

I had it working perfectly locally so something must have changed between my posting and your testing.

Hope you've got it sorted it now

Paul

**subnet_rx** · Oct 4, 2004, 10:07

well, I do, without the img after the text, with the img after the text, it always aligns it on the bottom. Anyway, that's not that big of an issue right now.

The SitePoint Forums have moved.

User Tag List

Thread: IE/Firefox and text in divs

Thread Tools

Display

IE/Firefox and text in divs

Bookmarks

Bookmarks

Posting Permissions