469,353 Members | 2,177 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,353 developers. It's quick & easy.

Gap between divs

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 :)

Jul 21 '05 #1
8 25275
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.
Jul 21 '05 #2
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 -
Jul 21 '05 #3
> 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 :)

Jul 21 '05 #4
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.
Jul 21 '05 #5
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
Jul 21 '05 #6
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.
Jul 21 '05 #7
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
Jul 21 '05 #8
Thanks to everyone who replied, I used Els' solution and the problem is
now fixed.

Many thanks!
Matt :)
Jul 21 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Egon Pasztor | last post: by
2 posts views Thread by David Winter | last post: by
15 posts views Thread by red | last post: by
3 posts views Thread by Marc | last post: by
39 posts views Thread by WindAndWaves | last post: by
12 posts views Thread by meltedown | last post: by
2 posts views Thread by sicapitan | last post: by
11 posts views Thread by dusk | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.