SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why should DIV height affect width/margin/padding?

    Another bit of CSS I've not quite got to grips with. I've used a div as a sort of 'title bar' for each box on a page and another div below it as the box. I've got a span floated to the right in the title bar that contains a little image. Because of this I've set the height of the title bar div to 25px so that the image remains within the div. As soon as I set this though IE5.5/win narrows the title bar div by about 3 pixels. Works fine in Opera and Moz. Not setting the height aligns everything fine.

    The bit I'm talking about are the smaller boxes on the right of the page: http://www.scottishclimbs.com/dev/index_n.php

    Here's the css:

    Code:
    div.right-box-top {
    		margin: 0px 5px 0px 3px;
    		background-color: #6088c4;
    		border-right: 1px solid #000;
    		border-left: 1px solid #000;
    		border-top: 1px solid #000;
    		height: 25px; /* why does this mess up in IE 5.5? */
    		}
    
    span.box-icon {
    		float: right;
    		width: 30px;
      		text-align: right;
    		padding: 3px;
    		}
    and here's a box:

    Code:
    <div class="right-box-top"><span class="box-icon"><img src="threads_icon.gif" alt="Guide Icon" title="Guide Icon" /></span><h1>Last 5 Routes</h1></div>
    <div class="right-box">
    	<ol>
    		<li><a href="a.htm">Brain Drain</a> <span class="date">(Font 7B)</span></li>
    		<li><a href="">Nick Tait</a> <span class="date">(E1)</span></li>
    		<li><a href="">Happy Birthday Mr President</a> <span class="date">(Font 7C)</span></li>
    		<li><a href="b.htm">Lookin Down a Barrel</a> <span class="date">(Font 6C)</span></li>
    		<li><a href="poo.htm">Brains, Shoulders, Knees and Toes</a> <span class="date">(Font 6A)</span></li>
    	</ol>
    </div>
    Any clues why the height should affect this? Hope this is clear.

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this post will give you the answer
    http://www.sitepointforums.com/showt...990#post568907

  3. #3
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you think this is just IE 5.5 messing up the box model? I can't think how setting the height of the div would alter the width. Any tricks to get round the problem? Is it something to do with this box model hack?

    The larger boxes on the left use pretty much the same code but aren't affected like this. Hmmm.

    Thanks,
    Last edited by mserms; Oct 2, 2002 at 04:50.

  4. #4
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got the problem sussed now. It was the IE5/win box model problem that I solved by changing my div rule to this:

    Code:
    div.right-box-top {
    		margin: 0px 5px 0px 0px;
    		background-color: #6088c4;
    		border-right: 1px solid #000;
    		border-left: 1px solid #000;
    		border-top: 1px solid #000;
    		height: 25px;
    		voice-family: "\"}\"";
      		voice-family:inherit;
      		margin: 0px 5px 0px 3px;
    		}
    I had tried something similar before, but hadn't fully understood the hack. Should I need to add something like this:

    Code:
    html>body div.right-box-top {
    		margin: 0px 5px 0px 3px;
    		}
    after the previous div rule? Adding this only servers to make it go a bit strange in Moz 1.1. I understand that this is to make sure the hack doesn't mess up the following rules, but I'm not 100% how it works.


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
  •