"Kleines" Css Problem

**d3x84** · 16.07.2012, 07:10

Einen wunderschönen guten morgen zusammen,
auf meiner neuen page habe ich in meinem menü im 2 und 3 menüpunkt einen leichten "versatz" wenn ich über die menüpunkte hovere
konkret ergibt sich auf der linken seite ein freier bereich zur border des benachbarten linken menüs

bzw. anders erklärt...
zwischen den li's aus ul.level_1 ist ne lücke

ich kann aber einfach nicht indentifizieren wo es herkommt....
Ich bin mir nicht sicher ob es wirklich durch die anweisungen aus der menü css kommt
oder ob es durch irgendwas übergeordnetes übernommen wird...

hier die url: Link zur Betaseite

basic.css

Code:

body {
    background-color:#C6EFEF;
}

a, body, div, em, input, label, li, ol, p, select, span, strong, td, th, textarea, u, ul {
    font-family:'Open Sans',Tahoma,Verdana,sans-serif;
    color:#333;
}

a, body, div, input, label, li, ol, p, select, td, th, textarea, u, ul {
    font-size:18px;
    line-height:30px;
}

#main h1 {
    display:inline-block;
    margin:15px 0 0;
    padding:0;
    border-bottom:3px solid #6dbbbe;
    font-size:24px;
    line-height:30px;
    font-weight:bold;
    color:#333;
}

#main h2 {
    margin:15px 0 0;
    padding:0;
    font-size:18px;
    line-height:30px;
    font-weight:bold;
    color:#333;
}

#main h3 {
    margin:15px 0 0;
    padding:0;
    font-size:16px;
    line-height:30px;
    font-weight:bold;
    color:#333;
}

a {
    text-decoration:none;
    color:#6dbbbe;
}

#main a {
    text-decoration:underline;
    color:#6dbbbe;
}

#main a:hover {
    text-decoration:underline;
    color:#6dbbbe;
}

a:hover {
    text-decoration:underline;
    color:#6dbbbe;
}

a:active, a:focus {
    outline: none;
    -moz-outline-style: none;
}

img {
    vertical-align:middle;
    border:0px;
}

p, pre, form {
    margin:0;
    padding:0;
}

Css zur Navigation

Code:

#mainmenu {
    width:100%;
    height:100%;
    position:relative;
    overflow:visible;
    z-index:999999;
}

#mainmenu ul {
    margin:0;
    padding:0;
}

#mainmenu ul.level_1 {
    padding-top:10px;
}

#mainmenu ul.level_1 li {
    display:inline-block;
}

#mainmenu ul.level_1 span {
    font-size:24px;
    line-height:30px;
    text-decoration:none;
    color:#fff;
}

#mainmenu ul.level_1 li:hover {
    background-color:#497B7B;
}

#mainmenu ul.level_2 {
    display:none;
}

#mainmenu ul.level_1 li:hover > ul.level_2, #mainmenu ul.level_1 li:active > ul.level_2 {
    position:absolute;
    display:block;
}

#mainmenu ul.level_2 li {
    width:100%;
    display:block;
}

#mainmenu ul.level_1 li.first {
    margin:0 0 0 10px;
    padding-right:10px;
    padding-left:10px;
    border-right:1px solid #fff;
}

#mainmenu ul.level_1 li.first+li {
    margin:0;
    padding-right:10px;
    padding-left:10px;
    border-right:1px solid #fff;
}

#mainmenu ul.level_1 li.last {
    padding-right:10px;
    padding-left:10px;
}

#mainmenu ul.level_2 {
    margin-right:auto;
    padding:10px 15px;
    text-align:left;
    vertical-align:middle;
    background-color:rgba(109,187,186,0.9);
    border:1px solid #D9F7F7;
}

#mainmenu ul.level_2 a, #mainmenu ul.level_2 a:active, #mainmenu ul.level_2 a:focus {
    font-size:18px;
    line-height:32px;
    text-decoration:none;
    color:#fff;
}

#mainmenu ul.level_2 li {
    right:10px;
    position:relative;
    background:url("tl_files/reneboehres4/image/list-style.png") left center no-repeat;
}

#mainmenu ul.level_2 li.first {
    margin:0;
    padding:0 0 0 15px;
    border:0px;
}

#mainmenu ul.level_2 li.first+li {
    margin:0;
    padding:0 0 0 15px;
    border:0px;
}

#mainmenu ul.level_2 li.first+li+li {
    margin:0;
    padding:0 0 0 15px;
    border:0px;
}

#mainmenu ul.level_2 li.first+li+li+li {
    margin:0;
    padding:0 0 0 15px;
    border:0px;
}

#mainmenu ul.level_2 li.first+li+li+li+li {
    margin:0;
    padding:0 0 0 15px;
    border:0px;
}

#mainmenu ul.level_2 li.first+li+li+li+li+li {
    margin:0;
    padding:0 0 0 15px;
    border:0px;
}

#mainmenu ul.level_2 li.last {
    margin:0;
    padding:0 0 0 15px;
}

#mainmenu ul.level_1 li ul.level_2 {
    left:10px;
}

#mainmenu ul.level_1 li+li ul.level_2 {
    left:219px;
}

#mainmenu ul.level_1 li+li+li ul.level_2 {
    left:324px;
}

screen.css

Code:

#wrapper {
    margin-top:150px;
}

.preheader1 {
    left:230px;
    top:-70px;
    position:absolute;
    font-size:20px;
}

.preheader2 {
    left:460px;
    top:-45px;
    position:absolute;
    font-size:20px;
}

.preheader3 {
    left:780px;
    top:-30px;
    position:absolute;
    font-size:25px;
    font-weight:bold;
    color:#fff;
}

#header {
    padding-bottom:5px;
    background-color:#6dbbba;
    border-top:1px solid #497B7B;
    border-right:1px solid #497B7B;
    border-left:1px solid #497B7B;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
}

#afterheader {
    background-color:#fff;
    border-right:1px solid #497B7B;
    border-left:1px solid #497B7B;
}

#container {
    top:0;
    position:relative;
    background-color:#fff;
    border-right:1px solid #497B7B;
    border-left:1px solid #497B7B;
}

#main .inside {
    width:920px;
}

#footer {
    margin-bottom:30px;
    padding-bottom:20px;
    background-color:#fff;
    border-right:1px solid #497B7B;
    border-bottom:1px solid #497B7B;
    border-left:1px solid #497B7B;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
}

.tel {
    left:300px;
    top:70px;
    position:absolute;
    font-size:2.2em;
    font-weight:bold;
    color:#c2eaea;
    z-index:1;
}

.weekend {
    left:285px;
    top:100px;
    position:absolute;
    font-size:1.4em;
    color:#eee;
    z-index:1;
}

.mod_article {
    left:30px;
    top:30px;
    position:relative;
}

.mod_article ul li {
    list-style-type:square;
}

.mod_article p {
    margin-top:10px;
}

.mod_prefooter ul li {
    list-style-type:square;
}

.mod_prefooter {
    margin-left:30px;
}

img {
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    vertical-align:middle;
    border:1 #000000;
}

.img_black img {
    float:right;
    margin:10px 15px 10px 10px;
    border:1px solid #000;
}

.img_green img {
    float:left;
    margin-top:10px;
    margin-right:30px;
    margin-bottom:10px;
    border:1px solid #6dbbbe;
}

.datum {
    left:755px;
    top:75px;
    position:absolute;
    font-size:16px;
    color:#6dbbba;
}

.copyright {
    left:30px;
    top:30px;
    position:absolute;
}

.copyright p, .copyright p a {
    font-size:14px;
    line-height:20px;
}

div.error, p.error {
    margin:0;
    padding:2px 0 0;
    font-size:9px;
    color:#f00;
}

wäre sehr dankbar für hilfe....

**ciaobello** · 16.07.2012, 14:09

HTML-Code:

#mainmenu ul.level_1 li {    display: inline;}

inline anstatt inline-block?

ciaobello

p.s.
Nicht verzagen Firebug fragen

**d3x84** · 16.07.2012, 15:54

hmm wäre sicher ne möglichkeit...
/*edit
<stroke>nachteil von inline ist es leider das ich da padding nach oben und unten nich beeinflussen kann</stroke>
edit*/

es geht doch *g*

wenn ichs floate muss ich die menüs ja ziemlich umbasteln... o.O

jemand ne idee?

**joc** · 16.07.2012, 16:55

Mit welchem Browser denn?
Ältere IE Browser brauchen "display:inline; zoom:1" für inline-block Elemente.
Oder ob es am "line-height" liegt?

**d3x84** · 16.07.2012, 17:18

ich hab etwas herumgebastelt und nun hab ich die menüs in der höhe anpassen können...

**zeratul** · 16.07.2012, 18:35

Wäre noch interessant zu wissen wie du es geschafft hast, ich stehe vor einem ähnlichen Problem.

Bitte, danke ^^

**d3x84** · 16.07.2012, 23:26

Hier der Code zum Menü...
wobei der natürlich noch neet auf bugs getestet ist...

Ich habs im IE9, FF13 und im aktuellen Chrome getestet.
Ich muss halt nochmal schaun wie es im ie8/7 und im safari aussieht

bei ner freundin sieht es irgendwie total seltsam aus ich kann
auhc nicht genau erkennen warum...

ich denke mal es liegt darin das level 1 jetzt inline ist

PS: ul.level_1 sind bei mir keine links sondern alles spans
ich habe es aus der navigationsvorlage herausgeschmissen um eine halbwegs vernünftige
navigation auf smartphones zu ermöglichen
auf android geräten funktioniert es soweit gut
habs mit android 2.3.x und 4.x getestet

auf dem iphone 4s muss ich es nochmal testen ich hab da schon jemand dem ich das handy nen moment mal klauen kann

Code:

#mainmenu {
    width:100%;
    position:relative;
    overflow:visible;
    z-index:999999;
}

#mainmenu ul {
    margin:0;
    padding:0;
}

#mainmenu ul.level_1 {
    padding-top:10px;
}

#mainmenu ul.level_1 li {
    display:inline;
}

#mainmenu ul.level_1 span {
    font-size:24px;
    line-height:30px;
    text-decoration:none;
    color:#fff;
}

#mainmenu ul.level_1 li:hover {
    background-color:#497B7B;
}

#mainmenu ul.level_2 {
    display:none;
}

#mainmenu ul.level_1 li:hover > ul.level_2, #mainmenu ul.level_1 li:active > ul.level_2 {
    position:absolute;
    display:block;
}

#mainmenu ul.level_2 li {
    width:100%;
    display:block;
}

#mainmenu ul.level_1 li.first {
    padding:15px 10px 10px;
    border-right:1px solid #fff;
    margin:0 0 0 10px;
}

#mainmenu ul.level_1 li.first+li {
    margin:0;
    padding:15px 10px 10px;
    border-right:1px solid #fff;
}

#mainmenu ul.level_1 li.last {
    padding:15px 10px 10px;
}

#mainmenu ul.level_2 {
    padding:10px 15px;
    text-align:left;
    vertical-align:middle;
    border:1px solid #D9F7F7;
    background-color:rgba(109,187,186,0.9);
}

#mainmenu ul.level_2 a, #mainmenu ul.level_2 a:active, #mainmenu ul.level_2 a:focus {
    font-size:18px;
    line-height:32px;
    text-decoration:none;
    color:#fff;
}

#mainmenu ul.level_2 li {
    right:10px;
    position:relative;
    background:url("tl_files/reneboehres4/image/list-style.png") left center no-repeat;
}

#mainmenu ul.level_2 li.first {
    margin:0;
    padding:0 0 0 15px;
    border:0px;
}

#mainmenu ul.level_2 li.first+li {
    border:0px;
    padding:0 0 0 15px;
}

#mainmenu ul.level_2 li.first+li+li {
    border:0px;
    padding:0 0 0 15px;
}

#mainmenu ul.level_2 li.first+li+li+li {
    border:0px;
    padding:0 0 0 15px;
}

#mainmenu ul.level_2 li.first+li+li+li+li {
    border:0px;
    padding:0 0 0 15px;
}

#mainmenu ul.level_2 li.first+li+li+li+li+li {
    border:0px;
    padding:0 0 0 15px;
}

#mainmenu ul.level_2 li.last {
    padding:0 0 0 15px;
}

#mainmenu ul.level_1 li ul.level_2 {
    left:10px;
}

#mainmenu ul.level_1 li+li ul.level_2 {
    left:223px;
}

#mainmenu ul.level_1 li+li+li ul.level_2 {
    left:328px;
}

so sieht der spaß bei mir aus

screenshot.jpg

so sieht es bei ner freundin auf ihrem win 7 netbook mit ie9 aus
sehr strange
liegt das an mir oder ihr?!

website.jpg

edit:
Auf ihrem Screenshot sieht man, dass die abgerundeten ecken nicht abgezeigt werden...
sieht hat wohl ie7 oder ie8
da wird das menü auseinander gerupft...
woran liegt das?
ich hasse den internet explorer

falls jemand sieht woram es liegt bitte laut schreien

))