1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Can't get rid of space between header and navigation DIVs

Discussion in 'CSS' started by Kurt, Oct 3, 2007.

0
  1. #1
    I've been struggling with this for days and can't figure it out. I'm a novice with CSS.

    There is a tiny space between my header DIV and my navigation DIV. (See link for screenshot.)

    http://img358.imageshack.us/img358/4508/headerlf4.jpg

    I've been playing with margin, padding, and border settings to no avail. I read that the "collapsable margin" problem can cause this, but the fix (padding: 1px 0;) didn't fix it.

    Can anyone help? I'm losing my mind. Thank you!

    Here is my HTML:

    
<body>
<div id="wrapper">
	
    <div id="header">
    	<img src="images/global/images/logo.gif" alt="OMC logo" /><img src="images/global/images/logo2.jpg" /> 
    </div>
    
    <div id="navigation">    	
    </div>
    
</div>
</body>
    Code (markup):
    Here is the relevant CSS:

    

body {
   background-color: #000000;
   text-align: center; 
   margin: 0;
   padding: 0;
}

#wrapper {
   background-color:#000000;
   margin-left: auto; 
   margin-right: auto; 
   padding: 0;
   width: 800px; 
}	
			
#header {
   padding: 1px 0; /*problem remains even with padding = 0 */
   margin: 0;
   border: 0;
}
	
#navigation { 
   padding: 1px 0; /*problem remains even with padding = 0 */ 
   margin: 0;
   border: 0;
   background-image: url(images/global/images/tabletop.gif);
   background-repeat: no-repeat;
   height: 52px;
   width: 800px;	
}
    Code (markup):
     
    Kurt, Oct 3, 2007 IP
  2. hellusius

    hellusius Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    padding: 1px 0;
    Code (markup):
    is supposed to be 

    padding: 0 1px;
    Code (markup):
    If you use two values for padding, the CSS places first value as top and bottom values and the second and right and left ;)
     
    hellusius, Oct 4, 2007 IP
  3. Kurt

    Kurt Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The problem remains even with padding (for top and bottom) set to 0. Or padding on all sides set to 0. The problem occurs in both IE7 and Firefox.

    (I had deliberately made the padding: 1px 0 because adding a 1px padding to the top and bottom can often fix the problem I think I have - margin collapsing (e.g., http://complexspiral.com/publications/uncollapsing-margins/). But since it didn't fix it, I may be dealing with something else.)
     
    Kurt, Oct 4, 2007 IP
  4. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ahhhh, ho ho ho. This is a funny one. Ran into it before. Your image in the top div is an inline element, which means it's the same as text, which means that by default, it will add a few pixels to the bottom and top to account for serif and sans serif text. If you make the image a block display, this should solve your problem. don't feel bad, this is a very obscure problem.
     
    Arnold9000, Oct 4, 2007 IP
  5. Kurt

    Kurt Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I have two images in the top div (the main text logo on left, a gif; and the 3 people on the right, a jpg). So when I set the images as block, the image on the right moved below the the image on the left. Then I read about the float property! I assigned the class called "logo" to the image on the left and set the float to left. Everything is lined up and rendering perfectly in both IE7 & Firefox. This is the final CSS:

    #header img {
   display: block; 
   padding: 0;
   margin: 0;
   border: 0;
}

.logo {
   float: left	
}
    Code (markup):
    Thank you so much! I can finally have some peace.

    By the way, I've read that setting padding & margins to 0 is good practice and can avoid some browser problems. Is the same true for borders? Should you also set those to 0 to be on the safe side?

    Kurt
     
    Kurt, Oct 4, 2007 IP
  6. codyrockx

    codyrockx Peon

    Messages:
    33
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    In my experience most browsers don't have borders set to anything but zero as default on most elements so they should cause too much of a problem. Even though, in my code I always reset all of those settings at the top of my css file.
    
* {
    border: 0;
    margin: 0;
    padding: 0;
}
    Code (markup):
     
    codyrockx, Oct 4, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    That would get rid of the natural borders on inputs, fieldsets (I personally zero this out with a different rule), select elements.. why would you want to do that?
     
    soulscratch, Oct 4, 2007 IP
  8. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Why not? Only one line of code. Unless you are doing a lot of forms which will need at least one pixel for it's border.

    Now that your problem is solved and you discovered how to float block elements, and some subtle difference between block elements and inline elements, it's time to do your top images the right, easy way without having to convert your images to block level or having to float them. If a picture is not linked, then you always want to try and make it a background image rather than using the image tag and floats. It's really easy, here's how. Suppose we have two 50px by 50px pictures, one of the left side and one on the right.



    <style>

    * html{
    margin: 0;
    padding: 0;
    border: 0;
    }

    #outerdiv {
    background-image: url(/images/left_or_first_pic.gif);
    background-repeat: no-repeat;
    width: 102px;
    height: 50px;
    }

    #innerdiv {
    background-image: url(/images/right_or_second_pic.gif);
    background-repeat: no-repeat;
    background-position: 0px 52px;
    width: 102px;
    height: 50px;
    }

    </style>
    <div id="containerForTopImageDivs">
    <div id="outerdiv">
    <div id="innerdiv">
    </div>
    </div>
    </div>

    Since all margins, padding and borders are set to 0, there is no space between outerdiv and innerdiv. Both divs have background images. Both have a specific height and width. The height is set for the exact height of the pictures. The width is set to the width of both pics combined, plus any extra space you might want between them. Both are set to "no-repeat" to prevent them from tiling, and therefore displays them as a single image, mimicking the <img> tag. The inner div also has a position spec which represents the distance from the top and left corner of it's containing div. Outerdiv has no position specs because by default, absence of a positioning spec will cause the image to be located at the top left corner of it's containing div (outerdiv), which is where you want it. The innerdiv has a positioning spec so that it's location is offset by the same exact amount of space needed for the first pic, so that the two do not overlap. Sometimes, you can even play around with this and make the two images overlap some if you desire.The inner div's pic will appear on top of the outer div's pic. That's all there is to it. You can use this same technique to produce four rounded corner images for an area as well, instead of having to mess around with the image tag and floats. The best part about it is that it is the proper way to do it according to spec, because these images won't even be bothered to be shown or read to blind people with a screen reader.
     
    Arnold9000, Oct 8, 2007 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I use
    * {
    margin: 0;
    padding: 0;
    }
    img {
    border: none;
    }

    Doesn't eliminate any borders other than the default that some browsers would add to images.

    Arnold's idea is very nice, though one would try to use containers that one already has, like the body and the header for instance. But it is brilliant.
     
    Stomme poes, Oct 8, 2007 IP
  10. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Yeah, I think the p tag would be most appropriate and semantic for general content such as photos. <h2> and the like are for titles (semantically speaking) and divs are technically only used to separate information and clump tag specs together (#div p{.....} but are often used when nothing else will do. Anyway, thanks for the compliment, but I didn't make that up. I comes from what is called the "sliding doors" technique. Also, Darkshadow was the first one in this forum that I saw suggesting to use this. The best part is that it's actually the correct thing to do according to the specs because if a picture is not hyperlinked, then it is considered presentation, not content, and therefore shouldn't be seen by screen readers. It also makes life easy because you have complete, pixel by pixel, absolute positioning control without breaking the model of flexible dynamic flow control. So if you want to tweak a pic by one pixel, it's easy to do without effecting any other elements on the page or any flow control issues. But the best part is that it does not get in the way of search engines by minimizing the mark up on the page. AND, if offers you legitimate techniques for hiding big text that you don't want the user to see but you DO want the search engines to see. That's an entire issue on it's own, but that's the REAL reason that I'm converting all of my usages of the image tag and floats with this technique if the pic is not a hyperlink. So far, I haven't seen a reliable way to hyperlink background images. If that happens, the image tag really will become almost pointless.
     
    Arnold9000, Oct 8, 2007 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    <Kyle's Mom>WhaWhaWhat?!?!?</Kyle's Mom>

    Is a photograph a paragraph? No it is NOT. That's why you use a DIV, span, or just dump it out direct and style it directly.
     
    deathshadow, Oct 8, 2007 IP
  12. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Well divs are a no no as well as they are "supposed" to be reserved for organizing blocks of info and lumping styles together. Why bother to use a span when you want it to be block level? So while we're arguing over nothing, let's create a pic tag and make it block display, even though we will also often have a paragraph of text around the background image in the same area. I didn't mean only for pics, I said general content like pictures and like text.
     
    Arnold9000, Oct 8, 2007 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Actually, what I meant was, in the example html (which I realise is an example), there's a div called outerdiv and one called innerdiv with no content in them, only holding an image. Whereas in real life, there'd hopefully be something like
    div id=header
    and inside that
    h1, p, other stuff

    one one would use those already existing containers for background images.

    I disagree with the "if an image isn't a hyperlink it's not content" though. I make a website about seals, and I have seal photos, they should be sitting in my html as <img src="seals.jpg" width, height, alt="an elephantseal eats a tourist" /> because it is content in this case. The border around the header made of little fishes, though, is clearly presentational.
     
    Stomme poes, Oct 8, 2007 IP
  14. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Yes, now I understand what you meant about the tags. Using the words outerdiv and innerdiv were only used to make the instructions clear and were not suggestions on what element to use or what to call it. The header would be the name of my outermost div that is supposed to contain the two nested divs (or ps or whatever). Also, if a tag is reused at the same nest level within a div, obviously at that point, the tag needs to be named. Often this can be the case.

    As far as presentation vs content, if there is not relevant text embedded as part of the image or if it does not function as a hyperlink, then it would be considered presentation rather than content. But in the case of a brand product, or perhaps seals, and you want the user to see it even with css turned off, then that would be true, one would use the image tag. Sometimes you'll see complanies use all background images, except for any hyperlinked pics, any logos, or any company product photos.
     
    Arnold9000, Oct 9, 2007 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Yeah people mix the two up a lot, and most of the time nobody cares (whether the image is in the html or the css).

    Were I making a business' website, I would usually try to have the logo sitting in the html since I consider it also content, and I can always hide text behind plus add alt text, covering all my buns, but I also see what you see, lots of companies making everything background images.
     
    Stomme poes, Oct 9, 2007 IP
  16. enochfung

    enochfung Active Member

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #16
    Hello, both my head and navigation div's are block-level elements except it's not working. Do you have any suggestions on how I can fix mine? I normally do everything in tables but just this once, I'm giving CSS a shot and it's driving me nuts! Would greatly appreciate any help!

    Edit: I figured it out. In case anyone is struggling with something similar as well... all I did was define the height for the header and navigation div's. There's no need to add display: block; because float: left; transforms the elements into block-level elements.

    Also removed the links so as not to confuse anyone but mostly because of some new member popup.
     
    Last edited: Dec 11, 2009
    enochfung, Dec 11, 2009 IP