2 replies [Last post]
joeri
Offline
newbie
Rotterdam
Last seen: 13 years 11 weeks ago
Rotterdam
Timezone: GMT+2
Joined: 2007-06-28
Posts: 5
Points: 0

The example: http://www.lamberang.info/test/gap.html. And the code again down this post.

There is a vertical gap (assumable 3px) between the MENU & CONTENT and MENU & HEADER. The layout shows perfectly in IE7 / FF2 etc. Just IE6 remains a problem.

So I am stuck... Been reading about the 3px problem, but somehow this does not work for me, as I am NOT using

or any images either. Also tried to set a negative margin or padding, does not work either.

Any help is appreciated! (Also if this means I have to change my CSS totally).
Thanks in advance!

html, body { height: 100%; margin: 0; padding: 0; }

body {
background: #810D1A;
overflow: -moz-scrollbars-vertical;
}

div#container {
position: absolute;
top: 50%;
left: 50%;
height: 600px; /*ie*/
width: 950px;
margin-top: -300px;
margin-left: -475px;
border: 1px #000000 solid;
}

/* Header */
div#header {
background-color: #9400D3;
width: auto;
height: 20px;
margin-right: 0;
border-bottom: 1px solid black;
}

/* Footer */
div#footer {
float: left;
clear: both;
background-color: Red;
width: auto;
height: 20px;
overflow: hidden;
}

/* Ambient Image */
div#vibes {
float: left;
width: 300px;
height: 100%;
background: white;
}

/* Menu */
div#menu {
float: left;
width: 130px;
height: 100%;
background-color: Green;
border-left: 1px solid black;
border-right: 1px solid black;
overflow: hidden;
}

div#content {
background-color: #FFD700;
width: auto;
height: 100%;
margin-right: 0;
}

Vibes
Content

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 19 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try * html

Try
* html #menu{margin-right:-3px;}

joeri
Offline
newbie
Rotterdam
Last seen: 13 years 11 weeks ago
Rotterdam
Timezone: GMT+2
Joined: 2007-06-28
Posts: 5
Points: 0

You are a genious! Thanks! I

You are a genious! Thanks! I tried the negative margin on the left side of the content, never thought of the menu!

The complete code I added to make it all work (for the one interested):

* html #menu{margin-right:-3px;} * html #menu{margin-left:3px;} * html #vibes{margin-right:-3px;}