Gap between divs

[mattbostock]

URL: http://www.drfunkenstein.net/
Username: ciwas
Password: password

Hi,

I'm having difficulty with getting the header image (top.png,
background of div#container) to stay next to div#main - at the moment
there's a large gap between the two. The problem is visible in IE and
Firefox.

If I set 'border: 1px solid;' for div#main then the gap disappears, but
obviously that's not a useful fix as I don't want a 1px black border
there.

My XHTML and CSS are both valid. Any ideas would be much appreciated,
thanks in advance!

Best regards,
Matt :)

[Harlan Messinger]

ma*********@gmail.com wrote:

URL: http://www.drfunkenstein.net/
Username: ciwas
Password: password

Hi,

I'm having difficulty with getting the header image (top.png,
background of div#container) to stay next to div#main - at the moment
there's a large gap between the two. The problem is visible in IE and
Firefox.

If I set 'border: 1px solid;' for div#main then the gap disappears, but
obviously that's not a useful fix as I don't want a 1px black border
there.

Did you try border: none?

--
My wives and I support traditional marriage.

[Els]

wrote:

URL: http://www.drfunkenstein.net/
Username: ciwas
Password: password

Hi,

I'm having difficulty with getting the header image
(top.png, background of div#container) to stay next to
div#main - at the moment there's a large gap between the
two. The problem is visible in IE and Firefox.

If I set 'border: 1px solid;' for div#main then the gap
disappears, but obviously that's not a useful fix as I
don't want a 1px black border there.

My XHTML and CSS are both valid. Any ideas would be much
appreciated, thanks in advance!

You have this in your CSS:
ul#mainNav{
display: block;
padding: 0px;
text-indent: 0px;
}

ul#mainNav li{
display: block;

etc.

But the <ul> in the HTML doesn't have id 'mainNav', but class
'mainNav'. (the id 'mainNav' is already taken by the parent
div of that <ul>.

The space between the divs is the top margin of the <ul>, so
if you change the above piece of CSS to this:

ul.mainNav{
display: block;
padding: 0px;
text-indent: 0px;
margin-top:0px
}

ul.mainNav li{
display: block;

etc.

The gap goes away.
(only tested in Firefox, but I guess IE reacts the same)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[mattbostock]

> ma*********@gmail.com wrote:

I'm having difficulty with getting the header image (top.png,
background of div#container) to stay next to div#main - at the moment there's a large gap between the two. The problem is visible in IE and Firefox.

If I set 'border: 1px solid;' for div#main then the gap disappears, but obviously that's not a useful fix as I don't want a 1px black border there.

Harlan Messinger wrote: Did you try border: none?

Thanks for your reply Harlan,

Yes but the gap didn't disappear; it acted as though there was no
border at all. I tried using a 1px border with style of 'none' (pretty
much the same as what you suggested):

border: 1px black none;

Thanks,
Matt :)

[Stanis³aw Ma³olepszy]

02/14/2005 05:11 PM, Els:

The gap goes away.

Why does adding the border result in the same thing? I've never managed
to get it.

Regards,
Sta.

[Els]

Stanis³aw Ma³olepszy wrote:

02/14/2005 05:11 PM, Els:

The gap goes away.

Why does adding the border result in the same thing? I've
never managed to get it.

I guess it's a bug in fact, but the border restricts the passing
of margins. In a way, that's what most borders do, stop things
from passing :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Shakin' Stevens - What Do You Want To Make Those
Eyes At Me For

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, =?ISO-8859-
2?Q?Stanis=B3aw_Ma=B3olepszy?= wrote:

02/14/2005 05:11 PM, Els:

The gap goes away.

Why does adding the border result in the same thing? I've never managed
to get it.

Margin collapsing, I would guess.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Jan Roland Eriksson]

On Tue, 15 Feb 2005 16:45:32 +0100, Stanis³aw Ma³olepszy
<ni*@podam.i.kropka> wrote:

02/14/2005 05:11 PM, Els:

The gap goes away.

Why does adding the border result in the same thing?
I've never managed to get it.

Most probably a result of "Braden's Mantra", which effectively stipulate
that it is impossible to know for sure what settings are in effect in a
randomly selected browsers default style sheet.

If any CSS property:value assignment is critical for a presentational
suggestion, you need to set it your self in your author style sheet.

--
Rex

[Matt Bostock]

Thanks to everyone who replied, I used Els' solution and the problem is
now fixed.

Many thanks!
Matt :)