SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: css positioning

  1. #1
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    css positioning

    http://www.mattersoffact.co.uk/dev/

    In development.

    If you look at it in IE and then in Mozilla, there is a 2px difference in alignment. This seems to be down to the image at the top. An extra 2 pixels "padding"(?) is being added beneath it in white in Mozilla, but not in IE. Any idea why? And if so how do I fix it?

    Cheers,

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  2. #2
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: css positioning

    Originally posted by TheOriginalH
    Any idea why? And if so how do I fix it?
    supposedly to the best of my memory this is not a bug (or is it?) in mozila, its the way the w3c says it should be done.
    I have seen Simon post an explenation on this, but i cant find it atm,the solution is to apply a class to the image with display: inline; and that *should* remove it.

    that has to be one of the most unpositive answers ive ever given

  3. #3
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Re: Re: css positioning

    Originally posted by iTec

    supposedly to the best of my memory this is not a bug (or is it?) in mozila, its the way the w3c says it should be done.
    I have seen Simon post an explenation on this, but i cant find it atm,the solution is to apply a class to the image with display: inline; and that *should* remove it.

    that has to be one of the most unpositive answers ive ever given
    At least it gives me a direction to go in

    I put the "unpositiveness" down to your impending defeat

    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  4. #4
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately the proposed solution wouldn't play

    I tried adding display: inline; to the img definition in .css , and as a class - didn't play either way
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  5. #5
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried adding display: inline; to the img definition in .css , and as a class - didn't play either way
    That's because the problem is that it already IS inline, and is being displayed in accordance with the CSS2 box model, since your doctype is triggering standards mode.

    See http://devedge.netscape.com/viewsource/2002/img-table/ for full details and some suggested workarounds

  6. #6
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, the spec already dictates that images be inline. That's so you can include smillies, , and such and they won't be lower than the text around them. All inline should reside at the baseline of text--the "padding" you're referring to is the area for the descanters (for the letters g, j, p, q, y) and remaining line height. Aligning the image to the bottom, instead of the baseline, should do your trick:
    Code:
    #header img { vertical-align: bottom; }
    Sooner or later, I'm goin'a have to start charging you for my services, H! :-D

    EDIT: Ack, blufive beat me to it! >:-(

    :-p

    ~~Ian
    Last edited by Ian Glass; Sep 9, 2002 at 10:54.

  7. #7
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That's the jobbie Mr Glass...er...the cheque's in the post
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  8. #8
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK, for a Brucie bonus, in IE and Opera, resizing the window, content dissapears from the right below a certain width (as expected). However, in Mozilla, it dissapears from the left as well - you wanna walk with your cheque or go for the dream holiday?
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  9. #9
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, Ed, I'll take door number one...
    Code:
    /*The Magic*/
    body :first-child {
     width: auto;
     max-width: 770px;
    }
    
    .main{
    padding-left: 200px;
    padding-right: 135px;
    width: 435px;
    background-color: #ffffff;
    }
    Just make sure that 'body :first-child' comes after the .container rule. I also got rid of the positioning on the .main and the header. :-)

    ~~Ian
    Last edited by Ian Glass; Sep 10, 2002 at 04:21.

  10. #10
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That sir, is indeed magic - In fact I'll leave the comment in when I tidy it just for you
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  11. #11
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hmmm - I've encountered another prob .

    If you look at it now ( www.mattersoffact.co.uk/dev/ ), you'll see that the left navigation panel only streches down as far as the elements in it (as it should). I'd like it to stretch to the full length of the container - any tips?
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


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
  •