Hi. My page contains two divs, one under one. I want those divs to be without space between, but when i use this code on my html document: <div id="1"> </div> <div id="2"> </div> HTML: There is a space between them. i found out that if i use this code: <div id="1"></div> <div id="2"></div> HTML: (without spaces between the <div> to the </div>) There is not space between them. What should i do if i want the divs to be without space between, but still add content into them? Thanks.
In which browser(s) does this space manifest itself? How can you tell? You've shown us the code for an empty window. You do know that you may not start an id token with a numeral, right? cheers, gary
It's happen both in ie and ff. and I can see the space because i gave those IDs size and background color on my Css file. EDIT: The id name on my document is not a number, that was just an Example. Thanks
thanks yarinr... your information was helpful to us but not helpful enough to solve the problem... please be more explicit about the problem... and post the exact html code and css... in case you can provide us the live link of the debug version... it will be great... r
Here is an image that explain my problem: Red- First DIV Blue- Second DIV Up - How i want it to be shown Down- How it's shown My html Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="top"><h1>Logo</h1></div> <div id="page"><p>Text</p></div> </div> </body> </html> HTML: My Css Code: #top { width: 985px; height: 145px; background-color: red; text-align: center; } #page { width: 985px; height: 1000px; background-color: blue; text-align: center; margin-bottom: 15px; margin-right: auto; margin-left: auto; } Code (markup): Thanks
Well I think it is happening because of h1 and p tags. You need to set margin:0; for both of them. #top h1{ margin-bottom:0px; } #page p{ margin-top:0px; } Code (markup):
i think you are experiencing whatever is the default settings of the browser.. i suggest you to use some resets, that can maintain a basic uniformity across the browsers try eric meyer's reset you might also be interested to surf through the meyerweb's css section... it is indeed a good resource
Only tangentially; The p element's margin collapses through the parent div. That's a really bad idea. There may be some element default values that differ (list indents come to mind, but the recent versions of IE and Opera now match the other browsers' values), but if you know which they are, you can normalize the value(s) as desired without wasting time and creating a maintenance issue with your unnecessary zeroing. You could also post the elements that you know of that do differ from browser to browser. Meyer's reset is a hot steaming pile, and that's being generous. See my arguments in this CSSCreator thread. cheers, gary
@gary thanks for showing the darker side of the moon. you are the alpha particle in rutherford's experiment who met the gold nucleus. i think, the meyer reset helps starters to move ahead with some consistency and much required thrust forward... experienced designers dont need "this" reset, they usually come up with their own reset, or standard basic css - or their thumb rules. please tell us more about the ie anomalies (or a link where we can find the behaviour) and fixes listed sequentially. r
B V Raghav, resets help no one; especially tyros. They simply add an extra, unnecessary step. IE is buggy and has limited support for css (IE8 is much better). As for the reset thing, I just don't know of any non-trivial differences among browsers. The cross-browser argument is a strawman, easily destroyed by asking for examples. I've asked many times, and no one has ever responded. :shrug: cheers, gary