;-o

na denn sorry mal, ich bin schon really verblödet !!!!!!
also bitte jetzt zum anschauen unter www.desein.at
die css dats sind hier:
1. index.css [grundstruktur]
2. formate.css [boxes,links, kleinzeug]
3. im mager is noch nichts drin

problemstellung:
ie6.0/win: funzt all auch die hover-zusatzinfos, sowie first-letters als kz der access-keys
ie 5.0/mac: [leider nur 1x bei einer befreundeten agentur reingesehen]
keine first-letters, sowie keine hover-zusatzinfos beim überfahren der links, ausserdem verrutschen die boxes nach rechts, das layout zerschiesst!!!!.
moz 1.4: da schauts schöner als im ie aus, allerdings keine zusatzinfos beim hovern auf der linken site, wohl aber auf der rechten -s sowie beim hovern in der mitte wo kein navi-text is, da erscheinen die pics auch links, allerdings nich die zusatztexte für die navi.
ächz

meine wishlist an euch:
* bitte warum geht grad die linke site nicht im moz/opera?
* lösung für ie/mac [arbeite für eine agentur,die nur macs hat, ich hab keinen ;-(] wie löse ich das desein-zerschiessen,bzw. krieg die hover -effekts dort rein?
* welche buglösung gibts [really simple!!!!!] die alle diese problems löst, oder kurz was ist da mein fehler ?

also 1. index.css:
/*
desein-index
*/
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
color: #fff;
font-family: verdana, tahoma, sans-serif;
text-align: center;/*font-size: 101%;*fuer IE_quirks*/
}

/* mainboxes */
#wrapper {
position: relative;
margin: 20px auto;
width: 600px;
background-color: transparent;
color: #000;text-align: left;/*Aufheben von IE_quirks im BODY*/
border: 0;
background-image: url(pics/l_desein_short.gif);
background-repeat:no-repeat;
background-position: bottom right;
}

#header {
text-align:center;
background-image: url(pics/l_desein_header.gif);
background-position: center;
background-repeat: no-repeat;
background-color: transparent; /*#E3E3E3 [1] */
color: #000;
margin: 0px 120px 20px 120px;
height: 50px;
max-height: 50px;
}

#header a:link, #header a:visited, #header a:hover, #header a:active {
display: block;
width: 100%;
height: 100%;
background-color: transparent;
color: #000;
padding:5px;}
.invis {
display: none;
}

#content {
background-color: #fff;
color:#000;
height: 320px;
padding: 0px 120px 0px 120px;
border: 0;
text-align: left;
margin: 10px 0 0 0;
}

#footer1 {
background-color: transparent;
color: #000;
margin: 0 120px 0 120px;
text-align: center;
height: 30px;
border: 0;
max-height: 30px;
}

formate.css
/*
desein-index_formate
*/

#header #logo {
margin: 10px 0px 0px 10px;
border: 0 none;
}

/* set all to 0 */
h1, h2, h3, h4, p, ul, li {
margin: 0;
padding: 0;
}
/* gültig for 1stpage */
#footer1 p {
font-size: 55%;
vertical-align: baseline;
margin: 0;
padding: 0;
}
.invis, hr {
display: none;
}

img {
border: none;
}


/*1st site naviboxes*/
/*gesamtbox rundherum*/
#box {
border: 0;
background-color: #fff;
text-align: center;
height: 320px;
padding: 0px 15px 0px 15px;
margin: 0;
font:bold 60% arial;
}
/*einzelne boxen: gültiges format für alle*/
#box a {
float: left;
margin: 7.5px 0 7.5px 15px;
padding: 0;
width:45px; height:45px;
color: #000;
text-decoration:none;
text-align:center;
vertical-align: middle;
border: 1px solid white;
max-width:45px; max-height:45px;
}
#box a:visited {
color:#000;
text-decoration:none;
text-transform:none;
border: 1px solid white;
}

#box a:hover {
color:#000;
border:1px solid #C6C3C6;
font-weight: 500;
text-transform: uppercase;
}

#box a:focus {
color:#000; font-weight: 500;
border:1px solid #000;
text-decoration:none;
}

#box a:active {
color:#000; font-weight: 500;
border:1px solid #000;
text-decoration:none;
text-transform: uppercase;
}
/*infoboxen navizusatz unaktiv für alle links*/
#box a .iweb, #box a .ioffice, #box a .itrain,
#box a .iart, #box a .i1klick{
display:none;
}
#box a .iabout, #box a .inews, #box a .iprojekt, #box a .iknow,
#box a .iagb{
display:none;
}
/*infotext bei hover gleiche infos für jeden link*/
}
/*linke seite verticale links*/
#box a:hover .iweb, #box a:hover .ioffice, #box a:hover .itrain,
#box a:hover .iart, #box a:hover .i1klick {
color:#000;
text-decoration:none;
text-align: right;
display:block;
position:absolute;
top:80px;
left:0px;
margin: 0;
padding: 0;
width: 120px;
height: 285px;
border:1px solid;
/*background-image: same positions*/
background-repeat:no-repeat;
background-position:60px 230px;
}
/*rechte seite verticale links*/
#box a:hover .iabout,#box a:hover .inews,#box a:hover .iknow,
#box a:hover .iprojekt,#box a:hover .iagb {
color:#000;
text-align: left;
text-decoration:none;
display:block;
position:absolute;
top:80px;
right:0px;
margin: 0;
padding: 0;
width: 120px;
height: 285px;
border: 1px solid;
background-repeat:no-repeat;
background-position: 5px 230px;
}
/*bild-deco bei mouse over linke site*/
#box a:hover .ialge1, #box a:hover .ialge4,#box a:hover .ialge7,
#box a:hover .ialge6 {
display:block;
position:absolute;
top:80px;
left:0px;
margin: 0;
padding: 0;
width: 120px;
height: 285px;
background-repeat:no-repeat;
background-position: center center;
border:0;
}
/*bild-deco bei mouse over re site*/
#box a:hover .ialge2, #box a:hover .ialge3,#box a:hover .ialge5,
#box a:hover .ialge8 {
display:block;
position:absolute;
top:80px;
right:0px;
margin: 0;
padding: 0;
width: 120px;
height: 285px;
background-repeat:no-repeat;
background-position: center center;
border:0;
}
/*individ. background, h1 f. jeden link + deco-links*/
#box a:hover .iweb {
background-image: url(pics/web.gif);
border-color:#7194b6;
}
#box a:hover .iweb h1 {
background-color: #7194b6;
}
#box a:hover .ioffice {
background-image: url(pics/office.gif);
border-color: #669999;
}
#box a:hover .ioffice h1 {
background-color: #669999;
}
#box a:hover .itrain {
background-image: url(pics/training.gif);
border-color: #8c7d5a;
}
#box a:hover .itrain h1 {
background-color: #8c7d5a;
}
#box a:hover .iart {
background-image: url(pics/art.gif);
border-color: #ff9933;
}
#box a:hover .iart h1{
background:#ff9933;
}
#box a:hover .i1klick {
background-image: url(pics/1klick.gif);
border-color: #666666;
}
#box a:hover .i1klick h1{
background:#666666;
}
#box a:hover .iabout {
background-image: url(../pics/about.gif);
border-color: #ecf1f6;
}
#box a:hover .iabout h1{
background:#ecf1f6;
}
#box a:hover .inews {
background-image: url(../pics/news.gif);
border-color: #c8dfdb;
}
#box a:hover .inews h1{
background:#c8dfdb;
}
#box a:hover .iknow {
background-image: url(../pics/knowhow.gif);
border-color: #ded3c6;
}
#box a:hover .iknow h1{
background:#ded3c6;
}
#box a:hover .iprojekt {
background-image: url(../pics/projects.gif);
border-color:#faebd7;
}
#box a:hover .iprojekt h1{
background:#faebd7;
}
#box a:hover .iagb {
background-image: url(../pics/agb.gif);
border-color: #dcdcdc;
}
#box a:hover .iagb h1{
background:#dcdcdc;
}
/*background-pics für deco-links*/
#box a:hover .ialge1 {
background-image: url(../pics/alge1.gif);
}
#box a:hover .ialge2 {
background-image: url(../pics/alge2.gif);
}
#box a:hover .ialge3 {
background-image: url(../pics/alge3.gif);
}
#box a:hover .ialge4 {
background-image: url(../pics/alge4.gif);
}
#box a:hover .ialge5 {
background-image: url(../pics/alge5.gif);
}
#box a:hover .ialge6 {
background-image: url(../pics/alge6.gif);
}
#box a:hover .ialge7 {
background-image: url(../pics/alge7.gif);
}
#box a:hover .ialge8 {
background-image: url(../pics/alge1.gif);
}
/*formatierung header, absätze info*/
#box p{
font:100% verdana;
color: #000;
text-decoration:none;
text-transform: none;
text-align:justify;
margin:5px;
padding-bottom:5px;
border-bottom: 1px dashed #000;
}
/*first-letter: kennzeichnung access-keys*/
a:first-letter {
font-weight: 800; font-size: 120%;
}
/*gleiche formatierung für alle info-elements*/
#box p:first-letter {
font: 800 110%;
}
#box h1:first-letter {
font: 900 130%;
}
#box h1{
font:700 110% verdana;/*bezogen auf elternelement in hauptbox*/
color:#000;
text-decoration:none;
margin: 0;
padding:3px;
border: 0;
}
#box ul{
list-style: square inside;
text-decoration:none;
text-transform:none;
}


so, jetzt bin ich schon neugierig auf euer antworten- komme mir ganz schön blöd vor, irgendwas hab ich nicht geschnallt. )
_________________
all what desein can be

__________________
all what desein can be

Wenn Du demnächst Deine POSTing bitte auch als CODE formatieren könntest

Pseudo-Elemente und Classes für A-Tag funktionieren so:

__________________
</ulle>

hi ulle

hUUUUUUUUUU da habe ich mich wohl gleich bei euch blamiert?-
löst das auch die angeführten probleme mac/win/moz?



Ich hab auch schon gedacht, die boxes mit einer weissen border von 1px zu versehen damit beim hovern keine änderung der abstände eintritt,
bzw die boxes ohne margin-left abstand zu definieren sondern mit 0 und als background ein jpg mit dem farbigen viereck sowie dem rand alles im bild inkludiert einzufügen...
was meinst du..... in ergänzung zur richtigen def der pseudos & classes ...?

thx for reply

__________________
all what desein can be

sorry hab grad nicht die zeit mich da reinzudenken, aber ich muss ulle korrigieren. dein code ist in dem fall schon richtig.

denn
bezieht sich auf den span mit der class 'iknow' in dem link in #box:
da opera die linken hovers auch nicht anzeigt vermute ich, dass du ne unsauberkeit im code hast und es kein bug von mozilla ist.

Oh - hatte ich nicht gesehen........

liegt mit daran dass auch ich mich nicht in solch langen QuellCode denken will.

Wenn alle hier nur die Problemstellung in ein einfaches Script 'tüten' würden, und dieses überschaubare Script posten, wäre es lustvoller....

Außerdem erkennt man so häufig schon die eigenen Fehler


Habe hier noch einen Link für Dich, evtl. hilft dieser ja weiter.

http://www.madaboutstyle.com/tooltip2.html

__________________
</ulle>

hi ulle,
sorry für den langen code, aber ich hoffte mir so ein paar verbesserungsvorschläge einhandeln zu können, da ich immer ewig
lange herumtüftle und manchmal zukompliziert denke.

thanx 4 the link - ich denke die z-index variante probier e ich aus, wann ich wieder zeit habe mit der site zu spielen - im moment quälte mich ja ein wichtigeres problem.

marioN

__________________
all what desein can be