White space between <div> tags

Problem resolved, thanks for the assistance

Page 1 of 1

5 Replies - 16307 Views - Last Post: 12 March 2009 - 05:04 PM

#1 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

White space between <div> tags

Posted 11 March 2009 - 11:52 PM

I'm using IE7, haven't had a chance to test it in other browsers, but it definitely occurs on IE. I'm creating a page with 3 divs, a sidebar on each side, and a title bar. I've outlined each of them with a 1px border, and given them 0px margin. A margin still occurs between the divs though. Picture is attached.

<html>

<head>

<style type="text/css">
body
{
  margin: 5px;
}

div.sidebar
{
  padding: 0px;
  align: right;
  width: 120px;
  height: 100%;
  margin: 0px;
  border: 1px solid #000000;
}
div.titlebar
{
  padding: 0px;
  align: top;
  height: 100px;
  width: 100%;
  margin: 0px;
  border: 1px solid #000000;
}
div.right 
{
  float:right;
}
div.left 
{
  float:left;
}
</style>

</head>


<body>
  <div class="sidebar left">
	Stupid
  </div>
  <div class="sidebar right">
	Spaces!!!
  </div>
  <div class="titlebar">
	White
  </div>
</body>


</html>

Attached image(s)

  • Attached Image

This post has been edited by e_i_pi: 12 March 2009 - 05:05 PM


Is This A Good Question/Topic? 0
  • +

Replies To: White space between <div> tags

#2 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2990
  • Posts: 10,329
  • Joined: 08-August 08

Re: White space between <div> tags

Posted 12 March 2009 - 05:13 AM

It works in Safari. Perhaps you should use a standards compliant browser.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#3 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: White space between <div> tags

Posted 12 March 2009 - 10:25 AM

CTphpnwb is kind of right, in his rather blunt way :) I find it better to develop in a standards compliment browser (basically anything but IE), and then spend time at the end of the project writing an additional CSS file to support IE.

If I were you, I would be using positioning rather than float do do this. IE can get easily confused by floats, so I try to only use it to make text wrap images etc.

Here is a CSS solution using absolute positioning:

<style type="text/css">
body
{
  margin: 5px;
}

div.sidebar
{
  padding: 0px;
  align: right;
  width: 120px;
  height: 100%;
  margin: 0px;
  border: 1px solid #000000;
}
div.titlebar
{
  padding: 0px 120px 0px 120px;
  align: top;
  height: 100px;
  width: 100%;
  margin: 0px;
  border: 1px solid #000000;
}
div.right
{
  position:absolute;
  top:5px;
  right:5px;
}
div.left
{
  position:absolute;
  top:5px;
  left:5px;
}
</style>



The only changes required was swapping the floats for absolute positioning and adding 120px left and right padding to the title bar.

This post has been edited by thehat: 12 March 2009 - 10:26 AM

Was This Post Helpful? 0
  • +
  • -

#4 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2990
  • Posts: 10,329
  • Joined: 08-August 08

Re: White space between <div> tags

Posted 12 March 2009 - 01:33 PM

View Postthehat, on 12 Mar, 2009 - 12:25 PM, said:

CTphpnwb is kind of right, in his rather blunt way :)

:D
Just wanted to make it clear that IE's problems are because of MS tactics, not their technology. The more web developers who refuse to support those tactics, the better off everyone will be.
Was This Post Helpful? 0
  • +
  • -

#5 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: White space between <div> tags

Posted 12 March 2009 - 04:54 PM

View PostCTphpnwb, on 12 Mar, 2009 - 12:33 PM, said:

View Postthehat, on 12 Mar, 2009 - 12:25 PM, said:

CTphpnwb is kind of right, in his rather blunt way :)

:D
Just wanted to make it clear that IE's problems are because of MS tactics, not their technology. The more web developers who refuse to support those tactics, the better off everyone will be.

Yeah agreed. I have had nothing but headaches using IE. It simply doesn't cut the mustard in terms of browsing. At home I use FF, I find it a much better browser not only for browsing but also developing. Unfortunately, at work, where I do a lot of my programming, we only have IE.

Thanks for the replies guys, I will implement this code, take a look, and get back to you
Was This Post Helpful? 0
  • +
  • -

#6 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: White space between <div> tags

Posted 12 March 2009 - 05:04 PM

Excellent, implemented the code, worked ok, tweaked it so that titlebar had this css:

div.titlebar
{
  margin: 0px 120px 0px 120px;
  align: top;
  height: 100px;
  width: auto;
  border: 1px solid #000000;
}



Works a charm now. Only problem is IE right margin should be 121px not 120px to get it aligned pixel-perfect. I'm willing to cede that anyhow, as I will not be using borders around divs, but using images to get the seemless look, so 1 pixel is hardly going to cause ugliness.

Very much appreciated for the help guys. Last time I made webpages was like 8 years ago, and I used tables. Divs are something I didn't even look into at the time, but I can see that they are vastly superior in many ways for layout.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1