SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    extra margins when height is set

    I'm doing this website for one casino and I'm hitting one tiny CSS issue, which might be a bug or something. I have tried to look up at some sources, but can't find anything relevant. The problem is only with IE and side margins when some DIV's height, is defined. Basically, when the height is defined...some extra 3px margins or padding appear. You can see how the red and green blocks interact:

    http://www.lcc.lt/people/janis/index_1.html
    The problem is that the border height is not as the height should be. The bottom decoration is not attached to the border. I would prefer that the border height would be fixed...but as soon as I put some height..it brings the problem with side margins. You can see that red is a bit wider than green...not good.

    http://www.lcc.lt/people/janis/index_2.html
    I added height to the content (frame) and the problem is that there are few pixel margins b/w border and decors on side. Seems to be good with the green and red overlay, though.

    http://www.lcc.lt/people/janis/index_3.html
    I apply class="clearfix" Hack on DIV id='content' but then the problem still exists.

    http://www.lcc.lt/people/janis/index_4.html
    I apply class="clearfix" Hack on DIV id='container' and the problem is kind of reversed. But now not only header image image now has the margin problem, but all surrounding area.

    I tried box hack, other hack, and I'm kind of at confused where the problem might be. Do you have an idea where should I be looking. Any help/suggestion on any of the versions?

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

    The main problem is ie's three pixel jog on floats and if you look at the faq sticky thread (under floats) this is explained in detail and is a common problem. I have highlighted the changes in the code below but read the faq to understand the full solution.

    You have also put the clearfix for mozilla in the cod ebut have not applied it to the relevant element.
    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=iso-8859-13" />
    <style type="text/css">
    /* 
    client: POKERVEGAS
    author: Janis Lanka
    deveoped by: e|motion <www.emotion.lt>
    */
    html body {
    padding: 0;
    margin: 0;
    font: 11px Tahoma, Helvetica, sans-serif;
    color: #E9D992;
    background-color: #000;
    padding-top: 3%;
    }
    a {
    text-decoration: none;
    color: #A94624;
    }
    #frame {
    width: 1030px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    }
    #banner {
    padding: 0;
    margin-bottom: 0;
    background-color: #000;
    }
    #content {
    padding: 0;
    border: 1px solid #C8AC2C;
    margin-left: 115px;
    margin-right: 115px;
    background-color: transparent;
    }
    /* commented backslash mac hiding hack - ie5 fix \*/ 
    * html #content {height:1%;}
    /* end hack */ 
    * html #content {margin-left: 112px; margin-right: 112px;}
    
    #header {
    padding: 0;
    margin-bottom: 0;
    background-color: red;
    background-image: url(http://www.lcc.lt/people/janis/images/header_.jpg);
    background-repeat: no-repeat;
    }
    #header_img {
    height: 134px;
    background-color: green;
    }
    #info_content {
    padding: 0;
    margin: 0;
    margin-left: 320px;
    background-image: url(http://www.lcc.lt/people/janis/images/title_line.jpg);
    background-repeat: no-repeat;
    background-position: top;
    }
    #title {
    margin: 0;
    padding: 0;
    }
    #text {
    padding: 5px 80px 5px 60px;
    }
    #direction {
    text-align: right;
    padding: 10px 50px 0 0;
    }
    #menu {
    float: left;
    width: 300px;
    height: 240px;
    margin: 0;
    margin-right: 0;
    padding: 160px 0 0 20px;
    background-image: url(http://www.lcc.lt/people/janis/images/main_table_.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    background-color: pink;
    }
    * html #menu {width: 320px; w\idth: 300px;height:400px;he\ight:240px}
    /* Outside decorations */
    #deco_left {
    float: left;
    height: 536px;
    width: 115px;
    margin: 0;
    margin-right: 0;
    padding: 0;
    background-image: url(http://www.lcc.lt/people/janis/images/deco_left.gif);
    background-repeat: no-repeat;
    background-position: center;
    }
    * html #deco_left {margin-right:-3px}
    #deco_right {
    float: right;
    height: 536px;
    width: 115px;
    margin: 0;
    margin-left: 0;
    padding: 0;
    background-image: url(http://www.lcc.lt/people/janis/images/deco_right.gif);
    background-repeat: no-repeat;
    background-position: center;
    }
    * html #deco_right {margin-left:-3px}
    #deco_bottom {
    clear: both;
    height: 50px;
    padding: 0;
    margin-top: 0;
    background-image: url(http://www.lcc.lt/people/janis/images/deco_bottom.gif);
    background-repeat: no-repeat;
    background-position: center top;
    }
    /* HACKS */
    .clearfix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    </style>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>Pokervegas : Casino</title>
    </head>
    <body>
    <div id="frame"> 
    <div id="deco_left">&nbsp;</div>
    <div id="deco_right">&nbsp;</div>
    <div id="content" class="clearfix"> 
    	<div id="container"> 
    	 <div id="header"> 
    		<div id="header_img"></div>
    	 </div>
    	 <div id="menu"><img src="http://www.lcc.lt/people/janis/images/menu.gif" alt="" border="0" usemap="#Map" /> 
    		<map name="Map" id="Map">
    		 <area shape="rect" coords="26,65,134,91" href="restoranas.html" alt="Restoranas" />
    		 <area shape="rect" coords="26,177,126,203" href="kontaktai.html" alt="Kontaktai" />
    		 <area shape="rect" coords="26,151,172,174" href="darbas.html" alt="Siulome darba" />
    		 <area shape="rect" coords="26,124,133,146" href="kaip_zaisti.html" alt="Kaip zaisti" />
    		 <area shape="rect" coords="26,94,114,121" href="pramogos.html" alt="Pramogos" />
    		 <area shape="rect" coords="26,11,98,34" href="kazino.html" alt="Kazino" />
    		 <area shape="rect" coords="50,38,153,47" href="losimu_sale.html" alt="Losimu sale" />
    		 <area shape="rect" coords="50,50,143,59" href="kortu_sale.html" alt="Kortu sale" />
    		</map>
    	 </div>
    	 <div id="info_content"> 
    		<div id="title"><img src="http://www.lcc.lt/people/janis/image...e_pramogos.gif" alt="Pramogos" width="198" height="84" /></div>
    		<div id="text"> <img src="http://www.lcc.lt/people/janis/image...kortu_sale.gif" alt="" width="168" height="22" style="padding-bottom: 10px;" /><br />
    		 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
    		 eirmod tempor invidunt ea takimata sanctus est Lorem ipsum dolor sit 
    		 am et. Lorem ipsum dolor sit amet, <br />
    		 <br />
    		 consetetur sadipscing elitr, sed diam non umy eirmod tempor invidunt 
    		 ut labore et dolore magna aliquyam erat, sed d iam voluptua. At vero 
    		 eos et accusam et justo duo dolores et ea rebum. St et clita kasd gubergren, 
    		 no sea takimata sanctus est Lorem ipsum dolor si t amet. Lorem ipsum 
    		 dolor sit amet, <br />
    		 <br />
    		 consetetur <a href="#">sadipscing</a> elitr, sed diam nonumy eirmod 
    		 tempor invidunt ut labore et dolore magna aliquyam erat, s ed diam voluptua. 
    		 At vero eos et accusam et justo duo dolores et ea rebum . Stet clita 
    		 kasd gubergren, no sea takimata sanctus est Lorem ipsum do lor sit amet. 
    		</div>
    		<!-- end of id='text' -->
    		<div id="direction"><a href="#"><img src="http://www.lcc.lt/people/janis/image...ction_back.gif" alt="Atgal" width="77" height="49" border="0" /></a><img src="http://www.lcc.lt/people/janis/image...ion_middle.gif" alt="" /><a href="#"><img src="http://www.lcc.lt/people/janis/image...ction_next.gif" alt="Toliau" width="67" height="49" border="0" /></a></div>
    	 </div>
    	</div>
    </div>
    <div id="deco_bottom">&nbsp;</div>
    </div>
    <!-- end of id='frame' -->
    </body>
    </html>
    You also had some strange box model sizing for the broken box model.

    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my goodness, where do you learn all that stuff!?!?!
    and THanx, it did help!
    - janis

  4. #4
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btw....what about the broken box model? I am not sure if I can see the problem. I used Layout-o-Matic www.inknoise.com/experimental/layoutomatic.php to create the main layout and that's what it gave me.

    and another question: those highlighted margin:0
    are they supposed to be deleted? or do they have some significance?

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

    I can't remember what was wrong but it wasn't right. You obvioulsy changed some of the padding values so nothing matched up. Remember padding and borders are added to the elements dimensions in the correct box model but in the broken box modeil they are applied inside the dimensions.

    and another question: those highlighted margin:0
    Can't see any highlighted margin:0 sorry

    All the highlighted code should be added.

    Paul


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
  •