SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Div Spacing

  1. #1
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Div Spacing

    Is there any way to stop the browser from automatically spacing Div's? I've managed to work around it in firefox by giving it a border, but in IE, that doesn't do anything. It seems to only space it if you have text in the div.

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

    I'm not quite sure what you mean exactly

    Everything is under your control with css.

    divs are block elements and just have line breaks at the end to start a new line. The height of that line depends on font-size and line-height and whether the div has padding or margins added to it.

    By default most browsers do not apply padding or margins to div (unlike other elements such as p,h1 etc)

    If you want divs to be closer together then you just set the font-size and line-height accordingly. Ie won't render the height of a div less than the current font-size unless you reduce the font-size also or use overflow:hidden instead.

    I have a feeling that this is not what you are talking about anyway (time for sleep now anyway - back tomorrow)

  3. #3
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, here's snapshots of what I'm talking about:

    FIREFOX:


    INTERNET EXPLORER:

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

    Thanks for the snapshots so that we can see the problem but we would still need to see the css and html to give you an exact answer.

    If some of those elements are images then you may need to set the image to display:block to kill the vertical spacing that gets applied to images. Images are inline elements and are treated as text and are placed on the baseline and not the bottom. Setting them to display:block will cure this but of course will depend whether you need inline elements (images in a row etc) in which case you will probably need to float them instead.

    The horizontal gaps look like you have overstated or incorrectly applied the widths and maybe have not taken into account the broken box model.

    If you could provide a link to the page I could fix it for you in about 10 seconds but at the moment I am just making guesses as there are many things that may be causing this

  5. #5
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I fixed the horizontal gap, but I'm still having problems with the vertical ones. Here's the CSS code (the footer and header images are both 100*600, but the footer is set as a background and the header is set as an image so it can be a link):

    Code:
    #page
    {
    	border: 4px dotted darkgray;
    	width: 600px;
    	height: 706px
    }
    
    body
    {
    	background-color: black;
    }
    img
    {
    	border: 0;
    }
    
    #header
    {
    	width: 600px;
    	height: 100px;
    }
    
    #content
    {
    	background-color: #efefef;
    	height: 500px;
    	width: 600px;
    	border-top: dotted black;
    	border-bottom: dotted black;
    }
    
    #foot
    {
    	background-image: url(../files/images/footer.gif);
    	width: 600px;
    	height: 100px;
    }
    And here's the HTML:
    Code:
    <html>
    <head>
    <link rel="stylesheet" href="styles/style.css"/>
    </head>
    <body>
    <center>
    	<div id="page">
    	<div id="header">
    	<a href="index.html"><img src="files/images/logo.gif"></a>
    	</div>
    	<div id="content">
        <h1>Index</h1>
        <center>
        <a href="asteroids.html"><img src="games/ab/ablogo.gif"></a><br>
        <br><a href="cobra.html"><img src="games/cobra/coblogo.gif"></a><br>
        <br><a href="zetrix.html"><img src="games/zetrix/zetlogo.gif"></a><br>
        </center>
    	</div>
    	<div id="foot">
    	&copy; 2006 Uphoreum <br>
        <?php
            $con = mysql_connect("localhost","anonymous");
            mysql_select_db("grant_db", $con);
            $result = mysql_query("SELECT hits FROM counter");
            $row = mysql_fetch_array($result);
            $newHits = $row[hits] + 1;
            mysql_query("UPDATE counter SET hits = $newHits");
            echo "Hits: " . $newHits;
        ?>  
    	</div>
    	</div>
    </center>
    </body>

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

    Make sure there is no whitespace in the html between the img tags and the surrounding parent div.

    e.g.
    Code:
    <div id="header"><a href="index.html"><img src="files/images/logo.gif"></a></div>
    Also you haven't specified a border-width for the border.

    Code:
    #content
    {
    background-color: #efefef;
    height: 500px;
    width: 600px;
    border-top:1px dotted green;
    border-bottom:1px dotted green;
    }
    Also, if you are designing without a doctype then the height of that element will be 2 pixels shorter than other browsers due to the fact that ie6 will be in quirks mode and using the broken box model.

    You can also try setting the image to display:block as mentioned before.

    Code:
    img {border:none;display:block}

  7. #7
    SitePoint Enthusiast Uphoreum's Avatar
    Join Date
    Jul 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally, I got it all working! Thanks for all the help!


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
  •