Menu
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" /> </div>
</div><!-- end #header -->
<div id="main_menu">
<p>Here goes the main menu</p>
<div class="clear_both" /> </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
Unexplainable DIV space
443
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.
94
div {line-height: 1;}
h1, p {margin: 0;}
don't use units for your line height, see: Unitless line-heights for more information,
if you simply put 1.4 then the line height will be 1.4 x the font-size, this should help you get control of your gaps, obviously my code example above absolutely zero's everything and is just an example
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
