SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37
  1. #1
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Padding Issues

    Hello,

    I have heard that if I use the correct doc type and if there is no whitespace before it, IE6 and above will render the box model correctly. What are your thoughts? It's not working for me.

    Is it OK to use a nested div to apply padding? I have done this in the past and it lets me get by without using a CSS hack or conditional comment.

    What is the best hack to use for IE when applying padding to a div with a fixed width or height?
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show us the page in question?

    SBMH is best.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    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)
    What are your thoughts? It's not working for me.
    You need a full doctype with uri. See here for more details. Otherwise we need to see the page as Kravvitz already said.

    Is it OK to use a nested div to apply padding?
    It depends on how you look it.

    If you think adding extra non semantic mark-up to your html is better than a simple css hack then go ahead. As "Tantek" said (I think it was him) "Make sure you keep your hacks in the CSS and not in the html" (or words to that effect.)

    However others have opposite opinions so make your own mind up

    The other draw back of adding padding on inner divs is that you will have an element that lacks "layout" because a width hasn't been defined and more than likely will cause problems if the content contains floats or the like. You don't get this problem if you use the box model hack to accommodate your padding,borders and widths on the outer div.

    I agree with Kravvitz's SMBH hack.

  4. #4
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    I think I should start using hacks. It seems I have a hard time with hacks. Could you help me implement the SMBH hack on #box2, #footer-left, and #footer-right?

    Here is my page:

    Code:
    <!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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="madisonvinyl.css" />
    <title>Vinyl Replacement Windows | Madison Vinyl Replacement Windows</title>
    </head>
    
    <body>
    
    <div id="middle">
    <div id="left">
        <ul class="sidebar">
        <li><a href="windows.php" title="Windows">Windows</a></li>
        <li><a class="indented" href="windows-1000.php" title="1000 Series Windows">1000 Series</a></li>
        <li><a class="indented" href="windows-4200.php" title="4200 Series Windows">4200 Series</a></li>
        <li><a class="indented" href="windows-6300.php" title="6300 Series Windows">6300 Series</a></li>
        <li><a class="indented" href="window-options.php" title="Window Options">Window Options</a></li>
        <li><a class="indented" href="window-efficiency.php" title="Window Efficiency">Window Efficiency</a></li>
        <li><a href="doors.php" title="Doors">Doors</a></li>
        <li><a href="shutters.php" title="Shutters">Shutters</a></li>
        <li><a href="window-estimate.php" title="Free Window Estimate">Free Window Estimate</a></li>
        <li><a href="coverage-area.php" title="Coverage Area">Coverage Area</a></li>
        <li><a href="installation.php" title="Installation">Installation</a></li>
        <li><a href="warranty.php" title="Warranty">Warranty</a></li>
        <li><a href="frequently-asked-questions.php" title="Frequently Asked Questions">FAQ's</a></li>
        <li><a href="contact.php" title="Contact Us">Contact Us</a></li>
        <li><a href="about.php" title="About Us">About Us</a></li>
        </ul>
    </div>
    
    <div id="box1">
        <img src="images/home_page_photo.jpg" alt="House With Replacement Vinyl Windows" title="House With Replcement Vinyl Windows" />
        <div id="estimate-link">Your Free Vinyl Window Estimate. <a href="window-estimate.php">Click here</a>.</div>
    </div>
    
    <div id="box2"><h2>How much do you want to save on heating and cooling costs this year?</h2>
    <p>Did you know you may be paying for your new vinyl windows with your heating bill? High performance vinyl windows from Madison Vinyl are on average twice as efficient as the average window made ten years ago and can help reduce your energy bills significantly. Choose Super Spacer windows, the best way to protect your home from window condensation, which can lead to harmful mold growth. Our vinyl windows also reduce outside noise distractions and protect your furniture and the interior of your house from sun damage.</p>
    </div>
    
    <div id="sellingpoint1">
        <h3>Custom Sizes and Options</h3>
        <img src="images/icon_custom.jpg" alt="Custom Sizes and Options" title="Custom Sizes and Options" />
        <p>Have an odd-sized window that should be replaced? Looking for that hard-to-find option? Let us custom design your replacement windows.<br /> <a href="windows.php">Read more</a></p>
    </div>
    <div id="sellingpoint2">
        <h3>Super Spacer Glass</h3>
        <img src="images/icon_super_spacer.jpg" alt="Super Spacer Glass" title="Super Spacer Glass" />
        <p>Super Spacer not only boosts perimeter performance, and helps enhance overall R-values by as much as 30&#37;. <a href="super-spacer-glass.php">Read more</a></p>
    </div>
    <div id="sellingpoint3">
        <h3>Energy Star Certified</h3>
        <img src="images/icon_energy_star.jpg" alt="Energy Star Certified" title="Energy Star Certified" />
        <p>Efficiency is a must for your vinyl windows. Buy vinyl windows that meet industry standards.
    <a href="efficiency.php">Read more</a></p>
    </div>
    
    </div>
    
    <div id="top">
        <div id="heading">
            <div id="logo"><h1><img src="images/logo.gif" alt="Madison Vinyl Replacement Windows Logo" title="Madison Vinyl Replacement Windows" /></h1></div>
            <div id="infoline1"><img src="images/vinyl_replacement_windows.gif" alt="Vinyl Replacement Windows" title="Vinyl Replacement Windows" /></div>
            <div id="infoline2">Manufacturing to Installation</div>       
            <div id="navbar">
            <ul class="navbar">
                <li><a href="index.php" title="Madison Vinyl Home">Home</a></li>
                <li><a href="window-estimate.php" title="Get Free Estimate on Replacement Vinyl Windows">Free Estimates</a></li>
                <li><a href="contact.php" title="Contact Madison Vinyl">Contact Us</a></li>
            </ul>
            </div>
        </div>
    </div>
    
    <div id="footer">
          <div id="footer-left">
              <a href="index.php" title="Madison Vinyl Home Page">Home</a> .
              <a href="contact.php" title="Contact Madison Vinyl">Contact Us</a> .
              <a href="sitemap.php" title="Sitemap">Sitemap</a></div>
          <div id="footer-right">Copyright &copy; 2007 Madison Vinyl. Site design by <a href="http://www.newcdesigns.com" target="_blank">New Creation Designs</a>.</div>
    </div>
    
    </body>
    </html>
    I don't have CSS written for the entire page, but here is what I have so far:

    Code:
    /* CSS Document */
    body {
      font-family: Verdana, Tahoma, Helvetica;
      font-size: 12px;
      line-height: 160%;
      cursor: default;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    img{border:0}
    
    p {
      margin: 0 0 12px 0;
      font-size: 12px;
      line-height: 160%;
    }
    
    a:link, a:active {
      text-decoration: underline;
      color: #990033;
    }
    a:visited {color: #6C7F91;}
    a:hover {text-decoration: none;}
    
    h2 {
      font-size: 15px;
      line-height: 160%;
      color: #891129;
      margin: 10px 20px;
    }
    
    /* Sitemap Begins */
    ul.sitemap {
      padding: 20px 0 0 40px;
    }
    
    ul.indented1 {
      padding-left: 20px;
    }
    
    ul.indented2 {
      padding-left: 30px;
    }
    
    li.nested {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    /* Sitemap Ends */
    
    #top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #FFFFFF;
    }
    
    #heading {
      width: 800px;
      height: 110px;
      margin: 0 auto;
      position: relative;
    }
    
    * html #heading {width:802px;w\idth:800px;}
    
    #logo {
      position: absolute;
      bottom: 20px;
      left: 15px;
      width: 141px;
      height: 69px;
    }
    
    #infoline1 {
      position: absolute;
      bottom: 23px;
      left: 173px;
      width: 401px;
      height: 48px;
    }
    
    #infoline2 {
      position: absolute;
      right: 0;
      bottom: 40px;
      width: 215px;
      height: 18px;
      font-size: 13px;
      color: #6B6D57;
    }
    
    #navbar {
      position: absolute;
      bottom: 0;
      left: 0;
      background: url('images/navbar_bg.gif') repeat-x;
    }
    
    ul.navbar  {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    ul.navbar li {
      float: right;
    }
    
    ul.navbar a:link, ul.navbar a:visited, ul.navbar a:active {
      display: block;
      font-size: 10px;
      font-weight: bold;
      color: #FFFFFF;
      text-decoration: none;
      padding: 0 15px;
      background: url('images/navbar_divider.gif') no-repeat center left;
    }
    
    ul.navbar a:hover {
      text-decoration: underline;
    }
    
    #middle {
      width: 800px;
      margin: 0 auto;  
      padding-top: 110px;
      text-align: left;
      background: url('images/bg.gif') repeat-y;
    }
    
    * html #middle {width:802px;w\idth:800px;}
    
    #left {
      width: 191px;
      text-align: left;
    	position: relative;
    	float: left;
    	background: url('images/sidebar_bg.gif') repeat-y;
    }
    
    #left ul {
      list-style-type: none;
      margin: 0 1px 20px 0;
      padding: 0;
    }
    
    #left li {
      margin: 0;
      background: url('images/ul_divider.gif');
      background-repeat: repeat-x;
      background-position: bottom;
      width: 100%;
    }
    
    #left ul a:link, #left ul a:visited, #left ul a:active {
      font-size: 11px;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-left: 20px;
      text-decoration: none;
      font-weight: bold; 
      color: #000000;
      display: block;
    }
    
    #left ul a:hover {
      font-size: 11px;
      font-weight: bold; 
      color: #990033;
    }
    
    #box1 {
      float: left;
      width: 323px;
      height: 298px;
    }
    
    #box2 {
      float: left;
      width: 286px;
      height: 298px;
      background: url('images/box2_bg.gif') no-repeat;
      font-size: 11px;
      padding: 20px;
    }
    
    #sellingpoint1 {
      float: left;
      width: 232px;
      height: 140px;
    }
    
    #sellingpoint2 {
      float: left;
      width: 194px;
      height: 140px;
    }
    
    #sellingpoint3 {
      float: left;
      width: 180px;
      height: 140px;
    }
    
    /* Footer Begins */
    #footer {
      width: 800px;
      height: 31px;
      margin: 0 auto;
      color: #FFFFFF;
      position: relative;
      padding: 15px 0 0 0;
      text-align: left;
    }
    
    * html #footer {width:802px;w\idth:800px;}
    
    #footer {
      text-align: right;
      font-size: 9px;
      line-height: 160%;
    }
    
    #footer a:link, #footer a:visited, #footer a:active {
      font-size: 10px;
      color: #FFFFFF;
      text-decoration: none;
      margin: 0;
    }
    
    #footer a:hover {
      text-decoration: underline;
    }
    
    #footer-left {
      float: left;
      width: 191px;
      height: 31px;
      background: url('images/footer_left_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    
    #footer-right {
      float: left;
      width: 609px;
      height: 31px;
      background: url('images/footer_right_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    /* Footer Ends */
    I am quite confused. Any help would be appreciated.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  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,

    Its quite simple really you just have to add on the amount of padding and borders that you have added remembering that 5px padding will add 10px to the width because it is 5px each side. A 1px border will add 2px to the width.

    Code:
    #box2 {
      float: left;
      width: 286px;
      height: 298px;
      background: url('images/box2_bg.gif') no-repeat;
      font-size: 11px;
      padding: 20px;
    }
    * html #box2{
      width: 326px;
      height: 338px;
      w\idth: 286px;
      he\ight: 298px;
    }
    #footer-left {
      float: left;
      width: 191px;
      height: 31px;
      background: url('images/footer_left_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    * html #footer-left{
      width: 221px;
      height: 47px;
      w\idth: 191px;
      he\ight: 31px;
    }
    #footer-right {
      float: left;
      width: 609px;
      height: 31px;
      background: url('images/footer_right_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    * html #footer-left{
      width: 639px;
      height: 47px;
      w\idth: 609px;
      he\ight: 31px;
    
    }
    You don't need the box model hack on your footer

    You do realise that these box model hacks are only for ie5 and 5.5 and assume that you are working in standards mode in IE6. Read the faq on the broken box model if you are still unsure

    You have used box model hacks shown below when you don't have any padding or borders to accomodate.

    Code:
    #heading {
      width: 800px;
      height: 110px;
      margin: 0 auto;
      position: relative;
    }
    
    * html #heading {width:802px;w\idth:800px;}
    
    
    #middle {
      width: 800px;
      margin: 0 auto;  
      padding-top: 110px;
      text-align: left;
      background: url('images/bg.gif') repeat-y;
    }
    
    * html #middle {width:802px;w\idth:800px;}
    Remove those as they are no needed.

    You do need it on your footer but it should be like this.

    Code:
    #footer {
      width: 800px;
      height: 31px;
      margin: 0 auto;
      color: #FFFFFF;
      position: relative;
      padding: 15px 0 0 0;
      text-align: left;
    }
    
    * html #footer {height:46px;he\ight:31px}
    Hope that helps

  6. #6
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply, Paul!

    I thought Firefox and IE 7 should render the padding code correctly without a hack, but they aren't. Do I need to use a hack for those? Is it my doctype?

    Here is my CSS:

    Code:
    /* CSS Document */
    body {
      font-family: Verdana, Tahoma, Helvetica;
      font-size: 12px;
      line-height: 160&#37;;
      cursor: default;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    img{border:0}
    
    p {
      margin: 0 0 12px 0;
      font-size: 12px;
      line-height: 160%;
    }
    
    a:link, a:active {
      text-decoration: underline;
      color: #990033;
    }
    a:visited {color: #6C7F91;}
    a:hover {text-decoration: none;}
    
    h2 {
      font-size: 15px;
      line-height: 160%;
      color: #891129;
      margin: 10px 20px;
    }
    
    h3 {
      font-size: 11px;
      font-weight: bold;
    }
    
    /* Sitemap Begins */
    ul.sitemap {
      padding: 20px 0 0 40px;
    }
    
    ul.indented1 {
      padding-left: 20px;
    }
    
    ul.indented2 {
      padding-left: 30px;
    }
    
    li.nested {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    /* Sitemap Ends */
    
    #top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #FFFFFF;
    }
    
    #heading {
      width: 800px;
      height: 110px;
      margin: 0 auto;
      position: relative;
    }
    
    #logo {
      position: absolute;
      bottom: 20px;
      left: 15px;
      width: 141px;
      height: 69px;
    }
    
    #infoline1 {
      position: absolute;
      bottom: 23px;
      left: 173px;
      width: 401px;
      height: 48px;
    }
    
    #infoline2 {
      position: absolute;
      right: 0;
      bottom: 40px;
      width: 215px;
      height: 18px;
      font-size: 13px;
      color: #6B6D57;
    }
    
    #navbar {
      position: absolute;
      bottom: 0;
      left: 0;
      background: url('images/navbar_bg.gif') repeat-x;
    }
    
    ul.navbar  {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    ul.navbar li {
      float: right;
    }
    
    ul.navbar a:link, ul.navbar a:visited, ul.navbar a:active {
      display: block;
      font-size: 10px;
      font-weight: bold;
      color: #FFFFFF;
      text-decoration: none;
      padding: 0 15px;
      background: url('images/navbar_divider.gif') no-repeat center left;
    }
    
    ul.navbar a:hover {
      text-decoration: underline;
    }
    
    #middle {
      width: 800px;
      margin: 0 auto;  
      padding-top: 110px;
      text-align: left;
      background: url('images/bg.gif') repeat-y;
    }
    
    #left {
      width: 191px;
      text-align: left;
    	position: relative;
    	float: left;
    }
    
    #left ul {
      list-style-type: none;
      margin: 20px 0 0 1px;
      padding: 0;
      width: 189px;
      border-top: 1px solid #DEDDD2;
    }
    
    #left li {
      margin: 0;
      border-bottom: 1px solid #DEDDD2;
    }
    
    #left ul a:link, #left ul a:visited, #left ul a:active {
      font-size: 11px;
      padding: 3px 20px;
      text-decoration: none;
      font-weight: bold; 
      color: #7D2727;
      display: block;
    }
    
    #left ul a.indented:link, #left ul a.indented:visited, #left ul a.indented:active, #left ul a.indented:hover {
      padding-left: 33px;
      font-weight: normal;
    }
    
    #left ul a:hover {
      background: url('images/sidebar_hover.gif') repeat-x;
    }
    
    #left #current a:link, #left #current a:visited, #left #current a:hover, #left #current a:active {
      background: url('images/sidebar_current.gif') repeat-x;
    }
    
    #box1 {
      float: left;
      width: 323px;
      height: 298px;
    }
    
    #box2 {
      float: left;
      width: 286px;
      height: 298px;
      background: url('images/box2_bg.gif') no-repeat;
      font-size: 11px;
      padding: 20px;
    }
    * html #box2{
      width: 326px;
      height: 338px;
      w\idth: 286px;
      he\ight: 298px;
    }
    
    #sellingpoint1 {
      float: left;
      width: 232px;
      height: 140px;
    }
    
    #sellingpoint2 {
      float: left;
      width: 194px;
      height: 140px;
    }
    
    #sellingpoint3 {
      float: left;
      width: 180px;
      height: 140px;
    }
    
    /* Footer Begins */
    #footer {
      width: 800px;
      height: 31px;
      margin: 0 auto;
      color: #FFFFFF;
      position: relative;
      padding: 15px 0 0 0;
      text-align: left;
    }
    
    * html #footer {width:802px;w\idth:800px;}
    
    #footer {
      text-align: right;
      font-size: 9px;
      line-height: 160%;
    }
    
    * html #footer {height:47px;he\ight:31px}
    
    #footer a:link, #footer a:visited, #footer a:active {
      font-size: 10px;
      color: #FFFFFF;
      text-decoration: none;
      margin: 0;
    }
    
    #footer a:hover {
      text-decoration: underline;
    }
    
    #footer-left {
      float: left;
      width: 191px;
      height: 31px;
      background: url('images/footer_left_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    * html #footer-left{
      width: 221px;
      height: 47px;
      w\idth: 191px;
      he\ight: 31px;
    }
    
    #footer-right {
      float: left;
      width: 609px;
      height: 31px;
      background: url('images/footer_right_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    * html #footer-right{
      width: 639px;
      height: 47px;
      w\idth: 609px;
      he\ight: 31px;
    }
    /* Footer Ends */
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox and IE7 will render the width correctly without any hacks given that you have a correct doctype, which you have.

    286px but 20px left padding and 20px right padding = 326px. That's what Firefox shows.

    Padding, margin and borders are ADDED to the overall width in all browsers apart form PCIE 5x. (which you may be able to forget now anyway given its share of the market)

    A couple of tips to make things easier:

    1) Instead of adding the padding to the <div> itself and trying to keep track of all the maths which you need to do to calculate the 'real' width of the <div> add the padding OR margin to what is inside it i.e. in your case:

    #box2 h2, #box2 p {
    margin: 0 20px;
    }

    Then set #box2 to the width you want, 326px and remove the padding 20px.

    Simple and easy to keep track of.

    IF you want to entertain IE5x then use conditional comments then you can get rid of all the confusing hacks within the css,

  8. #8
    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)
    Quote Originally Posted by osgood07
    F you want to entertain IE5x then use conditional comments then you can get rid of all the confusing hacks within the css,
    That's a fair comment but it is a matter of personal preference in some cases. I much prefer having the box model hacks next to the original style so that when I edit the css I don't have to have 2 files open and jump from place to place. I hate it when code is split into different places even in the same stylesheet let alone 2 stylesheets

    However conditional comments will allow the original stylesheet to be cleaner and make it easier to drop support for ie5.+ when the time comes so there are benefits to that method. In the end its a choice you must make for yourself

    Quote Originally Posted by osgood7
    add the padding OR margin to what is inside it i.e. in your case
    In essence that is correct but won't always work as you expect due to the collapsing margin model that firefox uses and you could find the top/bottom margin collapsing onto the elements above/below and not give the effect you want.

    Quote Originally Posted by Lavern
    I thought Firefox and IE 7 should render the padding code correctly without a hack, but they aren't. Do I need to use a hack for those? Is it my doctype?
    As already mentioned above firefox will render it correctly so you may need to show us a live page and indicate where you think things are going wrong.

  9. #9
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you for your input. I think I still prefer to take the challenge and use hacks, at least this time, to see if I can make it work. Thanks, so much Paul, for sharing your extensive CSS knowledge! You are a tremendous asset on SitePoint!

    Check my page here: newcdesigns.com/mv

    You can see what I mean.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the margin does collaspe then replace it for padding. Padding won't collapse. In my opinion its a better method than adding padding to the <divs> (which for new exponents causes much confusing due to the spec).

  11. #11
    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,

    You seem to be going about this the wrong way I'm afraid.

    I can't really tell from that screen where you want these elements to appear. Whys have you got a big gap at the top right or is there supposed be some content in there.

    Is the shaded box supposed to be in the top right or are the selling point sections supposed to be there. Its hard to tell unless you have a picture of what you want.

    Why don't you use a class for the selling point sections as they are basically all the same?

    Why are you setting height on elements with text content?

    Just let the content dictate the height and then you won't get all that overlap in firefox because the height you specified is too short. You can remove most of the heights altogether.

    If the design is supposed to be a 3 column design then float three main columns and then put the content in each column. At present you have multiple floats all over the place which is not a good idea. Keep things simple and organised.

    That #box2 background is a fixed width and height which is not a good idea. Use a repeating background that will accommodate text at any size and just cap it off with a side and bottom border for the same effect. You need to think what will happen when the text resizes. There is no need for heights in that section either.

    Your footer is incorrect because you have overstated the width. You have set teh width as the total width and then added padding making it too big.

    This is what I think you were trying to do but you need to sort out the box2 background image.

    Code:
    <!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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="madisonvinyl.css" />
    <title>Vinyl Replacement Windows | Madison Vinyl Replacement Windows</title>
    <style type="text/css">
    /* CSS Document */
    body {
      font-family: Verdana, Tahoma, Helvetica;
      font-size: 12px;
      line-height: 160&#37;;
      cursor: default;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    img{border:0}
    
    p {
      margin: 0 0 12px 0;
      font-size: 12px;
      line-height: 160%;
    }
    
    a:link, a:active {
      text-decoration: underline;
      color: #990033;
    }
    a:visited {color: #6C7F91;}
    a:hover {text-decoration: none;}
    h1{margin:0;padding:0}
    h2 {
      font-size: 15px;
      line-height: 160%;
      color: #891129;
      margin: 10px 20px;
    }
    
    h3 {
      font-size: 11px;
      font-weight: bold;
    }
    
    /* Sitemap Begins */
    ul.sitemap {
      padding: 20px 0 0 40px;
    }
    
    ul.indented1 {
      padding-left: 20px;
    }
    
    ul.indented2 {
      padding-left: 30px;
    }
    
    li.nested {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    /* Sitemap Ends */
    
    #top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #FFFFFF;
    }
    
    #heading {
      width: 800px;
      height: 110px;
      margin: 0 auto;
      position: relative;
    }
    
    #logo {
      position: absolute;
      bottom: 20px;
      left: 15px;
      width: 141px;
      height: 69px;
    }
    
    #infoline1 {
      position: absolute;
      bottom: 23px;
      left: 173px;
      width: 401px;
      height: 48px;
    }
    
    #infoline2 {
      position: absolute;
      right: 0;
      bottom: 40px;
      width: 215px;
      height: 18px;
      font-size: 13px;
      color: #6B6D57;
    }
    
    #navbar {
      position: absolute;
      bottom: 0;
      left: 0;
      background: url('http://www.newcdesigns.com/mv/images/navbar_bg.gif') repeat-x;
    }
    
    ul.navbar  {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    ul.navbar li {
      float: right;
    }
    
    ul.navbar a:link, ul.navbar a:visited, ul.navbar a:active {
      display: block;
      font-size: 10px;
      font-weight: bold;
      color: #FFFFFF;
      text-decoration: none;
      padding: 0 15px;
      background: url('http://www.newcdesigns.com/mv/images/navbar_divider.gif') no-repeat center left;
    }
    
    ul.navbar a:hover {
      text-decoration: underline;
    }
    
    #middle {
      width: 800px;
      margin: 0 auto;  
      padding-top: 110px;
      text-align: left;
      background: url('http://www.newcdesigns.com/mv/images/bg.gif') repeat-y;
    }
    
    #left {
      width: 191px;
      text-align: left;
        position: relative;
        float: left;
    }
    
    #left ul {
      list-style-type: none;
      margin: 20px 0 0 1px;
      padding: 0;
      width: 189px;
      border-top: 1px solid #DEDDD2;
    }
    
    #left li {
      margin: 0;
      border-bottom: 1px solid #DEDDD2;
    }
    
    #left ul a {
      font-size: 11px;
      padding: 3px 20px;
      text-decoration: none;
      font-weight: bold; 
      color: #7D2727;
      display: block;
    }
    /* mac hide \*/
    * html #left ul a{height:1%}
    /* end hide*/
    #left ul a.indented:link, #left ul a.indented:visited, #left ul a.indented:active, #left ul a.indented:hover {
      padding-left: 33px;
      font-weight: normal;
    }
    
    #left ul a:hover {
      background: url('http://www.newcdesigns.com/mv/images/sidebar_hover.gif') repeat-x;
    }
    
    #left #current a:link, #left #current a:visited, #left #current a:hover, #left #current a:active {
      background: url('http://www.newcdesigns.com/mv/images/sidebar_current.gif') repeat-x;
    }
    
    #box2 {
      background: url('http://www.newcdesigns.com/mv/images/box2_bg.gif') no-repeat right bottom;
      font-size: 11px;
      padding: 20px;
    }
    #box2 h2{margin:10px -5px;}
    /* Footer Begins */
    #footer {
      width: 800px;
      height: 31px;
      margin: 0 auto;
      color: #FFFFFF;
      position: relative;
      padding: 15px 0 0 0;
      text-align: left;
    }
    * html #footer {height:47px;he\ight:31px}
    
    
    #footer {
      text-align: right;
      font-size: 9px;
      line-height: 160%;
    }
    
    
    #footer a:link, #footer a:visited, #footer a:active {
      font-size: 10px;
      color: #FFFFFF;
      text-decoration: none;
      margin: 0;
    }
    
    #footer a:hover {
      text-decoration: underline;
    }
    
    #footer-left {
      float: left;
      width: 161px;
      height: 31px;
      background: url('http://www.newcdesigns.com/mv/images/footer_left_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    * html #footer-left{
      width: 191px;
      height: 47px;
      w\idth: 161px;
      he\ight: 31px;
    }
    
    #footer-right {
      float: left;
      width: 579px;
      height: 31px;
      background: url('http://www.newcdesigns.com/mv/images/footer_right_bg.gif') no-repeat;
      padding: 8px 15px;
    }
    * html #footer-right{
      width: 609px;
      height: 47px;
      w\idth: 579px;
      he\ight: 31px;
    }
    /* Footer Ends */
    
    
    #centre{
        width:323px;
        float:left;
    }
    #right{
        float:right;
        width:260px;
    }
    #estimate-link{
        position:relative;
        margin-top:-39px;
        text-align:center;
    }
    
    </style>
    </head>
    <body>
    <div id="middle">
        <div id="left">
            <ul>
                <li><a href="windows.php" title="Windows">Windows</a></li>
                <li><a class="indented" href="windows-1000.php" title="1000 Series Windows">1000 Series</a></li>
                <li><a class="indented" href="windows-4200.php" title="4200 Series Windows">4200 Series</a></li>
                <li><a class="indented" href="windows-6300.php" title="6300 Series Windows">6300 Series</a></li>
                <li><a class="indented" href="window-options.php" title="Window Options">Window Options</a></li>
                <li><a class="indented" href="window-efficiency.php" title="Window Efficiency">Window Efficiency</a></li>
                <li><a href="doors.php" title="Doors">Doors</a></li>
                <li><a href="shutters.php" title="Shutters">Shutters</a></li>
                <li><a href="window-estimate.php" title="Free Window Estimate">Free Window Estimate</a></li>
                <li id="current"><a href="coverage-area.php" title="Coverage Area">Coverage Area</a></li>
                <li><a href="installation.php" title="Installation">Installation</a></li>
                <li><a href="warranty.php" title="Warranty">Warranty</a></li>
                <li><a href="frequently-asked-questions.php" title="Frequently Asked Questions">FAQ's</a></li>
                <li><a href="contact.php" title="Contact Us">Contact Us</a></li>
                <li><a href="about.php" title="About Us">About Us</a></li>
            </ul>
        </div>
        <div id="centre">
            <div id="box1"> <img src="http://www.newcdesigns.com/mv/images/home_page_photo.jpg" alt="House With Replacement Vinyl Windows" title="House With Replcement Vinyl Windows" />
                <div id="estimate-link">Your Free Vinyl Window Estimate. <a href="window-estimate.php">Click here</a>.</div>
            </div>
            <div id="box2">
                <h2>How much do you want to save on heating and cooling costs this year?</h2>
                <p>Did you know you may be paying for your new vinyl windows with your heating bill? High performance vinyl windows from Madison Vinyl are on average twice as efficient as the average window made ten years ago and can help reduce your energy bills significantly. Choose Super Spacer windows, the best way to protect your home from window condensation,
                    which can lead to harmful mold growth. Our vinyl windows also reduce outside noise distractions and protect your furniture and the interior of your house from sun damage.</p>
            </div>
        </div>
        <div id="right">
            <div class="sellingpoint">
                <h3>Custom Sizes and Options</h3>
                <img src="http://www.newcdesigns.com/mv/images/icon_custom.jpg" alt="Custom Sizes and Options" title="Custom Sizes and Options" />
                <p>Have an odd-sized window that should be replaced? Looking for that hard-to-find option? Let us custom design your replacement windows.<br />
                    <a href="windows.php">Read more</a></p>
            </div>
            <div  class="sellingpoint">
                <h3>Super Spacer Glass</h3>
                <img src="http://www.newcdesigns.com/mv/images/icon_super_spacer.jpg" alt="Super Spacer Glass" title="Super Spacer Glass" />
                <p>Super Spacer not only boosts perimeter performance, and helps enhance overall R-values by as much as 30%. <a href="super-spacer-glass.php">Read more</a></p>
            </div>
            <div  class="sellingpoint">
                <h3>Energy Star Certified</h3>
                <img src="http://www.newcdesigns.com/mv/images/icon_energy_star.jpg" alt="Energy Star Certified" title="Energy Star Certified" />
                <p>Efficiency is a must for your vinyl windows. Buy vinyl windows that meet industry standards. <a href="efficiency.php">Read more</a></p>
            </div>
        </div>
        <div style="clear:both;height:1px"></div>
    </div>
    <div id="top">
        <div id="heading">
            <div id="logo">
                <h1><img src="http://www.newcdesigns.com/mv/images/logo.gif" alt="Madison Vinyl Replacement Windows Logo" title="Madison Vinyl Replacement Windows" /></h1>
            </div>
            <div id="infoline1"><img src="http://www.newcdesigns.com/mv/images/vinyl_replacement_windows.gif" alt="Vinyl Replacement Windows" title="Vinyl Replacement Windows" /></div>
            <div id="infoline2">Manufacturing to Installation</div>
            <div id="navbar">
                <ul class="navbar">
                    <li><a href="index.php" title="Madison Vinyl Home">Home</a></li>
                    <li><a href="window-estimate.php" title="Get Free Estimate on Replacement Vinyl Windows">Free Estimates</a></li>
                    <li><a href="contact.php" title="Contact Madison Vinyl">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="footer-left"> <a href="index.php" title="Madison Vinyl Home Page">Home</a> . <a href="contact.php" title="Contact Madison Vinyl">Contact Us</a> . <a href="sitemap.php" title="Sitemap">Sitemap</a></div>
        <div id="footer-right">Copyright &copy; 2007 Madison Vinyl. Site design by <a href="http://www.newcdesigns.com" target="_blank">New Creation Designs</a>.</div>
    </div>
    </body>
    </html>
    Hope it helps

  12. #12
    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)
    Quote Originally Posted by osgoog07
    Padding won't collapse.
    I was talking about margins

    In my opinion its a better method than adding padding to the <divs>
    They are different things in essence and should not be confused.

    Margin is the space between elements and padding is the space inside elements and although you can achieve the same effect by using margins on horizontal containers instead of padding I would advise against doing the same for vertical margins for the reasons already stated.

    Vertical margins will collapse and if you want to ensure inner elements are away from the vertical edges of the parent then padding is the safest option.

    Then there is the issue of "haslayout" that is much more prevalent on margin boxes than it is on padding boxes (for some reason).

    However you make some good points and I agree it is confusing for beginners

  13. #13
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. I will need to look at this code.

    I have attached my design for you to see what I have in mind.
    Attached Images Attached Images
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bottom line is you need to have a good knowledge of how css works to achieve the desired results you required.

    There are several solutions to the same problem...it's picking the ones that give less complications.

    The problem I often encounter with other peoples attempts at css is that it is overly complictated, much more so than is strictly necessary.

    If that's the way they want to do it that's entirlely up to them. Often people don't like to change their habits.

  15. #15
    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)
    I couldn't agree more

  16. #16
    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)
    Quote Originally Posted by lavern
    I have attached my design for you to see what I have in mind.
    lol - that's completely the opposite way around to what I did

  17. #17
    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)
    Her's a quick re-jig in line with your image but needs a little more work.

    Code:
    <!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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="madisonvinyl.css" />
    <title>Vinyl Replacement Windows | Madison Vinyl Replacement Windows</title>
    <style type="text/css">
    
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    
     /* mac hide \*/
        * html .clearfix {height: 1&#37;;}
          .clearfix {display: block;}
     /* End hide */
    
    
    /* CSS Document */
    body {
      font-family: Verdana, Tahoma, Helvetica;
      font-size: 12px;
      line-height: 160%;
      cursor: default;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    img{border:0}
    
    p {
      margin: 0 0 12px 0;
      font-size: 12px;
      line-height: 160%;
    }
    
    a:link, a:active {
      text-decoration: underline;
      color: #990033;
    }
    a:visited {color: #6C7F91;}
    a:hover {text-decoration: none;}
    h1{margin:0;padding:0}
    h2 {
      font-size: 15px;
      line-height: 160%;
      color: #891129;
      margin:0 20px 10px;
    }
    
    h3 {
      font-size: 11px;
      font-weight: bold;
            margin:0 0 1em 0;
    }
    
    /* Sitemap Begins */
    ul.sitemap {
      padding: 20px 0 0 40px;
    }
    
    ul.indented1 {
      padding-left: 20px;
    }
    
    ul.indented2 {
      padding-left: 30px;
    }
    
    li.nested {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    /* Sitemap Ends */
    
    #top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #FFFFFF;
    }
    
    #heading {
      width: 800px;
      height: 110px;
      margin: 0 auto;
      position: relative;
    }
    
    #logo {
      position: absolute;
      bottom: 20px;
      left: 15px;
      width: 141px;
      height: 69px;
    }
    
    #infoline1 {
      position: absolute;
      bottom: 23px;
      left: 173px;
      width: 401px;
      height: 48px;
    }
    
    #infoline2 {
      position: absolute;
      right: 0;
      bottom: 40px;
      width: 215px;
      height: 18px;
      font-size: 13px;
      color: #6B6D57;
    }
    
    #navbar {
      position: absolute;
      bottom: 0;
      left: 0;
      background: url('http://www.newcdesigns.com/mv/images/navbar_bg.gif') repeat-x;
    }
    
    ul.navbar  {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    ul.navbar li {
      float: right;
    }
    
    ul.navbar a:link, ul.navbar a:visited, ul.navbar a:active {
      display: block;
      font-size: 10px;
      font-weight: bold;
      color: #FFFFFF;
      text-decoration: none;
      padding: 0 15px;
      background: url('http://www.newcdesigns.com/mv/images/navbar_divider.gif') no-repeat center left;
    }
    
    ul.navbar a:hover {
      text-decoration: underline;
    }
    
    #middle {
      width: 800px;
      margin: 0 auto;  
      padding-top: 110px;
      text-align: left;
      background: url('http://www.newcdesigns.com/mv/images/bg.gif') repeat-y;
    }
    
    #left {
     width: 191px;
     text-align: left;
        position: relative;
        float: left;
    }
    
    #left ul {
      list-style-type: none;
      margin: 0 0 0 1px;
      padding:20px 0 0 0;
      width: 189px;
      border-top: 1px solid #DEDDD2;
    }
    
    #left li {
      margin: 0;
      border-bottom: 1px solid #DEDDD2;
    }
    
    #left ul a {
      font-size: 11px;
      padding: 3px 20px;
      text-decoration: none;
      font-weight: bold; 
      color: #7D2727;
      display: block;
    }
    /* mac hide \*/
    * html #left ul a{height:1%}
    /* end hide*/
    #left ul a.indented:link, #left ul a.indented:visited, #left ul a.indented:active, #left ul a.indented:hover {
      padding-left: 33px;
      font-weight: normal;
    }
    
    #left ul a:hover {
      background: url('http://www.newcdesigns.com/mv/images/sidebar_hover.gif') repeat-x;
    }
    
    #left #current a:link, #left #current a:visited, #left #current a:hover, #left #current a:active {
      background: url('http://www.newcdesigns.com/mv/images/sidebar_current.gif') repeat-x;
    }
    #box1{float:left;width:323px}
    #box1 img{display:block}
    #box2 {
      font-size: 11px;
      padding: 7px 10px 5px;
            float:left;
            width:266px;
    }
    * html #box2{width:286px;w\idth:266px;}
    #box2 h2{margin:5px 0;font-size:100%}
    #box2 p{font-size:100%}
    /* Footer Begins */
    #footer {
      width: 800px;
      height: 31px;
      margin: 0 auto;
      color: #FFFFFF;
      position: relative;
      padding:0;
      text-align: left;
    }
    
    #footer {
      text-align: right;
      font-size: 9px;
      line-height: 160%;
    }
    
    #footer a:link, #footer a:visited, #footer a:active {
      font-size: 10px;
      color: #FFFFFF;
      text-decoration: none;
      margin: 0;
    }
    
    #footer a:hover {
      text-decoration: underline;
    }
    
    #footer-left {
      float: left;
      width: 161px;
      height: 31px;
      background: url('http://www.newcdesigns.com/mv/images/footer_left_bg.gif') no-repeat;
      padding: 0 15px;
        line-height:31px;
    }
    * html #footer-left{
      width: 191px;
      w\idth: 161px;
    }
    
    #footer-right {
      float: left;
      width: 579px;
      height: 31px;
      background: url('http://www.newcdesigns.com/mv/images/footer_right_bg.gif') no-repeat;
      padding: 0 15px;
        line-height:31px;
    }
    * html #footer-right{
      width: 609px;
      w\idth: 579px;
    }
    /* Footer Ends */
    
    #right{
        width:609px;
        float:left;
    }
    .section1{
        clear:both;
        width:609px;
     background: url('http://www.newcdesigns.com/mv/images/box2_bg.gif') no-repeat right bottom;
    }
    .section{clear:both;width:609px;}
    p.estimate-link{margin:0}
    p.estimate-link span{
        position:relative;
        margin-top:-39px;
        text-align:center;
     display:block
    }
    .sellingpoint{
        width:193px;
        float:left;
        padding:5px;
        font-size:100%;
    }
    * html .sellingpoint{    width:203px;w\idth:193px}
    
    </style>
    </head>
    <body>
    <div id="middle" class="clearfix">
        <div id="left">
            <ul>
                <li><a href="windows.php" title="Windows">Windows</a></li>
                <li><a class="indented" href="windows-1000.php" title="1000 Series Windows">1000 Series</a></li>
                <li><a class="indented" href="windows-4200.php" title="4200 Series Windows">4200 Series</a></li>
                <li><a class="indented" href="windows-6300.php" title="6300 Series Windows">6300 Series</a></li>
                <li><a class="indented" href="window-options.php" title="Window Options">Window Options</a></li>
                <li><a class="indented" href="window-efficiency.php" title="Window Efficiency">Window Efficiency</a></li>
                <li><a href="doors.php" title="Doors">Doors</a></li>
                <li><a href="shutters.php" title="Shutters">Shutters</a></li>
                <li><a href="window-estimate.php" title="Free Window Estimate">Free Window Estimate</a></li>
                <li id="current"><a href="coverage-area.php" title="Coverage Area">Coverage Area</a></li>
                <li><a href="installation.php" title="Installation">Installation</a></li>
                <li><a href="warranty.php" title="Warranty">Warranty</a></li>
                <li><a href="frequently-asked-questions.php" title="Frequently Asked Questions">FAQ's</a></li>
                <li><a href="contact.php" title="Contact Us">Contact Us</a></li>
                <li><a href="about.php" title="About Us">About Us</a></li>
            </ul>
        </div>
        <div id="right">
            <div class="section1 clearfix">
                <div id="box1">
                    <p class="estimate-link"><img src="http://www.newcdesigns.com/mv/images/home_page_photo.jpg" alt="House With Replacement Vinyl Windows" title="House With Replcement Vinyl Windows" /> <span >Your Free Vinyl Window Estimate. <a href="window-estimate.php">Click here</a>.</span></p>
                </div>
                <div id="box2">
                    <h2>How much do you want to save on heating and cooling costs this year?</h2>
                    <p>Did you know you may be paying for your new vinyl windows with your heating bill? High performance vinyl windows from Madison Vinyl are on average twice as efficient as the average window made ten years ago and can help reduce your energy bills significantly. Choose Super Spacer windows, the best way to protect your home from window condensation,
                        which can lead to harmful mold growth. Our vinyl windows also reduce outside noise distractions and protect your furniture and the interior of your house from sun damage.</p>
                </div>
            </div>
            <div class="section clearfix">
                <div class="sellingpoint">
                    <h3>Custom Sizes and Options</h3>
                    <img src="http://www.newcdesigns.com/mv/images/icon_custom.jpg" alt="Custom Sizes and Options" title="Custom Sizes and Options" />
                    <p>Have an odd-sized window that should be replaced? Looking for that hard-to-find option? Let us custom design your replacement windows.<br />
                        <a href="windows.php">Read more</a></p>
                </div>
                <div  class="sellingpoint">
                    <h3>Super Spacer Glass</h3>
                    <img src="http://www.newcdesigns.com/mv/images/icon_super_spacer.jpg" alt="Super Spacer Glass" title="Super Spacer Glass" />
                    <p>Super Spacer not only boosts perimeter performance, and helps enhance overall R-values by as much as 30%. <a href="super-spacer-glass.php">Read more</a></p>
                </div>
                <div  class="sellingpoint">
                    <h3>Energy Star Certified</h3>
                    <img src="http://www.newcdesigns.com/mv/images/icon_energy_star.jpg" alt="Energy Star Certified" title="Energy Star Certified" />
                    <p>Efficiency is a must for your vinyl windows. Buy vinyl windows that meet industry standards. <a href="efficiency.php">Read more</a></p>
                </div>
            </div>
        </div>
    </div>
    <div id="top">
        <div id="heading">
            <div id="logo">
                <h1><img src="http://www.newcdesigns.com/mv/images/logo.gif" alt="Madison Vinyl Replacement Windows Logo" title="Madison Vinyl Replacement Windows" /></h1>
            </div>
            <div id="infoline1"><img src="http://www.newcdesigns.com/mv/images/vinyl_replacement_windows.gif" alt="Vinyl Replacement Windows" title="Vinyl Replacement Windows" /></div>
            <div id="infoline2">Manufacturing to Installation</div>
            <div id="navbar">
                <ul class="navbar">
                    <li><a href="index.php" title="Madison Vinyl Home">Home</a></li>
                    <li><a href="window-estimate.php" title="Get Free Estimate on Replacement Vinyl Windows">Free Estimates</a></li>
                    <li><a href="contact.php" title="Contact Madison Vinyl">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="footer-left"> <a href="index.php" title="Madison Vinyl Home Page">Home</a> . <a href="contact.php" title="Contact Madison Vinyl">Contact Us</a> . <a href="sitemap.php" title="Sitemap">Sitemap</a></div>
        <div id="footer-right">Copyright &copy; 2007 Madison Vinyl. Site design by <a href="http://www.newcdesigns.com" target="_blank">New Creation Designs</a>.</div>
    </div>
    </body>
    </html>
    That should get you back on track (now I must go and do some real work - back this evening ).

  18. #18
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, you have really been a tremendous help! Thanks a lot! It's looking great now, and I understand better how the hacks work. For some reason, I thought that IE, the "bad" browser, ADDS the padding and borders to the width instead of doing it the "right" way (putting it inside). Now it appears that Firefox adds the padding to the width.

    So much to learn...
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  19. #19
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I really appreciated your link to Eric Meyer's article on uncollapsing margins. It was helpful.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  20. #20
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a reason why you put spaces and blank lines in some places in the CSS and not in others?

    example:

    width:200px;
    color: #333333;

    Should there be a blank line before each selector?

    Just wondering if there is one proper way.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  21. #21
    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)
    Now it appears that Firefox adds the padding to the width.
    Slow down a bit and read this sentence below twice

    IE6 (in standards mode) and firefox both use the correct box model and will add padding and borders to the specified width. You only need those box model hacks if you want to support IE5 and 5.5. Otherwise you can delete them completely and ie6 and firefox will still be the same.

    It took me ages to understand the box model at first so don't worry

  22. #22
    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)
    I didn't format the css file so its probably where I was deleting styles and adding them that it got a bit messy. I usually format like this:

    Code:
    #top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100&#37;;
      background: #FFF;
    }
    #heading {
      width: 800px;
      height: 110px;
      margin: 0 auto;
      position: relative;
    }
    I would usually comment each new section with a brief description of what's being done but don't go overboard.(You can always remove comments from the live site as long as you keep a back up with the comments in place.)

  23. #23
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    IE6 (in standards mode) and firefox both use the correct box model and will add padding and borders to the specified width. You only need those box model hacks if you want to support IE5 and 5.5. Otherwise you can delete them completely and ie6 and firefox will still be the same.
    Thank you for pointing this out. I used to think that the non-standard browsers where the ones who added padding to width.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  24. #24
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    About collapsing margins, does it work to have padding on a grandparent element, or must the padding be on the parent element?

    Also, I am having trouble in IE6. When the page first loads, it puts a big space below "right" and above "footer" until you refresh it. It does this on all the pages.

    newcdesigns.com/mv
    Last edited by LavernGingerich; Apr 13, 2007 at 15:47.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  25. #25
    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,

    I couldn't get it to happen locally when I copied the files so it may be that you need to put the image dimensions in the html. Firefox also needs this or it may not allocate the correct space.

    Make sure all your images that are in the html have their height and width attributes set in the html.

    <img src="etc..." width="100" height="100" etc......

    I'm not sure if that is the problem but its worth trying first.


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
  •