SitePoint Sponsor

User Tag List

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

    width and images don't fit

    The best way to show the problem is to see http://www.logsol.lt/test.html in IE. You will see that in IE (6) those images just don't fit.

    Code:
    <something that activates the quirks mode>
    <!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" />
    <title>test</title>
    <style type="text/css">
    <!--
    html body {
    	padding: 0;
    	margin: 20px 0 0 0;
    	font: 11px Arial, Helvetica, sans-serif;
    	color: #133258;
    	background-color: #fff;
    }
    
    #container {
    	width: 700px;
    	\width: 720px;
    	w\idth: 700px;
    	background-image: url(bg.gif);
    	background-repeat: repeat-y;
    	margin: 0;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 0
    	}
    
    #banner {
    	padding: 0;
    	margin-bottom: 0px;
    	border-bottom: 3px solid #3D72B6;
    	background-color: #3D72B6;
    	}
    
    #header {
    	height: 111px;
    }
    
    #headerRight {
    	margin-left: 167px;
    	}
    
    #headerLeft {
    	float: left;
    	width: 167px;
    	\width: 167px;
    	w\idth: 167px;
    	margin: 0;
    	margin-right: 0;
    	padding: 0;
    	background-color: red;
    	}
    -->
    </style>
    </head>
    <body>
    
    <div id="container">
    
    <div id="banner">
    
    <div id="header">
    <div id="headerLeft"><img src="logo.gif" alt="Logistokos Sprendimai" width="167" height="111" /></div>
    <div id="headerRight"><img src="testhead.jpg" alt="" width="533" height="111" /></div>
    </div>
    
    </div>
    
    </div> <!-- end of div id="container" -->
    
    </body>
    </html>
    I don't have any padding or any borders, so, broken box model is out. But what is the problem then??

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

    Its Ie's 3 pixel jog. Have a look at the FAQ which explains what is happening but here is just the solution.
    Code:
    * html #headerLeft{margin-right:-3px}/* 3 pixel jog*/
    * html #headerRight {margin-left: 164px;}/* ie adds 3 pixels back on*/
    Add that code at the end of the stylesheet.

    Another way to defeat the 3 pixel jog would have been to float both images and then they would fit ok. Its only static content alongside floats that suffer from the 3 pixel jog.

    BTW whats this code!!
    Code:
    width: 700px;
    	\width: 720px;
    	w\idth: 700px;
    You have no padding/borders to take care of so why have you give ie5.x 20px more width. As you have forced quirks mode (for some reason I'm sure you know why ) then the above box model hack won't work anyway. In quirks mode ie6 uses the broken box model in the same way that ie5 and 5.5. do and therefore ie6 needs the same dimensions as them. However IE6 can read this w\idth (even in quirks mode) and feeds itself back the wrong value.

    If you are unsure of what I mean then also have a look at the FAQ on the broken box model as all is explained in detail

    Hope that helps anyway.

    Paul

  3. #3
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx. I'm just trying to learn things and therefore at the moment I have a lot of info in my head, but bits from everything and not fully all. So, maybe I will post all my code later here to see what I can improove. Can I do that?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can I do that?
    By all menas post your code but a specific question or problem should be asked rather than saying whats wrong with this etc..

    If you make your query specific then you'll get much better answers

    Paul

  5. #5
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, this is page
    and this is css

    questions:
    1) where the correct place for class "clearfix" is?
    2) Do I have all the hacks correct?
    3) how to get rid of the space b/w yellow and greed fields?

    note: I have left the color boxes so that you could see the layout better.

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

    1) You more or less have it in the right place except that you won't need it because you have content after your floats that you can add clear:both to anyway. You only need extra divs with clear:both (or the clearfix) when you have no content that follows a float within the same parent. When you have content that follows a float you can simply clear that content and no fixes are needed at all.

    2) You don't need the three definitions that are all the same where you have included backslashes but the widths are all the same! If they are all the same then why are you trying to hack them lol

    3) You need to reduce the margin-right in this duplicate style. You hava accounted for it once higher up in the code but then you have redefined it here for some reason.


    Code:
    /* Hide from IE5-mac. Only IE-win sees this. \*/
     
    * html #content_text {
    height: 1%;
    margin-left: 157px;/* you had 160px*/ }
    /* End hide from IE5/mac */
    Heres the whole code with all the unnecessary styles taken out and a couple fixed
    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">
    /* 
    Logistokos Sprendimai <www.logsol.lt>
    author: Janis Lanka
    company: e|motion <www.emotion.lt>
    */
    html,body {margin:0;padding:0}
    body {
    padding: 0;
    margin: 20px 0 0 0;
    font: 11px Arial, Helvetica, sans-serif;
    color: #133258;
    background-color: #fff;
    }
    #container {
    width: 700px;
    background-image: url(http://www.logsol.lt/bg.gif);
    background-repeat: repeat-y;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0
    }
    #banner {
    padding: 0;
    margin-bottom: 0px;
    border-bottom: 3px solid #3D72B6;
    background-color: #3D72B6;
    }
    #header {height: 111px;}
    #headerRight { float: left;}
    #headerLeft {
    float: left;
    width: 167px;
    margin: 0;
    margin-right: 0;
    padding: 0;
    }
    #menu {
    height: 18px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background-color: brown;
    }
    * html #menu {height:22px;he\ight:18px}
    #menuRight {
    float: left;
    text-align: center;
    padding-bottom: 1px;
    }
    #menuLeft {
    float: left;
    width: 161px;
    border-right: 2px solid #fff;
    margin-right: 0;
    padding: 0;
    background-color: yellow;
    font-size: 1px;
    }
    * html #menuLeft{
    width:163px;/*for ie5.x win */
    w\idth:161px;/*for ie6*/
    }
    #sidebar {
    float: left;
    width: 160px;
    margin: 0;
    margin-right: 0;
    padding: 0;
    background: yellow;
    }
    * html #sidebar {margin-right:-3px}
     
    #content_photo {
    float: right;
    width: 140px;
    margin: 0;
    margin-left: 0;
    padding: 42px 10px 20px 20px;
    font-size: 9px;
    }
    * html #content_photo {margin-left:-3px;width:160px;w\idth:140px;}
    #content_photo img {
    display: block;
    border-top: 8px solid #3C72B5;
    }
    #content_text {
    padding: 0 0 20px 15px;
    margin-left: 160px;
    margin-right: 170px;
    background: green;
    }
     
    /* commented backslash mac hiding hack - ie5 fix \*/ 
    * html #content_text {height:1%;}
    /* end hack */ 
    * html #content_text {margin-left: 157px; margin-right: 167px;}
    #content_wide { /* exceptions when content needs to be wide */
    padding: 0 0 20px 15px;
    margin-left: 160px;
    }
    /* start of SUBMENU */
    #submenu_items {
    width: 140px;
    text-align: left;
    padding: 42px 0 20px 0;
    }
    #submenu_items ul {
    margin: 0;
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    }
    #submenu_items li {
    list-style: none;
    margin: 2px 0 2px 4px;
    padding: 2px 0 2px 2px;
    border: 1px solid #C9CDD3;
    }
    #submenu_items li a {
    color: #3C72B5;
    display: block;
    font-size: 11px;
    font-weight: bold;
    background-color: transparent;
    border-left: 3px solid #C32C00;
    padding-left: 8px;
    }
    #submenu_items li a:hover {
    border-left: 3px solid #fff;
    }
    /* end of SUBMENU */
    /* start of FOOTER */
    #footerTop {
    height: 12px;
    padding: 0;
    margin: 0;
    background-color: #3C72B5;
    font-size: 1px; /* to fix the problem of min-height problem in IE */
    line-height: 0; /* to fix the problem of min-height problem in IE */
    clear:both;
    }
    #footerBottom {
    height: 7px;
    padding: 0;
    margin: 0;
    border-top: 2px solid #fff;
    text-align: right;
    background-color: #fff;
    }
    /* end of FOOTER */
    /* start of ELEMENTS */
    img {
    border: 0;
    }
    a {
    text-decoration: none;
    color: #255BA0;
    }
    h2 { /* MAINtitle */
    font-weight: 600;
    margin: 0;
    padding: 12px 0 3px 0;
    font-size: 1.9em;
    color: #255BA0;
    }
    h4 { /* SUBtitle */
    font-weight: 600;
    margin: 0;
    padding: 0;
    font-size: 1.4em;
    }
    /* end of ELEMENTS */
     
    /* MENU */
    #navlist {
    margin: 0;
    padding: 0;
    padding-top: 2px;
    }
    #navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }
    #navlist li
    {
    display: inline;
    list-style-type: none;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0px 10px;
    }
    #navlist a { padding: 0px 20px; }
    #navlist a:link, #navlist a:visited {
    color: #fff;
    background: transparent;
    text-decoration: none;
    }
    #navlist a:hover
    {
    color: #fff;
    background: #4D7EBC;
    text-decoration: none;
    }
    /* HACKS */
     
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
     
    /* Hide from IE5-mac. Only IE-win sees this. \*/
     
    * html #content_text {
    height: 1%;
    margin-left: 157px;
    }
    /* End hide from IE5/mac */
    </style>
    <title>Logistokos Sprendimai</title>
    </head>
    <body>
    <div id="container" class="clearfix"> 
    <div id="banner"> 
    	<div id="header" > 
    	 <div id="headerLeft"><img src="http://www.logsol.lt/logo.gif" alt="Logistokos Sprendimai" width="167" height="111" /></div>
    	 <div id="headerRight"><img src="http://www.logsol.lt/testhead.jpg" alt="" width="533" height="111" /></div>
    	</div>
    	<div id="menu"> 
    	 <div id="menuLeft"><a href="#"><img src="http://www.logsol.lt/contact.gif" alt="contact" width="102" height="18" border="0" style="border-right: 2px solid #fff" /></a><a href="#"><img src="http://www.logsol.lt/languages.gif" alt="" width="57" height="18" border="0" /></a></div>
    	 <div id="MenuRight"> 
    		<ul id="navlist">
    		 <li><a href="#">COMPANY</a></li>
    		 <li><a href="#">SERVICES</a></li>
    		 <li><a href="#">PARTNERS</a></li>
    		 <li><a href="#">CLIENTS</a></li>
    		</ul>
    	 </div>
    	</div>
    </div>
    <div id="sidebar"> 
    	<div id="submenu_items"> 
    	 <ul>
    		<li><a href="#">partnership network</a></li>
    		<li><a href="#">Geografinė padėtis</a></li>
    		<li><a href="#">partnership network</a></li>
    		<li><a href="#">new</a></li>
    		<li><a href="#">Geografinė padėtis</a></li>
    	 </ul>
    	</div>
    </div>
    <!-- end of id="submenu_items" -->
    <div id="content_photo"> <img src="http://www.logsol.lt/testimg.jpg" alt="" width="140" height="140" />comments 
    	if necessary </div>
    <!-- end of id="content_photo" -->
    <div id="content_text"> 
    	<h2>PARTNERIAI</h2>
    	sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
    	ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
    	accusam et justo duo dolores et ea rebum. Stet c lita kasd gubergren, no sea 
    	takimata sanctus est Lorem ipsum dolor sit am et. Lorem ipsum dolor sit amet, 
    	consetetur sadipscing elitr, sed diam non umy eirmod temp<br />
    	<br />
    	<h4>somet more</h4>
    	idunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
    	eos et accusam et justo duo dolores et ea rebum. Stet c lita kasd gubergren, 
    	no sea takimata sanctus est Lorem ipsum dolor sit am et. Lorem ipsum dolor 
    	sit amet, consetetur sadipscing elitr, sed diam non umy eirmod temp
    </div>
    <div id="footerTop">&nbsp;</div>
    <div id="footerBottom"><img src="http://www.logsol.lt/emotion.gif" alt="site developed by e|motion" width="114" height="7" /></div>
    </div>
    <!-- end of div id="container" -->
    </body>
    </html>

    Hope that helps.

    Paul

  7. #7
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanx! I went through and saw some interesting things:

    1) why do you make "html,body" in css to have a seperate margin and padding defenition and then again a body seperate?

    2) is there a difference how the {} sings are, wheather they are on the same like like header {} or the closing } is on the new line. Any difference?

    3) what is that "* html #menu {height:22px;he\ight:18px}" hack? I could read only about width hacks. Do the height hacks also need to be done? Can you tell me a good sournce on height hacks so that I know which browsers it attacks?

    4) when shoudl be the "margin: 0" be used? Or better, when it should NOT be used.

    5) you wrote that "* html #content_photo {margin-left:-3px;width:160px;w\idth:140px;}" Are you correct, b/c padding for that is "padding: 42px 10px 20px 20px;" I would expect it to be 170px than 160px. If i'm wrong, where is the catch?

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

    1) If you say this html,body {padding:20px} then you are likely to get 20px on the html element and 20px padding on the body element giving you 40px padding in some browsers. Setting html and body to zero padding and 0:margins lets you free to just apply some padding/margins to the body only and be consistent between browsers.

    2) no difference I just find it easier to scan when stylesheets are long and there are many single styles etc.

    3) height and width both have to be accounted for in IE as it is the same broken box model problem. However it is usually only noticable on widths because widths are more important than height in most layouts. But to be correct then padding and borders also have to be accounted for in respect to height just as they would with width. Its exactly the same box model problem (See FAQ on broken box model).

    4) You can use margin:0 anywhere you like and you are probably safer to specify it than not. Some elements may need a margin (such as lists which need a margin to show their bullets and have a default margin for this purpose. However some browers use padding for this purpose so you need to control both again.)

    5) sorry that was a typo - you are getting the hang of this now - It should be 170px;

    Hope that helps.

    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
  •