SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin alignments

    Hi
    Code HTML4Strict:
    <!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>Test</title>
        <style type="text/css">
        #cmt
         {
                border:1px solid red;
                margin:0 5px 0 5px;
                padding:0 7px 0 7px;
         }
     
        #cmt var
         {
                display:block;
                margin-top:5px;
                height:30px;
                line-height:30px;
                font-size:15px;
                font-weight:bold;
                font-style:normal;
                padding-left:25px;
                text-align:left;
                color:#000000;
                border:1px solid green;
         }
     
        #cmt textarea
         {
                display:block;
                width:100%;
                margin-top:5px;
                margin-bottom:15px;
                border:1px solid blue;
         }
        </style>
    </head>
    <body>
          <div id="cmt">
          <var>Comment</var>
          <textarea name="Comment" id="Comment"></textarea>
          </div>
    </body>
    </html>


    Red Box is a div, Green
    box is a var and the blue box is a textarea.

    1. In all browsers, the blue box is one pixel longer than the green box. A margin-right:-1px or any value to margin-right doesnt work ! Why isnt the width not the same like it would be it were a div ?

    2. Why doesnt IE detect margin-top and margin-bottom for the green & blue boxes ?
    Anjanesh

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Your text area is specified at 100&#37; width PLUS the borders, which will make it 2px bigger than the var (var ?? ).

    2. IE doesn't handle margin collapse properly - better off using padding in the container div instead.

  3. #3
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    Quote Originally Posted by Centauri View Post
    var (var ?? ).
    I thought of defining one div and use other tags of that div instead of classess and names.
    Code HTML4Strict:
    #id1
     {
     }
     
    #id1 h2
     {
     }
     
    #id1 var
     {
     }
     
    #id1 code
     {
     }
     
    #id1 dfn
     {
     }
     
    <div id="id1">
    <h2>Heading</h2>
    <var>Subject</var>
    <code>Message</code>
    <dfn>Something else</dfn>
    <div>
    Bad Idea ?
    Anjanesh

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's fine when the elements chosen semantically describe their contents. In your example above, only the <h2> would fall into that category.


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
  •