How to remove an invisible space between div tags


Tags: html,css

Problem :

I have built several web sites and now i am having newbie problem that is driving me nuts...

Here's my code:

<body>
<div id="page">
<div id="page_wrapper">

    <div id="header">
        <h1>Heading 1</h1>
    <div class="clear_both" />&nbsp;</div>
    </div><!-- end #header --> 

    <div id="main_menu">
        <p>Here goes the main menu</p>
    <div class="clear_both" />&nbsp;</div>
    </div><!-- end #main_menu --> 

    <div id="left">
    </div><!-- end #left --> 

And here's my CSS

First i have a CSS Reset template from here: http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css

and then on another file:

body, html {
    font: 10pt Verdana,Arial,sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #333;
}
div {
    line-height: 1.4em;
}
#page {

}
#page_wrapper {

}
#main_menu {

}
#left {

}
div.clear_both {
    margin: 0;
    padding: 0;
    font-size: 0;
    height: 0;
    line-height: 0;
    clear: both;
}

And on the link below there is an image screenshot on which you can see the output... (i am working on a local server)

There is an unexplainable space between the div tags I CANT REMOVE IT and it is driving me nuts... please can someone tell me how to remove it? I have tryed adding a negative top margin but from my previous experience it is not a solution... usualy seting the margin and the padding to 0 was enough... somehow now it is diferent :S

enter image description here

Unexplainable DIV space



Solution :

I've finaly found the problem thanks to all of You but especialy thanks to Notepad++

The problem was caused by the invisible blank spaces (from the SPACE key). I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.

I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.


    CSS Howto..

    How to make an item background visible on overflow?

    How to dynamically alter the CSS of a pseudo element with JQuery?

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    How to draw a lens like circle on mouseover

    How do I add an image directly below a text header?

    How to create CSS internal style sheet in CakePHP

    How does CSS float work when applied to an “ul” element

    jQuery UI Droppable - How to allow only 1 element per drop zone, instead of stacking

    How to css style flexible elements to match their parents

    Google Chrome unresponsive on simple CSS page - how to fix?

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    Android Layout, how to make a radius and border like css

    CSS Question: How to prevent background from being affected by padding?

    How do I keep my footer text from appearing outside my footer

    How to set css class on active menu item using a masterpage?

    How to add text underneath the centered image

    How to insert instance variable as css rule in Rails?

    How to manage CSS files on design A/B test

    How to style a tag for current div with css?

    CSS Fonts: Howto convert multiple TTF files into one file?

    How to Change CSS style of the same element that is NOT Hovered

    how to trigger “onMouseOut” from click

    How to stop text in div pushing other divs down the page?

    How to draw heart with text in middle?

    how to add background images using css in phonegap

    How to make a CSS transition work “backwards”?

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    CSS how do you stretch to fit and maintain the aspect ratio?

    How To Do Multiple Hover On List

    How to line up images in a horizontal row with CSS?