SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE pain [Box Model hack]

    Hi guys,

    my webpage comes perfect in firefox but internet explorer renders it improperly.
    See the white space at the right in IE. I think thats because of the box model IE follows. SO i applied a hack to the container element. But still the problem remains.

    Pls chek out
    Code:
    http://www.cse.iitb.ac.in/~mohitz/ideaz/index.htm
    Here's the relevant CSS and the relevant HTML
    Code:
    #container {
     	width:806px;
     	padding:0px;
     	border-left: 3px solid #000000;
    	border-right: 3px solid #000000;
     	line-height: 110%;
     	margin: 0px auto;
    }
    /* IE Hack. IE 6 ignores the following statement */
    html>body #container {width:800px;}
    	 
    .clearfix:after { /* clearing hack for mozilla firefox */
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    }
    .clearfix {
    	display:inline-block;
    }
    /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	 .clearfix {display: block;}
    /* End hide */
     
    #header1 {
    	width:100%;
     	margin: 0px;
    	padding:0px;
    	border:0px;
     	height: 18px;
     	clear:both;
    	float:left;
    	background-color:#5d0001;
    	text-align:right;
    }
    
    #header2 {
    	width:100%;
     	margin: 0px;
    	padding:0px;
    	border:0px;
     	clear:both;
    	float:left;
    	background-color:#FFFFFF;
    }
     
    .buttons {
    	float: left;
    	width: auto;
    	margin-top: 0px;
    	margin-right: 0.5px;
    	margin-bottom: 0px;
    	
     }
    Code:
    <div id="container" class="clearfix">
      <div id="header1"></div>
      <div id="header2"><img src="images/header.jpg" alt="Ideaz 2006" /></div>
      
      <div class="buttons"><img src="images/home.jpg" alt="Home" /></div>
    
      <div class="buttons"><img src="images/overview.jpg" alt="Overview" /></div>
      <div class="buttons_exception"><img src="images/process.jpg" alt="Process" /></div>
      <div class="buttons"><img src="images/guidelines.jpg" alt="Guidelines" /></div>
      <div class="buttons_exception"><img src="images/newsletter.jpg" alt="Newsletter" /></div>
      <div class="buttons"><img src="images/workshops.jpg" alt="Workshops" /></div>
      <div class="buttons"><img src="images/contact.jpg" alt="Contact us" /></div>
      <div id="wrapper" class="clearfix">
          </div>
      <div id="footer">Copyright E-Cell IIT Bombay</div>
    </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry that didnt help.

    I think my question isnt clear. Internet Explorer leaves some space between the 3 px black border and the buttons. Similarily between the header image and the right border. Firefox renders it correctly. I want to remove that space. What should i do?

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to me the problem is not in your header but with your columns.

    Code:
    #left {
    	float: left;
    	background-color:#FFF;
    	margin-top: 5px;
    	width: 160px;
    }
    
    #contents {
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: small;
    	 font-style: normal;
    	 text-align: justify;
    	 margin: 5px 0 0 170px;
    	 background-color:#FFF;
    }
    Try that instead.

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

    First of all you have the box model hack wrong. You should only be giving the broken box model sizes to ie5 and ie5.5.

    use this method instead.
    Code:
     
    #container {
    width:800px;
    padding:0px;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    line-height: 110%;
    margin: 0px auto;
    background-color:#FFFFFF;
    }
    * html #container {width:806px;w\idth:800px} 
    That will sort the width out.

    For the floats you need to kill the double margin bug.

    Code:
     
    #contents {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: normal;
    text-align: justify;
    float: left;
    width:630px;
    margin-left: 5px;
    margin-right: 5px;
    background-color:#FFFFFF;
    padding:0px;
    display:inline;
    }
    Your navigation is 1px too wide and you can't specify .8px as there is no such thing. 1px is the smallest you can get therefore you need to remove the margin-right from the last nav item.

    e.g.

    Code:
    .buttons {
    float: left;
    width: auto;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    display:inline
    }
    .last {margin-right:0} 
    Code:
    <div id="header2"><img src="http://www.cse.iitb.ac.in/~mohitz/id...ges/header.jpg" alt="Ideaz 2006" /></div>
    <div class="buttons"><img src="http://www.cse.iitb.ac.in/~mohitz/ideaz/images/home.jpg" alt="Home" /></div>
    <div class="buttons"><img src="http://www.cse.iitb.ac.in/~mohitz/id...s/overview.jpg" alt="Overview" /></div>
    <div class="buttons"><img src="http://www.cse.iitb.ac.in/~mohitz/id...es/process.jpg" alt="Process" /></div>
    <div class="buttons"><img src="images/guidelines.jpg" alt="Guidelines" /></div>
    <div class="buttons"><img src="images/newsletter.jpg" alt="Newsletter" /></div>
    <div class="buttons"><img src="images/workshops.jpg" alt="Workshops" /></div>
    <div class="buttons last"><img src="images/contact.jpg" alt="Contact us" /></div>
    Hope that helps

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, applying changes suggested by both Paul and tyssen solves the problem.

    But, can someone explain wht was wrong?

    @Tyssen why do i have to use the 170 px margin thing? Why cant i just float it?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    But, can someone explain wht was wrong?
    I thought I already did lol

    Quote Originally Posted by me
    First of all you have the box model hack wrong. You should only be giving the broken box model sizes to ie5 and ie5.5.
    You were giving all ie browers a 806px width when you should have been giving only ie5.+ the 806px width (see faq on the broken box model.)

    Quote Originally Posted by me
    For the floats you need to kill the double margin bug.
    Ie has a bug on the ide of floats that are nearest their containers edge and will double the margin on that side. adding display:inline fixes the bug without harmimg anything else as floats always remain display:block (see faq on floats for more info).

    Quote Originally Posted by me
    Your navigation is 1px too wide and you can't specify .8px as there is no such thing. 1px is the smallest you can get therefore you need to remove the margin-right from the last nav item.
    I don't think that needs any more explanation as the elements were simply too wide.

    Tyssen changed your contents from a float into a static element which resolved the double margin bug. However you would then be subject to the 3 pixel jog (see faq on floats) so I recommend in a 2 column layout that you float both columns.

    Hope that helps


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
  •