SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard subnet_rx's Avatar
    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 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}
    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

  3. #3
    SitePoint Wizard subnet_rx's Avatar
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 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.
    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

  5. #5
    SitePoint Wizard subnet_rx's Avatar
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Wizard subnet_rx's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •