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?
| SitePoint Sponsor |
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?
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.
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.Code:* {margin:0;padding:0}
Paul
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.
Last edited by subnet_rx; Oct 2, 2004 at 15:37.
You've tried everything except what i've told you to try lolI've tried everything, but can't get that text to be in the same place in IE and Firefox.
The default top margin on the p is greater in mozilla than in ie (as I told you aboveCode:#footer p {margin:0;padding:0})
It does work its just that you haven't understood itAlso, what controls whether elements like <p> or <form> stay on the same line? I've tried display:inline; but it doesn't work
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.
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.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>
However:
Declaring them both to be inline allows them to line up alongside each other.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>
Hope that answers your questions
Paul
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.
My solutions always work lolhad tried your solution but it didn't work
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
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.
Posting Permissions
Bookmarks