SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2003
    Location
    liverpool
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    smallest css layer possible

    I am trying to create a layers in css that is one pixel high and several in length, but everytime i set it as such (using dreamweaver) the resulting live is as wide as i specified but 4 pixels high. Anyone know why/how to get round it?
    Cheers Phil.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What type of layers are you using in DWMX? Table based ones or CSS based ones?

    THe only thing I can think that you want to have 1px high is an image, so why not just use an image?

    HTML Code:
    <img src="..." height="1" width="100" alt="" />
    If I know more about your layout, I could probably give you better advice. For example, this mught be what you want:

    Code:
    .line { border-top: 1px solid red; width: 100px; font-size: 0; line-height: 0;}
    HTML Code:
    <div class="line">text</div>
    Hello World

  3. #3
    SitePoint Member
    Join Date
    Jun 2003
    Location
    liverpool
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yes well..

    i ended up using an image cos i couldn't do it with css - but i'm sure it can be done - the line you posted was what i was using pretty much and it don't work - well didn't for me.
    For some reason i can't ftp or i'd upload it to prove it, cheers for your time though...
    Phil

  4. #4
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure about this but I think it has to do with the padding or font-size.


  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Phil, I think I know the solution. I am also a css+dreamweaver user and I can tell you from experience, it was a pain in the butt to finally figure it out, but it seems so simplistic.

    When you have the css window open (Font family, font size, etc..) you want to choose 1 pixel for the font size, and then go down to BOX (i think) and choose 1 pixel as the height there as well. Also, make sure you don't have the (SPACER characters) inside your div, the one that is like pushing the spacebar. That automatically creates the illusion in the div that there is a character there and makes the height accordingly. But make both the font size and the height of the div 1 pixel, and it should work out.

  6. #6
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Miami Beach
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not quite sure what the problem really is, but this will give you 1px x 50px using CSS. If anything else is within the container i.e. TD tag, it will expand to fit.

    .layer
    {
    width:50; height:1; font-size: 0; line-height: 0;
    }

  7. #7
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you test cross browser?

    Why do I ask?

    Internet Explorer tries to second-guess you. If you have a div with something in it (text, for example - including whitespace), and try to set the height of the div smaller than the height of the content, IE will think "Oh, you didn't want to do that" and "helpfully" make the div tall enough to show the text. Hence all the advice above to set the font-size and line height to be tiny.

    Mozilla (and, I suspect, Opera) will set the Div to the size you specified, regardless. This leads to all kinds of problems when people specify their divs too small, and then complain that Moz is squashing all their text - no, it's doing what you asked for, it's IE that's being disobedient.

  8. #8
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Miami Beach
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually it would depend on the purpose of such a small div. If it's being used in place of a spacer.gif, then there aren't any issues as nothing will be within the DIV.
    Last edited by Anim8d Life; Oct 31, 2003 at 17:02.

  9. #9
    SitePoint Member
    Join Date
    Jun 2003
    Location
    liverpool
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers - indeed it was a font size/line-height issue.
    It all works now.
    Phil


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
  •