5 replies [Last post]
unklejman
Offline
newbie
Last seen: 6 years 12 weeks ago
Joined: 2008-05-05
Posts: 3
Points: 0

Hi, I'm still pretty new at css and this one thing is having me pull my hair out. It is very simple, or it should be. I have a container div, with two divs inside. One to hold an image, and one to hold a horizontal set of floating divs containing images that will be the navigation. I have set all margins and padding to 0 but there still remains a space between these divs.

http://www.923sm.com/musicinmecamp/

HTML:

Untitled Document




The Music in Me Camp



My css:

*{ margin:0; padding:0}.

#body {
margin-left: -450px;
left: 50%;
position: absolute;
width: 900px;
top: 0px;
}
#body #graphic {
position: relative;
top: 0px;
margin: 0px;
padding: 0px;
}

#body #menu {
position: relative;
width: 900px;
top: 0px;
margin: 0px;
padding: 0px;
}
#body #menu .menu_item {
float: left;
position: relative;
margin: 0px;
padding: 0px;
height: 91px;
display: inline;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
background-color: #2A42B0;
margin: 0;
padding: 0;
}

img {
border-style: none;
}

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 4 years 50 weeks ago
Kansas City Metro
Joined: 2007-10-18
Posts: 188
Points: 0

DIVs automatically add some

DIVs automatically add some space, so you will have to use negative margins to remove the space. 0px won't do it. For example,
margin-top: -5px;
or
margin: -5px 0 0 0;

~Soundscape
www.kenlange.com

unklejman
Offline
newbie
Last seen: 6 years 12 weeks ago
Joined: 2008-05-05
Posts: 3
Points: 0

I did what you said and it

I did what you said and it worked. Then you know what is strange? I actually had to add 5 pixels on the other pages... I really do not understand why css does things like that.

EDIT: after viewing the interior pages in IE6, there are spaces above and below the menu.

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 4 years 50 weeks ago
Kansas City Metro
Joined: 2007-10-18
Posts: 188
Points: 0

There's a bug in IE6, where

There's a bug in IE6, where it doesn't allow for space in code. So this:


The Music in Me Camp


Should look like the following to get it to work in IE6:

The Music in Me Camp


No space between the end of the DIV and the beginning of the image tag, or between the end of the image tag, and the beginning of the /DIV tag. Gotta love IE!

There might be another spacing problem below that for IE6, but I'll let you figure it out. {~;

~Soundscape
www.kenlange.com

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 min 31 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

See Mysterious Gaps under

See Mysterious Gaps under Images.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

unklejman
Offline
newbie
Last seen: 6 years 12 weeks ago
Joined: 2008-05-05
Posts: 3
Points: 0

Thanks for all the help. I

Thanks for all the help. I will try that method if it pops up again, as it is everything is correct. I really just wish for consistency. :shrug: