SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing issue...IE VS FF as usual!!

    I am having an issue with spacing between photos. There are 3 rows of them...in IE they seem to be spacing (height wise) based on the:

    div.thumb_top{
    margin: 0;
    padding: 39px 0 22px 0;
    }

    Now I may be wrong. But, if you note the space between each row in FF...they are much closer. Is there a simple way to make them both the same? I'd like it to work like in IE....but I'd like to have better control over spacing...

    ----------------------------------------------------------------------


    HTML:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" media="screen" href="../styles.css"/>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function openPhotoWindow(imageName, imageWidth, imageHeight){
    window.open(imageName,"photo","toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0 ,width="+imageWidth+",height="+imageHeight+",left=30,top=80");
    }
    //-->
    </script>
    </head>
    <body>
    <div id="wrap">
    <div id="top"></div>
    <div id="header"><img src="../i/logo.gif" align="left"></div>
    <div id="nav-wrap">
    <ul id="nav">

    <li><a href="../index.htm">Home</a></li>
    <li><a href="../features">Features</a></li>
    <li><a href="../pictures">Pictures</a></li>
    <li><a href="../order">Order Now</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>

    </div>
    <div id="photo-wrap">
    <div id="contentPhoto">
    <div class="thumb_top">
    <div class="thumb"><img src='../i/photos_sm1.jpg' width='200' height='70' alt=' Image' onclick="openPhotoWindow('pop.htm', '300', '176');" />
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"> <img src="../i/photos_sm2.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>
    </div>

    <div class="thumb"> <img src="../i/photos_sm3.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"> <img src="../i/photos_sm4.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"> <img src="../i/photos_sm5.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>

    </div>
    <div class="thumb"> <img src="../i/photos_sm6.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"> <img src="../i/photos_sm7.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"> <img src="../i/photos_sm8.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>

    </div>
    <div class="thumb"> <img src="../i/photos_sm9.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"> <img src="../i/photos_sm10.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"> <img src="../i/photos_sm11.jpg" alt="Sample Image">
    <div class="phototitle">Photo description goes here</div>

    </div>
    <div class="thumb"> <a href="pop.htm" target="blank"><img src="../i/photos_sm12.jpg" border="0" alt="Sample Image"></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    </div>
    </div>
    </div>
    <hr class="hide" />

    <div id="footer">
    <p>Copyright</p>
    </div>
    </div>

    </body>
    </html>


    -------------------------------------------------------------------------

    CSS:::





    /* CSS Document */

    #wrap {
    position: relative;
    background: #fff repeat;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #000;
    border-top: none;
    border-bottom: none;
    width: 750px;
    }

    #top {
    background: #0C557B;
    padding-top: 21px;
    }

    #header {
    background: #000 url(i/header_bg.gif) repeat-x;
    height: 70px;
    padding-left: 26px;
    }

    body {
    margin: 0;
    padding: 0 0 0 0;
    text-align: center;
    font: normal 12px arial, helvetica, serif;
    color: #000;
    }

    h1 {
    font: bold 15px arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 39px 0 22px 0;
    text-transform: uppercase;
    }

    p {
    margin: 0;
    padding: 5px 0;
    }

    h2 {
    font: 7pt arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 12px 44px;
    }

    /* Nav Styles */
    #nav-wrap {
    background: #0C557B;
    padding: 0 0 0 41px;
    height: 21px;
    font: bold 12px arial, helvetica, serif;
    text-transform: none;
    }

    #nav {
    padding: 3px 0 2px 0;
    }

    ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav li { /* all list items */
    float: left;
    position: relative;
    /*width: 100px;*/
    line-height: 15px;
    }

    #nav a:link, #nav a:visited {
    color: #C0D3DD;
    padding: 0 22px 0 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    }
    #nav a:hover, #nav a:active {
    color: #FFF;
    }


    /* Content Styles */
    #content-wrap {
    float: left;
    width: 444px;
    text-align: left;
    background: #fff;
    }

    #form-wrap {
    float: left;
    width: 748px;
    text-align: left;
    background: #fff;
    margin: 0 0 47px 41px;
    }
    }

    #conForm{
    padding: 0;
    margin: 0;
    }

    #content {
    margin: 0 0 47px 41px;
    }

    #content ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    #content li {
    margin: 0px;
    padding: 5px 0;
    list-style-type: none;
    font-weight: bold;
    }



    /* Sidebar Styles */

    #sidebar {
    float: right;
    margin: 0;
    width: 304px;
    border-top: 39px solid #fff;
    padding: 0 0 39px 0;
    }

    #sidebar2 {
    float: right;
    margin: 0;
    width: 304px;
    text-align: left;
    }
    #sidebar_space {
    margin: 0 0 0 34px;
    }
    #sidebar img {
    background: #FFF;
    border: 0;
    }



    /* Footer. Styles */

    #footer {
    clear: both;
    background: #0C557B;
    height: 20px;
    font: bold 7pt arial, helvetica, serif;
    color: #C0D3DD;
    text-align: left;
    padding-left: 41px;
    }



    /* Misc. Styles */

    .hide {
    display: none;
    }
    #lowfi-logo {
    display: none;
    }

    div.thumb_top{
    margin: 0;
    padding: 39px 0 22px 0;
    }

    div.thumb {
    margin: 3px;
    border: 1px solid #0C557B;
    height: auto;
    float: left;
    text-align: center;
    }
    .thumb img{
    display: inline;
    margin: 5px;
    border: none;
    }
    .thumb a:hover img {border: none;}

    .photocattitle {text-align: center; font-weight: bold;}
    .phototitle {
    text-align: center;
    font-weight: normal;
    font-style: arial, helvetica, serif;
    font-size: 7pt;
    width: 200px;
    margin: 0 5px 3px 5px;
    }

    #photo-wrap {
    float: left;
    width: 748px;
    text-align: left;
    background: #fff;
    }
    #contentPhoto {
    margin: 0 41px 47px 41px;
    }

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FIRST ..... GET RID OF THAT DOCTYPE:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    thats throwing you into quirksmode and then the broken box model which will give you two different results in IE / FF

    search around here there's TONS of posts about this.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes no difference to be honest, I've done that. And to search for the answer...to be honest I don't really understand what is causing this to happen, so it's hard to find the right answer when I don't know the correct cause.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    div.thumb_top{
    margin: 0;
    padding: 39px 0 22px 0;
    }


    Whati s happening is that in IE this is spacing the height of each row. In FF, it's only spacing the first row from the nav bar above. Technically, it's doing the right thing in FF...although I want it to work in FF the way it is in IE. Obviously something really simple I'm overlooking. I just like being accurate!

  5. #5
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I do this FF works PERFECT...the only problem now is in IE the last row of pictures has no height space between it and the footer, even though in FF it does. Obviously, I'm really warm, but something is still not liking me!!


    div.thumb_top{
    margin: 39px 0 0 0;
    padding: 0;
    }

    div.thumb {
    margin: 0 3px 39px 3px;
    border: 1px solid #0C557B;
    height: auto;
    float: left;
    padding: 0;
    text-align: center;

    }
    .thumb img{
    display: inline;
    margin: 5px;
    border: none;
    }
    .thumb a:hover img {border: none;}

    .photocattitle {text-align: center; font-weight: bold;}
    .phototitle {
    text-align: center;
    font-weight: normal;
    font-style: arial, helvetica, serif;
    font-size: 7pt;
    width: 200px;
    margin: 0 5px 3px 5px;
    }

    #photo-wrap {
    float: left;
    width: 748px;
    text-align: left;
    background: #fff;
    }
    #contentPhoto {
    margin: 0 41px 47px 41px;
    }

  6. #6
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I FINALLY got the spacing right between the bottom of my photo area and the footer (39px)...but I can't get the spacing of the photo section right...there should be 41 px to the left and right of the photo area. The workspace I believe is 748px...there should be a margin of 41px on both the left and right sides. I'm getting 41px on the left, but about 63px on the right, even though it states in the CSS only 41px. I am not sure what the problem is but I'm certain it's a CSS setting because if I try changing the space amounts sometimes it will cause the 39px at the bottom between it and the footer to disappear. Any takers?! I've been 4 hours on it.



    ----------------------------------------------------------

    /* CSS Document */

    #wrap {
    position: relative;
    background: #fff repeat;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #000;
    border-top: none;
    border-bottom: none;
    width: 750px;
    }

    #top {
    background: #0C557B;
    padding-top: 21px;
    }

    #header {
    background: #000 url(i/header_bg.gif) repeat-x;
    height: 70px;
    padding-left: 26px;
    }

    body {
    margin: 0;
    padding: 0 0 0 0;
    text-align: center;
    font: normal 12px arial, helvetica, serif;
    color: #000;
    }

    h1 {
    font: bold 15px arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 39px 0 22px 0;
    text-transform: uppercase;
    }

    p {
    margin: 0;
    padding: 5px 0;
    }

    h2 {
    font: 7pt arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 12px 44px;
    }

    /* Nav Styles */
    #nav-wrap {
    background: #0C557B;
    padding: 0 0 0 41px;
    height: 21px;
    font: bold 12px arial, helvetica, serif;
    text-transform: none;
    }

    #nav {
    padding: 3px 0 2px 0;
    }

    ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav li { /* all list items */
    float: left;
    position: relative;
    /*width: 100px;*/
    line-height: 15px;
    }

    #nav a:link, #nav a:visited {
    color: #C0D3DD;
    padding: 0 22px 0 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    }
    #nav a:hover, #nav a:active {
    color: #FFF;
    }


    /* Content Styles */
    #content-wrap {
    float: left;
    width: 444px;
    text-align: left;
    background: #fff;
    }

    #form-wrap {
    float: left;
    width: 748px;
    text-align: left;
    background: #fff;
    margin: 0 0 47px 41px;
    }
    }

    #conForm{
    padding: 0;
    margin: 0;
    }

    #content {
    margin: 0 0 47px 41px;
    }

    #content ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    #content li {
    margin: 0px;
    padding: 5px 0;
    list-style-type: none;
    font-weight: bold;
    }



    /* Sidebar Styles */

    #sidebar {
    float: right;
    margin: 0;
    width: 304px;
    border-top: 39px solid #fff;
    padding: 0 0 39px 0;
    }

    #sidebar2 {
    float: right;
    margin: 0;
    width: 304px;
    text-align: left;
    }
    #sidebar_space {
    margin: 0 0 0 34px;
    }
    #sidebar img {
    background: #FFF;
    border: 0;
    }



    /* Footer. Styles */

    #footer {
    clear: both;
    background: #0C557B;
    height: 20px;
    font: bold 7pt arial, helvetica, serif;
    color: #C0D3DD;
    text-align: left;
    padding-left: 41px;
    }



    /* Misc. Styles */

    .hide {
    display: none;
    }
    #lowfi-logo {
    display: none;
    }

    div.thumb_top{
    margin: 39px 0 0 0;
    padding: 0;
    }

    div.thumb {
    margin: 0 8px 39px 0;
    border: 1px solid #0C557B;
    height: auto;
    float: left;
    padding: 0;
    text-align: center;

    }
    .thumb img{
    display: inline;
    margin: 5px;
    border: none;
    }
    .thumb a:hover img {border: none;}

    .photocattitle {text-align: center; font-weight: bold;}
    .phototitle {
    text-align: center;
    font-weight: normal;
    font-style: arial, helvetica, serif;
    font-size: 7pt;
    width: 200px;
    margin: 0 0 3px 5px;
    }

    #photo-wrap {
    float: left;
    width: 748px;
    text-align: left;
    background: #fff;
    }
    #contentPhoto {
    margin: 0 41px 47px 41px;
    }



    ----------------------------------------------------------------------
    HTML:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" media="screen" href="../styles.css"/>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function openPhotoWindow(imageName, imageWidth, imageHeight){
    window.open(imageName,"photo","toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0 ,width="+imageWidth+",height="+imageHeight+",left=30,top=80");
    }
    //-->
    </script>
    </head>
    <body>
    <div id="wrap">
    <div id="top"></div>
    <div id="header"><img src="../i/logo.gif" align="left"></div>
    <div id="nav-wrap">
    <ul id="nav">
    <li><a href="../index.htm">Home</a></li>
    <li><a href="../features">Features</a></li>
    <li><a href="../pictures">Pictures</a></li>
    <li><a href="../order">Order Now</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <div id="photo-wrap">
    <div id="contentPhoto">
    <div class="thumb_top">
    <div class="thumb"><a href="#"><img src='../i/photos_sm1.jpg' width='200' height='70' onclick="openPhotoWindow('pop.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm2.jpg' width='200' height='70' onclick="openPhotoWindow('pop_3.htm', '400', '286');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm3.jpg' width='200' height='70' onclick="openPhotoWindow('pop_2.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm4.jpg' width='200' height='70' onclick="openPhotoWindow('pop_4.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm5.jpg' width='200' height='70' onclick="openPhotoWindow('pop_5.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm6.jpg' width='200' height='70' onclick="openPhotoWindow('pop_6.htm', '400', '286');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm7.jpg' width='200' height='70' onclick="openPhotoWindow('pop_7.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm8.jpg' width='200' height='70' onclick="openPhotoWindow('pop_8.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm9.jpg' width='200' height='70' onclick="openPhotoWindow('pop_9.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm10.jpg' width='200' height='70' onclick="openPhotoWindow('pop_10.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm11.jpg' width='200' height='70' onclick="openPhotoWindow('pop_11.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    <div class="thumb"><a href="#"><img src='../i/photos_sm12.jpg' width='200' height='70' onclick="openPhotoWindow('pop_12.htm', '400', '147');" /></a>
    <div class="phototitle">Photo description goes here</div>
    </div>
    </div>
    </div>
    </div>
    <hr class="hide" />
    <div id="footer">
    <p>Footer</p>
    </div>
    </div>

    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NO takers on this huh!!?? I figured it was quite a tough one because I've still not figured out the above.


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
  •