SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The box standards.

    I know the IE5.x way to do things was against standards, but I can not figure out a way to do certain things with standards compliant code.

    Like this:
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>problem</title>
    <style type="text/css">
    #sampleWidth{
    width:200px;
    margin : 5px 0px 5px 0px; /*only top and bottom have margin*/
    padding : 0px;
    }
    #container{
    width:200px;
    margin : 0px;
    padding : 0px;
    }
    #container ul{
    list-style:none;
    margin:0px;
    padding:0px;
    width:100%;
    }
    #container ul li{
    margin:0px;
    padding:0px;
    width:100%;
    }
    #container ul li a { 
    display: block;
    width:100%;
    }
    /*fix for ie mac*/
    html>body #container ul li a {
    width: auto;
    }
    /*Here is some visualisation that does not effect the outcome*/
    body, html{
    margin : 0px; 
    padding : 0px; 
    }
    #sampleWidth{
    background:#33ff00;
    }
    #container{
    background:#33ffff;
    }
    #container ul li a:hover{ 
    background:#ff0000;
    }
    </style>
    </head>
    <body>
    <div id="sampleWidth">
    everything should be 200px wide
    </div>
    <div id="container">
    <ul>
    	<li><a href="#">Sample link</a></li>
    	<li><a href="#">Sample link2</a></li>
    </ul>
    </div>
    </body>
    </html>
    This produces a sample page that looks the way I want it, exept that the links are a bit too left. I'd want to add padding-left to the a-tag so that the link text would be a bit more to the right.

    With ie5.x this would be easy as changing the padding does not effect the width of the element.

    With standards compliant browser this will cause an issue, as the outermost width of a tag is then 100% + padding and makes the section wider. I do not want this, but I do not know how to stop it from happening.

  2. #2
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code shows what happens if I try to add the padding to move the link text.
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
     <title>problem</title>
    <style type="text/css">
    #sampleWidth{
      width:200px;
     margin : 5px 0px 5px 0px; /*only top and bottom have margin*/
     padding : 0px;
    }
    #container{
      width:200px;
      margin : 0px;
     padding : 0px;
    }
    #container ul{
     list-style:none;
     margin:0px;
     padding:0px;
      width:100%;
    }
    #container ul li{
     margin:0px;
     padding:0px;
      width:100%;
    }
    #container ul li a {  
      display: block;
      width:100%;
      
      /*This line was added*/
      padding-left:10px;
      
    }
    /*fix for ie mac*/
    html>body #container ul li a {
      width: auto;
    }
    /*Here is some visualisation that does not effect the outcome*/
    body, html{
     margin : 0px;  
     padding : 0px;  
    }
    #sampleWidth{
     background:#33ff00;
    }
    #container{
      background:#33ffff;
    }
    #container ul li a:hover{  
      background:#ff0000;
    }
    </style>
    </head>
    <body>
    <div id="sampleWidth">
    everything should be 200px wide
    </div>
    <div id="container">
      <ul>
    	<li><a href="#">Sample link</a></li>
    	<li><a href="#">Sample link2</a></li>
      </ul>
    </div>
    </body>
    </html>
    The link is a bit more right, but the width of the whole div has changed.

  3. #3
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, there is a temporary fix, I can add margin-right:-10px; and the width will be proper and text moved a bit to right.

    But, this time the text will go very near the right border, how can padding for it be set? Also in opera and netscape the background decoration on mouse hover appears outside the div area.
    Last edited by Arkkimaagi; Nov 20, 2003 at 02:06.

  4. #4
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It doesn't look like you need the width on the a element anyway.
    Code:
    #container ul li a {  
      display: block;
      height:20px;
      /*This line was added*/
      padding-left:10px;
      
    }
    If you want to make elements a set size without using box model hacks etc then don't apply width and padding/borders at the same time.
    e.g.
    Code:
    .outer {width:200px}
    .outer p {padding:10px}
    html
    Code:
    <div class="outer">
    <p>Some content</p>
    </div>
    Hope that helps.

    Paul

    The outer is 200px and the padding is on the p element without width specified, so it is contained within the 200px. (The p could be another div if wanted as long as you don't specify a width on the immer element it will fill to expand the parent so you can use padding and borders on the inner element.)

  6. #6
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DOH, I tought that I'd need it to be 100% wide in order to work properly. And it seems that leaving it out works quite right.

    Only ie5 and ie5.5 look a bit weird. Also in all my ie versions the hover is not triggered when I move my mouse over the blue area as I'd like it to.

    Thanks for the reply.

    This just makes me wonder why can we not just define a width and then inner padding and outer margin, with w3c style things are hard.


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
  •