3 replies [Last post]
eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 4 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

Hi,
there is a gap between de tabmenu and the content div. The gap is much bigger in FF than in IE.

The HTML:

Test met horizontaal menu

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer aliquam justo luctus dolor. Phasellus neque magna, dapibus lacinia, adipiscing vel, bibendum quis, nisl. Etiam vel justo. Praesent gravida neque eu ipsum. Etiam sed lorem sed ante aliquam pharetra. Etiam eros metus, scelerisque non, sollicitudin in, condimentum eu, velit. Nulla pharetra pulvinar magna. Sed ut justo non nibh lobortis vehicula. Mauris vitae ligula eu lorem lobortis feugiat. Duis adipiscing. Fusce ultrices augue sed nisl. Nullam nonummy volutpat nunc. Maecenas nisl risus, ultricies ut, suscipit gravida, nonummy ut, turpis. Vestibulum tellus nisl, fermentum nec, ornare ut, imperdiet in, sem. Aenean vel ipsum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer aliquam justo luctus dolor. Phasellus neque magna, dapibus lacinia, adipiscing vel, bibendum quis, nisl. Etiam vel justo. Praesent gravida neque eu ipsum. Etiam sed lorem sed ante aliquam pharetra. Etiam eros metus, scelerisque non, sollicitudin in, condimentum eu, velit. Nulla pharetra pulvinar magna.

Sed ut justo non nibh lobortis vehicula. Mauris vitae ligula eu lorem lobortis feugiat. Duis adipiscing. Fusce ultrices augue sed nisl. Nullam nonummy volutpat nunc. Maecenas nisl risus, ultrices ut, suscipit gravida, nonummy ut, turpis. Vestibulum tellus nisl, fermentum nec, ornare ut, imperdiet in, sem. Aenean vel ipsum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer aliquam justo luctus dolor. Phasellus neque magna, dapibus lacinia, adipiscing vel, bibendum quis, nisl. Etiam vel justo. Praesent gravida neque eu ipsum. Etiam sed lorem sed ante aliquam pharetra. Etiam eros metus, scelerisque non, sollicitudin in, condimentum eu, velit. Nulla pharetra pulvinar magna. Sed ut justo non nibh lobortis vehicula. Mauris vitae ligula eu lorem lobortis feugiat. Duis adipiscing. Fusce ultrices augue sed nisl. Nullam nonummy volutpat nunc. Maecenas nisl risus, ultricies ut, suscipit gravida, nonummy ut, turpis. Vestibulum tellus nisl, fermentum nec, ornare ut, imperdiet in, sem. Aenean vel ipsum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer aliquam justo luctus dolor. Phasellus neque magna, dapibus lacinia, adipiscing vel, bibendum quis, nisl. Etiam vel justo. Praesent gravida neque eu ipsum. Etiam sed lorem sed ante aliquam pharetra. Etiam eros metus, scelerisque non, sollicitudin in, condimentum eu, velit. Nulla pharetra pulvinar magna. Sed ut justo non nibh lobortis vehicula. Mauris vitae ligula eu lorem lobortis feugiat. Duis adipiscing. Fusce ultrices augue sed nisl. Nullam nonummy volutpat nunc. Maecenas nisl risus, ultricies ut, suscipit gravida, nonummy ut, turpis. Vestibulum tellus nisl, fermentum nec, ornare ut, imperdiet in, sem. Aenean vel ipsum.

the CSS:

* {margin:0; padding:0;}
html,body { margin:0; padding:0; background:#fff url(img/body.gif); font-family: verdana, sans-serif; font-size:smaller; color:#666; }

#container{ width:1000px; margin:40px auto; background-color:transparent; font-size:110%; background-color:transparent;}
#header { width:100%; background:transparent url(img/fig1.gif) left bottom repeat-x; height:180px; margin-bottom:20px;}
#leftcol, #rightcol {width:247px;}
#rightcol {float:right; }
#twocols {float:right; width:748px; background-color:transparent;}
#main {width:498px; float:left; background-color:transparent; }
#content {width:100%; background-color:transparent; border-right:1px solid #ccc;border-left:1px solid #ccc;border-bottom:1px solid #ccc; }
#content a {color:#666; text-decoration:none; background-color:yellow;}

h1,h2 {color:#08f; font-size:160%; font-family:"courier new","trebuchet ms", georgia, serif; letter-spacing:1px;}
h1 {color:red;}

#content p, #content ul, #content ol, #content h1, #content h2, #content h3, #content h4,
#leftcol p, #leftcol ul, #leftcol ol, #leftcol h1, #leftcol h2, #leftcol h3, #leftcol h4,
#rightcol p, #rightcol ul, #rightcol ol, #rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4
{
margin:10px;
line-height:160%;
}

/*-------------- topmenu ---------------*/
.topmenu{
margin-top:3px;
padding: 3px 0;
margin-left: 0;
font-size: 10px;
border-bottom: 1px solid #ccc;
list-style-type: none;
text-align: center;
}

.topmenu li{
display: inline;
margin: 0;
}

.topmenu li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #ccc;
border-bottom: none;
background:transparent url(img/nav-bg.gif) repeat-x;
color: #000;
}

.topmenu li a:visited{
color: #2d2b2b;
}

.topmenu li a:hover{
background:transparent url(img/nav-selected-bg.gif) repeat-x;
color: black;
}

.topmenu li a:active{
color: black;
}

.topmenu li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background:transparent url(img/nav-selected-bg.gif) repeat-x;
color: #08f;
}
/*-------------- einde topmenu ---------------*/

img {border:none;}
img a {text-decoration:none;}

Can somebody help me?

Anyone who hates kids can't be all bad.
W.C. Fields

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 9 years 33 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

It has to do with where you

It has to do with where you declared:

#content p, #content ul, #content ol, #content h1, #content h2, #content h3, #content h4, #leftcol p, #leftcol ul, #leftcol ol, #leftcol h1, #leftcol h2, #leftcol h3, #leftcol h4, #rightcol p, #rightcol ul, #rightcol ol, #rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4 { margin:10px; line-height:160%; }

Either add this after, for just the h1, or adjust the above:

#content h1 { margin-top: 0; padding-top: 10px; }

mattrossidesigns.com

eddy
eddy's picture
Offline
Enthusiast
Last seen: 10 years 4 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

I'm ashamed to say I did not

I'm ashamed to say I did not thank you yet for your answer.

Thank you. :blushing:

Anyone who hates kids can't be all bad.
W.C. Fields

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Better late than never

Better late than never Wink

Verschwindende wrote:
  • CSS doesn't make pies