hej derude...
Jeg er ved at lave en ny hjemmeside til vores lokale FDF kreds.
i kan se designet her -->
FDF SÆRSLEVjeg har lavet top menuen med < ul > og < li > tags.
der er så en border i højre side som er hvid. problemet er så at der er et mellem rum mellem den hvide border og til der hvor baggrunds farven starter på det næste link når man hover.
sådan som det er nu når i ser linket.
Dette problem fik jeg løst ved at skrive float:left i < li > taget. dette fungere smut i Firefox. men når man ser det i IE så bliver linkende små og fylder ikke hele topbaren som de skal.
Det gør de dog hvis man tilføjer værdierne:
padding-top:8px;
padding-bottom:8px;
til < li > taget... men så hopper menuen tilgengæld ned under topbaren hvor menuen skal være... er der nogen der har en løsning på mit problem så vil jeg være meget taknemmelig.
Her kommer lige min css fil:
/*##############################################################################
# Fil: style.css #
# Skaber: Kim S. Maritn #
# Info: Denne fil indeholder al css-style til FDF Særslevs hjemmeside! #
# Copyright: © Copyright 2008 - alle rittigheder er forbeholdt FDF Særslev. #
##############################################################################*/
/*######## Genneralt CSS ########*/
html {
background-image: url(images/hojre_side.gif);
background-repeat: repeat-y;
background-position: top right;
}
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
background-image: url(images/venstre_side.gif);
background-repeat: repeat-y;
color: #000000;
}
#container {
width: 800px;
display: inline;
}
/*######## Header ########*/
#main-title {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
letter-spacing: 5px;
text-align: right;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
padding-right: 50px;
background-color: #2A4666;
color: #ffffff;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}
#header-image {
background-color: #4d80b9;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-position: left top;
height: 177px;
border-top: 2px #C73334 solid;
border-bottom: 2px #C73334 solid;
margin-left: 110px;
margin-right:110px;
}
#header-image .image {
background-image: url(images/jens.gif);
background-repeat: no-repeat;
background-position:right top;
height:177px;
margin-right:20px;
}
/*######## Menu ########*/
#navbar {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
padding-top:8px;
padding-bottom:8px;
height:12px;
font-size: .65em;
text-align: left;
margin-top: 0;
font-weight: bold;
background-color:#2A4666;
color: #ffffff;
border-bottom: 2px #C73334 solid;
}
#navbar ul {
margin: 0px;
padding:0;
list-style: none;
border-left:1px #ffffff soild;
}
#navbar li {
display:inline;
margin:0px;
float:left;
}
#navbar a:link, #navbar a:visited {
color: #ffffff;
padding-left:8px;
padding-right:8px;
padding-top:8px;
padding-bottom:8px;
margin:0px;
border-right:1px solid #FFFFFF;
}
#navbar a:hover {
text-decoration: none;
background:#64788F;
padding-top: 8px;
padding-bottom: 8px;
}
/*# Klasser #*/
#tumling a:hover {
text-decoration:none;
background:#FA0000;
}
#pilt a:hover {
text-decoration:none;
background:#01EA1C;
}
#vabner a:hover {
text-decoration:none;
background:#1894FF;
}
#seniorvabner a:hover {
text-decoration:none;
background:#9605CF;
}
#senior a:hover {
text-decoration:none;
background:#FF6600;
}
/*######## Side menuen ########*/
#under-menu {
clear: left;
float: left;
width: 160px;
margin-left:110px;
margin-top:10px;
padding: 0;
font-size: .65em;
border-top:dotted 1px #000000;
border-bottom:dotted 1px #000000;
border-right: dotted 1px #000000;
background-color: #F2F2F2;
}
#menu-title {
font-size: 1.2em;
font-weight:bold;
letter-spacing: 5px;
margin-bottom:5px;
margin-left:5px;
}
#under-menu ul {
list-style: none;
width: 160px;
margin: 0 0 0 0;
padding: 0;
font-size: 1.1em;
}
#under-menu li {
margin-bottom: 4px;
}
#under-menu li a {
font-weight: normal;
margin-left:5px;
height: 20px;
text-decoration: none;
color: #000000;
display: block;
padding: 0 0 0 10px;
border-left: 4px solid #2A4666;
}
#under-menu li a:hover {
background: #eaeaea;
color: #000000;
border-left: 4px solid #64788F;
}
/*######## Hovede Indhold ########*/
h1 {
margin-left: 270px;
margin-right: 110px;
font-size: .8em;
padding-bottom: 3px;
padding-top: 23px;
padding-left: 20px;
padding-right: 0;
color: #000000;
border-bottom: 1px #C73334 solid;
border-left:dotted 1px #000000;
letter-spacing: 5px;
font-weight: bold;
background-color: #F2F2F2;
margin-top: 0;
margin-bottom: 0;
}
#main-text {
margin-top: 0;
margin-bottom: 0;
margin-left: 270px;
margin-right: 110px;
padding-bottom:20px;
font-size: .7em;
line-height: 1.8em;
background-color: #ffffff;
border-left:dotted 1px #000000;
min-height:200px;
_height:200px;
}
#main-text p {
text-align: justify;
margin-left: 20px;
margin-right: 50px;
}
h2 {
padding-bottom: 3px;
padding-right: 0;
color: #000000;
border-bottom: 1px #000000 solid;
letter-spacing: 5px;
margin-left: 20px;
margin-right: 50px;
font-size: 1em;
margin-top: 0;
padding-top: 10px;
}
p, ul, ol, table {
margin-top: 17px;
margin-bottom: 0;
}
ol, ul {
margin-left: 75px;
margin-right: 75px;
}
a:link, a:visited {
text-decoration: none;
font-weight: bold;
color: #ff0000;
}
a:hover {
text-decoration: underline;
}
/*######## Footer ########*/
#footer {
text-align: center;
margin-bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 11px;
margin-top: 0px;
margin-left:110px;
margin-right:110px;
padding-right: 50px;
background-color: #4d80b9;
color: #ffffff;
font-weight: bold;
border-top: 2px #C73334 solid;
border-bottom: 1px #000000 solid;
}
#footer a:link, #footer a:visited {
color: #ffffff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
color: #ffffff;
}
.right {
float: right;
text-align: right;
width: 60%;
}
.left {
float: left;
text-align: left;
padding-left: 5px;
}
#validation {
margin-top:4px;
}
#validation .no-border {
border-style:none;
}
.right h3 {
margin-top: 0px;
font-size: 90%;
}
/*##############
# CSS SLUT #
##############*/ ps. stavefejl er gratis.