SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool Simple padding issue (at least I hope heh heh)

    I'm just trying to understanding why my padding isn't being honored on the right side of this example. Thanks guys.

    s

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>DIV PADDING</title>
    </head>
     
    <body>
     
    <div style="border: 3px BLACK SOLID; text-align: center;">
     
    <div style="background-color: rgb(143, 144, 130);">
    <span style="color: rgb(0, 0, 0); font-size: 30px; font-family: LUCIDA CONSOLE; font-weight: bold;">DIV PADDING</span>
    </div>
     
    <div style="border-top: 3px BLACK SOLID; background-color: rgb(198, 199, 185); text-align: center; padding: 28px;">
    <img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" style="border: 10px SOLID rgb(143, 144, 130)" width="100%" alt="">
    </div>
     
    </div>
     
    </body>
    </html>

  2. #2
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    EDIT: Well there's a tossup for you. For once it isn't displaying correctly in FIREFOX, IEx looks fine.

    What the . . .

    x

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    The padding is working. But your image is too wide, because it's set to width: 100% but also has 10px border on each side, which increases its width by 20px, pushing it out on the right.

    One option is to use outline instead of border:

    Code:
    style="outline: 10px SOLID rgb(143, 144, 130)"
    Otherwise, you could put the border on another element.

  4. #4
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Surprisingly, Firefox just will not take even your outline suggestion Ralph. Help a noob out brother? I know I'm in the weird zone when IEx looks correct and it's Firefox giving me grief lol.

    s

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It works fine in Firefox for me if you use outline instead of border. Make sure to refresh your page/ clear your cache. IE is misleading you here. It's the other browsers that are being faithful to your code.

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

    The main problem is that you are using an outdated doctype that sends all versions of IE into quirks mode and will use the broken box model which is why the 10px border does not add to the width. It also relegates all the new features of IE9/8/7/6 redundant and makes all versions of IE behave similarly to IE5. You will lose all the new selectors and behaviours developed over the last ten years

    use a current doctype and then do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
    	border: 3px solid #000;
    	text-align: center;
    }
    .wrap h1 {
    	background-color: rgb(143, 144, 130);
    	color: rgb(0, 0, 0);
    	font-size: 30px;
    	font-family: Lucida Console;
    	font-weight: bold;
    	margin:0;
    	text-transform:uppercase;
    }
    .imgwrap{
    	border-top: 3px solid #000;
    	background-color: rgb(198, 199, 185); 
    	text-align: center; 
    	padding: 28px 38px;
    }
    .imgwrap img{
    	border: 10px solid rgb(143, 144, 130);
    	width:100%;
    	margin-left:-10px;
    	position:relative;	
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<h1>Div Padding</h1>
    		<div class="imgwrap"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    </body>
    </html>

    As you wanted 100% width + 10px border I increased the padding on the parent by 10px each side and simply dragged the image back 10px giving the requirement you wanted.

    Never use inline styles (even for demos) because it is so hard to change and even to read.

  7. #7
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's exquisite Paul, but help me understand how the following trio assembles the symphony?
    1. 38px
    2. -10px
    3. relative


    Thank you!

    s

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by semicolon View Post
    It's exquisite Paul, but help me understand how the following trio assembles the symphony?
    1. 38px
    2. -10px
    3. relative


    Thank you!

    s
    1) You originally had 28px on the parent so I made it 38px instead thus reducing the space available inside by 10px each side. When you now add your borders to the inner100% img element they will make the inner element 20px too wide to fit and it will overlap the right side only of the div's padding by 20px.

    2)I then apply a negative left margin of -10px to drag the image to the left by 10px so that it now sits over the extra 10px left padding and the extra 10px right padding we added exactly. This leaves us with 28px space on either side as you wanted.

    3)Position:relative is added for IE7 and under as they will quite often drag an element under the background when negative margins are used and position:relative fixes this.

    It's all about the math

  9. #9
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well even I can follow that lol.

    Okay, let's get a little more complicated. Take a look at the following deliberately garish expansion of your work:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IMAGE BACKGROUND COLORS</title>
    <style type="text/css">
    .wrap {
    	border: 3px solid #000;
    	text-align: center;
    }
    .wrap h1 {
    	background-color: YELLOW;
    	color: rgb(0, 0, 0);
    	font-size: 30px;
    	font-family: Lucida Console;
    	font-weight: bold;
    	margin:0;
    	text-transform:uppercase;
    }
    .imgwrap{
    	border-top: 3px solid #000;
    	background-color: green;
    	text-align: center;
    	padding: 28px 38px;
    }
    .imgwrap img{
    	border: 10px solid rgb(143, 144, 130);
    	width:100%;
    	margin-left:-10px;
    	position:relative;
    }
    
    .imgwrap2{
    	border-top: 3px solid #000;
    	background-color: RED;
    	text-align: center;
    	padding: 28px 38px;
    }
    .imgwrap2 img{
    	border: 10px solid rgb(143, 144, 130);
    	width:100%;
    	margin-left:-10px;
    	position:relative;
    }
    
    .imgwrap3{
    	border-top: 3px solid #000;
    	background-color: BLUE;
    	text-align: center;
    	padding: 28px 38px;
    }
    .imgwrap3 img{
    	border: 10px solid rgb(143, 144, 130);
    	width:100%;
    	margin-left:-10px;
    	position:relative;
    }
    
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<h1>PHOTO GROUPING #1</h1>
    		<div class="imgwrap"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    
    <div class="wrap">
    		<h1>PHOTO GROUPING #2</h1>
    		<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    
    </body>
    </html>
    Presume that all four colors -- YELLOW, GREEN, RED & BLUE -- need to be unique colors, and their image borders, likewise unique.

    What I've been trying to figure out is how to isolate the class .wrap to effect the 4-sided black 3px frame around any group of photos regardless of how many photos that group will have.

    In other words, you see the text heading for PHOTO GROUPING #1? The problem is that the text heading for PHOTO GROUPING #2 needs to be a color other than yellow -- and it will be like this for all the photo groups, each with a different HUE theme.

    And the other thing I don't understand is why we can't move the 7 lines of data in .wrap h1 into .wrap . . . and just eliminate h1 altogether. I've tried it and it just doesn't render properly no matter what I try. One of those two "wraps" we should be able to be shot of, shouldn't we? especially if we isolate .wrap as a universal container for each photo collage group, thus reducing the number of styles I have to juggle? Dare I ask: Would it maybe be simpler to just do these inline and limit the style to the one that will be universal -- the 3px black border -- since virtually every other design feature will be unique to its one photo?

    Thanks Paul. You are just the greatest!

    x

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

    I'm not really sure what you are asking but you modify any one of those styles by simply added a class where appropriate to either a parent if you want to reach a group or to the individual if there is only one.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IMAGE BACKGROUND COLORS</title>
    <style type="text/css">
    .wrap {
    	border: 3px solid #000;
    	text-align: center;
    }
    .wrap h1 {
    	background-color: yellow;
    	color: rgb(0, 0, 0);
    	font-size: 30px;
    	font-family: Lucida Console;
    	font-weight: bold;
    	margin:0;
    	text-transform:uppercase;
    }
    h1.v2 { background:teal }
    h1.v3 { background:orange }
    .wrap div {
    	border-top: 3px solid #000;
    	background-color: green;
    	text-align: center;
    	padding: 28px 38px;
    }
    .wrap img {
    	border: 10px solid rgb(143, 144, 130);
    	width:100%;
    	margin-left:-10px;
    	position:relative;
    }
    div.imgwrap2 { background:red }
    div.imgwrap3 { background:blue }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<h1>Photo Grouping #1</h1>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    <div class="wrap">
    		<h1 class="v2">Photo Grouping #2</h1>
    		<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    <div class="wrap">
    		<h1 class="v3">Photo Grouping #3</h1>
    		<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    <div class="wrap">
    		<h1>Photo Grouping #4</h1>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    </body>
    </html>
    If you don't need specific groups then you can remove the wrap from each.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IMAGE BACKGROUND COLORS</title>
    <style type="text/css">
    .wrap {
    	border: 3px solid #000;
    	border-top:none;
    	text-align: center;
    }
    .wrap h1 {
    	background-color: yellow;
    	color: rgb(0, 0, 0);
    	font-size: 30px;
    	font-family: Lucida Console;
    	font-weight: bold;
    	margin:0;
    	text-transform:uppercase;
    	border-top: 3px solid #000;
    }
    h1.v2 { background:teal }
    h1.v3 { background:orange }
    .wrap div {
    	border-top: 3px solid #000;
    	background-color: green;
    	text-align: center;
    	padding: 28px 38px;
    }
    .wrap img {
    	border: 10px solid rgb(143, 144, 130);
    	width:100%;
    	margin-left:-10px;
    	position:relative;
    }
    div.imgwrap2 { background:red }
    div.imgwrap3 { background:blue }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<h1>Photo Grouping #1</h1>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<h1 class="v2">Photo Grouping #2</h1>
    		<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<h1 class="v3">Photo Grouping #3</h1>
    		<div class="imgwrap3"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div class="imgwrap2"><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<h1>Photo Grouping #4</h1>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    		<div><img src="http://cs.stanford.edu/people/hillerm/Pictures/PanoramaPics/PanoramaTrail_Pano_resize.jpg" width="100%" alt="Image description here"></div>
    </div>
    </body>
    </html>
    Its all just a matter of specificity and targeting.

    Of course I can't give answers for what you might add afterwards and targeting .class div{} will affect all divs so if you added divs for some other purpose then you would need classes on each div instead.

    You will also need to change the headings from h1 to h2 or h3 as you can only have one main h1 heading on the page outside of html5.

  11. #11
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Brilliant Paul. That second one is what I was after -- the "slimmed-down" version. Thank you so much!

    semi

    EDIT:
    Would I place the individual border colors inline then? Thanks Paul!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    There is rarely ever a need to add inline styling (unless you are changing something dynamically) so just add a class to the element that needs different styling and apply the same weight of rule to change it.

    e.g.

    img.newborder {border-color:blue}

    Just add the newborder class to the image or indeed add it to the parent div if you want to change the div as well.

    If an element can't be targeted uniquely the you just need to add a class to isolate it.


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
  •