SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Space between two <div> tags

    Hello Friends,

    I have a huge problem I can not solve. I have always a space between two div tags. I just cannot find the bug

    View the html/css here
    or here the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       
       <html>
       
       	<head>
       		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
       		<title>Welcome</title>
       		<style type="text/css" media="screen"><!--
       a:link {
       	color: #00888f;
       	text-decoration: underline }
       a:visited {
       	color: #00888f;
       	text-decoration: underline }
       a:active {
       	color: black;
       	text-decoration: none }
       a:hover {
       	color: #2eb6bd;
       	text-decoration: none }
       body {
       	color: #333;
       	font-size: 0.7em;
       	font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
       	line-height: 1.2em;
       	text-align: center;
       	margin: 0 }
       #logo {
       	background-image: url("images/index_01.gif");
       	margin: 0;
       	padding: 0;
       	width: 225px;
       	height: 68px;
       	float: left }
       #centercontent {
       	text-align: left;
       	margin: 0 auto;
       	padding: 0;
       	width: 753px }
       #headermenu {
       	color: #00888f;
       	background-image: url("images/index_02.gif");
       	text-align: center;
       	width: 525px;
       	height: 68px;
       	float: right }
       --></style>
       	</head>
       
       	<body>
       		<!-- Page Center-->
       		<div id="centercontent">
       		
       			<!-- Logo Line-->
       			<div id="logo"></div>
       			<div id="headermenu">
     		 	<a href="#">&uuml;ber uns</a> | <a href="#">Aktuelles</a> | <a href="#">Newsletter</a> | <a href="#">Produkte</a> | <a href="#">Referenzen</a> | <a href="#">Online Shop</a> | <a href="#">Stellenangebote</a> | <a href="#">Kontakt</a></div>
       			<!-- Ende Logo Line-->
       			
     		</div>			
       		<!-- Ende Page Center-->
       	</body>
       
       </html>

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've got a gap because 525 + 225 does not equal 753!

    Either reduce the width of the centercontent div, float the headermenu div left instead of right, or move the end of the menu graphic out of the logo image.

  3. #3
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    You've got a gap because 525 + 225 does not equal 753!
    oh man, thank you a lot!

  4. #4
    Feel my RewiredMind KMxRetro's Avatar
    Join Date
    Jan 2001
    Location
    Exeter, Devon, UK
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a guess (I'm no CSS guru), but have you tried putting
    Code:
       	margin: 0;
       	padding: 0;
    in your #headermenu definition?

  5. #5
    Feel my RewiredMind KMxRetro's Avatar
    Join Date
    Jan 2001
    Location
    Exeter, Devon, UK
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beat me to it...and got it right.

  6. #6
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you, everything works now

    Just one thing: does firefox has a bug while using padding for a div tag? It moves also div tags below the one I am using padding in.
    Last edited by NORRITT; Feb 22, 2005 at 06:05.

  7. #7
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using padding on a div which you have also specified the width of, e.g.
    Code:
    #mydiv {
    width: 500px;
    padding: 10px;
    }
    you should understand how the CSS box model works. In the example above, the overall total width of the div will be 520px; 500px is the inner width of the div, plus 10px on each edge means that the space it actually takes up is 520px wide.
    Last edited by Buddy Bradley; Feb 22, 2005 at 07:07. Reason: clarity

  8. #8
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I understand. So is there a way to put text 10px away from the border other than making inside the div tag an other one? But Internet Explorer still uses 500px, right?

  9. #9
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NORRITT
    ok, I understand. So is there a way to put text 10px away from the border other than making inside the div tag an other one? But Internet Explorer still uses 500px, right?
    If you have a DIV with some text inside (contained in P tags, natch), you have two choices:

    a) Apply 10px padding to the DIV
    b) Apply 10px margin to the P

    If you choose option B, you have no problem. However, if you choose A, then you need to understand the box model, and more specifically how certain browsers implement it incorrectly.

    According to the [correct implementation of the] CSS box model, the total width of an element is:

    WIDTH + PADDING + BORDERS

    So if you have a div defined thusly:
    Code:
    #mydiv {
    width: 250px;
    padding: 50px;
    border: 2px solid #f00;
    }
    The total width it takes up on the page will be:

    250 + (50 * 2) + (2 * 2) = 354px

    EXCEPT in browsers that bork the box model like IE5.x, where the overall width will be whatever you set the CSS width property to be: 250px in our example. This has the effect of making your content (i.e. the bit inside the borders and padding) be smaller than you intended - in this case:

    250 - (50 * 2) - (2 * 2) = 146px

    Best practice is therefore to avoid using padding to space out your elements and try to use margins instead.

    HTH.
    Last edited by Buddy Bradley; Feb 22, 2005 at 08:30. Reason: emphasis/clarity

  10. #10
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a great explenation buddy bradley! Thank you.

    margins + borders = same implementation in all browsers? (mozilla/firefox, IE, opera)?

  11. #11
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NORRITT
    margins + borders = same implementation in all browsers? (mozilla/firefox, IE, opera)?
    Margins are the same in all browsers; but as I explained above, IE5.x will include border widths (as well as padding) when it calculates the dimensions of an element.

  12. #12
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do not like IE

    thank you very much!

  13. #13
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Belgium
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you display a div with borders exactly the same in IE and Firefox? Or is it impossible to make divs, let's say a width and height 250px with border=1, the same size in IE and Firefox?

  14. #14
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ignoring the obvious fact that pixel-perfect identical pages in different browsers is not the be-all and end-all of web design, there are a few ways to 'hack' certain browsers to do the same thing.

    First off, you need to specify which version of IE you're talking about - it's only the version 5 browsers that get the box model wrong, IE6 is fine (except when it's running in quirks mode, which emulates the v5 rendering engine). Google "IE6 quirks mode" for more information.

    If you want IE5.x to display a div exactly the same as Firefox, the most common method (although I don't know why, as it's also the most difficult to remember!) is Tantek Celik's original Box Model Hack. I'm not going to bother typing out a full explanation - go read Tantek's.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •