Jump to content


Photo

CSS <div> Problem


  • Please log in to reply
4 replies to this topic

#1 Voodum

Voodum
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 20 May 2006 - 06:08 PM

[a href=\"http://img174.imageshack.us/img174/6529/space4jd.jpg\" target=\"_blank\"]The problem[/a]

Thats the link to a picture of the problem. I dont know why it does it, but it adds the spacing between the divs.
Ive tried putting them on the same line, and making the margin and padding to 0, but I've had no luck so far.

The CSS code is below, and then followed by the html code.

.arttop {
background:url(images/index_08.jpg) repeat-x;
height:70px;
margin:0;
padding:0;
}

.mainbg {
background:url(images/index_10.jpg) repeat-x #FFFFFF;
border-left:#CCCCCC solid 1px;
border-right:#CCCCCC solid 1px;
margin:0;
padding:0;
}

.bar {
background:url(images/index_12.jpg) repeat-x;
height:25px;
margin:0;
padding:0;
}

Now for the html

<div class="arttop">hi</div>
<div class="mainbg">
  <p>hi</p>
  <p>h</p>
  <p>h</p>
  <p>h</p>
  <p>h</p>
  <p>h</p>
</div>
<div class="bar">hi</div>


#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 20 May 2006 - 07:14 PM

At the start of all my CSS code, I tend to use this:
* { margin: 0px; padding: 0px; }
This way, I'm the only one who specifies padding and borders.
Is the background image shorter then the <div> itself? If it is, try making it smaller.
If that doesn't work, try giving either element either a negative top or a negative bottom margin.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 Voodum

Voodum
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 21 May 2006 - 08:30 AM

Negative margins worked a treat! Many thanks. [img src=\"style_emoticons/[#EMO_DIR#]/laugh.gif\" style=\"vertical-align:middle\" emoid=\":laugh:\" border=\"0\" alt=\"laugh.gif\" /]

#4 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 21 May 2006 - 11:35 AM

rather than use negiyive margins reduce the height of your .arttop class by 2 or 3 pixels as I think you have set the height too high or something and so you get that 2 or 3 pixs white line.

#5 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 25 May 2006 - 08:12 AM

If the height might change based on content, you can add a background color to cover up the gab.

It's always a good idea to add a background color of the last pixel of you background image when you repeat-x or y

Something like this

.arttop {
background:url(images/index_08.jpg) repeat-x #186b9f;
height:70px;
margin:0;
padding:0;
}

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users