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 a CSS transition work “backwards”?

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    How to find a first td in a tr using tr class name in CSS? [duplicate]

    How to match a comment node with the Jsoup selector api?

    How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

    How to change label color with html and CSS without js?

    How to write this 'OR' CSS selector?

    How to do this: A fluid-width parent element, with a fixed-width and a fluid-width child element?

    How to change 1 out of a menu/model thing with css instead of a whole model/menu?

    How do I have a border-bottom on all except the last item

    How to display highlighted sprite

    How to use absolute position relative to parent element

    How to get the min-height of the object when its parent is set to display none?

    How can I make browser scale image frames according to CSS before loading actual images into frames?

    How to set DIV's width based on CSS indexes

    How do prevent my div from spilling outside its parent container?

    How to make outer div inherit height of inner, non-floated divs?

    How can I separate and make a menu with these links in CSS without using unordered lists [closed]

    how to avoid the ID name in css file

    How to add a simple card flip animation?

    CSS: How to prevent div from overlapping parent height or parent border

    How can I use CSS to preserve line breaks in an HTML block?

    If the tabs use all images to show text + icon on each tab, then how to add text to to help search engine to find the keywords on the tabs?

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?

    How can I force CQ5.5 to ignore CSS data-uri-schemes?

    How to change the body background for three different div-s

    How can i get height form window top to my click point(a tag) on window using css or jquery or php?

    How to override css for giving background image?

    How to change the position of Dynamic View's Search bar to the left (CSS CODE)