#1
  1. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29

    div being shunted down in IE, fine in firefox.


    These are my three classes for the content section:

    PHP Code:
    #content {
    margin-right:200px;
    text-align:left;
    background-color#FFF;
    border2px solid #E3EEF5;
    }

    #content_header {
    background-imageurl(images/layout/middlepanel/header_title_back.gif);
    width100%;
    height40px;
    }

    #content_inner {
    padding10px;
    color#5A748C;

    And here is my HTML:

    PHP Code:
                            <div id="content">
                            
                                <div id="content_header"><h1>Welcome to...... </h1></div>
                                
                                <div id="content_inner">
                                
                                <? include("includes/homepageloremipsum.php"); ?>
                                
                                </div>
                                
                            </div>
    The trouble is that the 100% width on the content_header div for some reason shunts the div down by about 200px on IE. It sits at the top if I select 99% width or anything other than 100% width but then I have a gap on the right.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    What happens if you don't specify a width?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    I don't know. But I can't imagine it would be the total width of the containing div??

    And widths other than 100% work fine.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    But that's exactly what happens if the block element is not float or absolute. It takes all available space in the parent.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    I will have to check that out, it's not behaviour I have ever seen before.
  10. #6
  11. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    I tried removing the width with the element floated to the left and it is only as wide as whatever is in the div
  12. #7
  13. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    Hi Ralph, I tested the bit of code, and the problem I had wasn't in IE - it was in Firefox (div being shunted down). The header tag caused the problem; I removed the margins and it looked the same in IE and Firefox.

    Hope that helps
    Attached Images
    Last edited by Grafmix; November 4th, 2005 at 09:19 AM.
    We are troll foldy-rolls and we'll eat you for our supper.
  14. #8
  15. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    Will give it a go thanks
  16. #9
  17. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    Originally Posted by ralphuk100
    I tried removing the width with the element floated to the left and it is only as wide as whatever is in the div
    As I said, floats and AP elements are exceptions. I do wonder what's the point of a float element being as wide as its parent?

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  18. #10
  19. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    It is not supposed to be floated. I just tried floating it to see if some bug would fix it.
  20. #11
  21. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    Did adjusting the header properties work for you?
    We are troll foldy-rolls and we'll eat you for our supper.

IMN logo majestic logo threadwatch logo seochat tools logo