SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: IE/Firefox and text in divs
-
Oct 2, 2004, 11:46 #1
- Join Date
- Aug 2001
- Location
- Hattiesburg, MS
- Posts
- 1,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IE/Firefox and text in divs
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?
-
Oct 2, 2004, 12:25 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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}
Paul
-
Oct 2, 2004, 14:46 #3
- Join Date
- Aug 2001
- Location
- Hattiesburg, MS
- Posts
- 1,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 3, 2004, 04:22 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I've tried everything, but can't get that text to be in the same place in IE and Firefox.
Code:#footer p {margin:0;padding:0}
)
Also, 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.
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:
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
-
Oct 4, 2004, 09:44 #5
- Join Date
- Aug 2001
- Location
- Hattiesburg, MS
- Posts
- 1,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 4, 2004, 10:02 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
had 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
-
Oct 4, 2004, 10:07 #7
- Join Date
- Aug 2001
- Location
- Hattiesburg, MS
- Posts
- 1,085
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks