div Position / line-hight

[hawkeye]

Hy Folks,

Habe wieder einmal ein Problem. Ich erstelle zur Zeit eine Homepage, zu Testzwecken liegt diese auf Tramondo ...
Die CSS auf: http://test.ia04.ch/css.css

Jemand konnt mir bereits weiterhelfen bezüglich der stlye-tags, mittlerweilen sind aber zwei neue Problem aufgetaucht.

Problem 1: div Position

Und zwar betrifft es die div's linkbar und maincontent, im dreamweaver verschwindet immer ein Teil des maincontents unter dem linkbar div.
Ich kanns mir nicht erklären, bin aber sicher dass es etwas mit meiner css zu tun hat. Wäre cool wenn jemand sagen könnte wie die css in Wirklichkeit aussehen sollte.

#container {
position:relative;
top: 30px;
width: 800px;
background: #FFFFFF;
margin: 0px auto;
border: 0px solid #000000;
text-align: left;
}
#linkbar {
position: absolute;
top: 100px;
height: 590px;
left: 0px;
width: 120px;
background: #322214;
padding: 10px 0px 10px 0px;
text-align: center;
}
#maincontent {
top: 100px;
height: 590px;
width: 660px;
margin-left: auto;
padding: 10px 10px 10px 10px;
color: #DDC488;
background: #3E3728;
font-family: Arial, Helvetica, sans-serif;
}

Problem 2: line-hight

Dass zweite Problem betrifft die Zeilenabstände.
Ich mölchte die Zeilenabstände bei den Links in etwa so haben wie sie im IE8 aussehn, beim Firefox sind sie viel zu eng zusammen. Wenn ich habe eine line-height in die css #linkbar Einfüge wird es im IE8 noch grösser ...
Bin da etwas ratlos.
Zudem beginnt der Text bei der Startseite im linken Bereich zu weit unten, sollte optisch auf der Höhe des Bildes sein, wobei es im Moment beim Firefox weiter unten ist als im IE, trotz line-height formatierung :(

Unter Tramondo ein paar Screenschots ...

Vielen Dank für eure Hilfe


P.S:
Kennt jemand noch eine ähnliche Seite wie Check Browser Compatibility, Cross Platform Browser Test - Browsershots

 

[hawkeye]

Hey Leute,

kann mir niemand helfen? Ich sollte die Page eiegntlich noch heute fertig stellen und komm einfach nicht weiter, auch mit googeln nicht.

 

[_Thor_]

Problem 1 kann ich nicht nachvollziehen, im FF und IE7 passt es.

Problem 2 dürfte daher kommen, weil du für dein Menü <div> und <p> verwendest und vermutlich margin und padding für das <p> nicht auf 0 gesetzt hast.

Besser wäre es allerdings, wenn du dein Menü als Liste auszeichnest

<ul>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>

 

[hawkeye]

Problem 1 kann ich nicht nachvollziehen, im FF und IE7 passt es.

Problem 2 dürfte daher kommen, weil du für dein Menü <div> und <p> verwendest und vermutlich margin und padding für das <p> nicht auf 0 gesetzt hast.

Besser wäre es allerdings, wenn du dein Menü als Liste auszeichnest

<ul>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>

Vielen Dank für deinen Input!

Mein Menu ist jetzt so wie du es gesagt hast, einziges Problem stellt der Opera Browser dar, da steht vor den Menupunkten ein schwarzer Punkt. Wenn du mir da noch einen Tip geben könntest wäre es echt super!

 

[_Thor_]

Das dürfte helfen:

li {list-style-type: none;}

 

[hawkeye]

Das dürfte helfen:

li {list-style-type: none;}

Super! Hat geklappt ;)
Dann schau ich mal, dass ich den Rest auch noch irgendwie in Griff bekomme.

Vielen Danke für deine Hilfe!