Menyen min forandrer seg fra nettleser til nettleser, oppløsning til oppløsning

[skogshund]

Hei!

 

Jeg har en drop-down meny som jeg har brukt laaaaang tid på å style med CSS for å få den til å se kul ut. Når jeg endelig ble ferdig fikk jeg nyss i at den er "utenfor" selve siden min i noen nettlesere (oppløsninger?)

 

Dette vil jeg veldig gjerne ha i orden, men jeg aner ikke hvor jeg skal begynne og hva jeg skal gjøre. Noen som har tips?

 

Her er hjemmesiden min, og menyen er den rett under banneren

 

Her er CSS'en til menyen min:

 

#suckerfishnav {
position: absolute;
top: 234px;
left: 22em;
float: none;
background: url(http://www.skogshund.norblogg.net/wp-content/themes/mistylook/img/tab_bottom.gif) repeat-x bottom;
}
#suckerfishnav, #suckerfishnav ul {
z-index: 1000;
list-style:none;
line-height:20px;
padding:0;
border:0px solid #bbb;
margin:0 auto;
width:780px;
}
#suckerfishnav a {
display:block;
text-decoration:none;
padding:0px 9px;
background: #ddd;
font-family: trebuchet ms;
font-size: 12px;
font-weight: bold;
margin-right: 10px;
border: 1px solid #ccc;
color: #444;
}
#suckerfishnav li {
float:left;
padding:0;
}
#suckerfishnav ul {
position:absolute;
left:-999em;
height:auto;
width:136px;
font-weight:normal;
margin-top:0px;
line-height:2;
border: 0;
border-top:0px solid #ccc;
border-bottom: 1px solid #ccc !important;
}
#suckerfishnav li li {
width:140px;
font-weight:normal;
font-family:verdana,sans-serif;
}
#suckerfishnav li li a {
text-align: left;
width:116px;
color:#666 !important;
font-family: verdana;
background: #f3f3f3;
font-size: 10px;
font-weight: normal;
margin-right: 2px;
border-right: 0;
border-bottom: 0px solid #ccc !important;
border-top: 0 !important;
color: #666;
}
#suckerfishnav li ul ul {
margin:-20px 0 0 130px;
}
#suckerfishnav li li:hover {
}
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
color:#111 !important;
}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#111;
}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
color:#fff;
}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
left:-999em;
}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
left:auto;
background:#bbb;
}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:none;
}

.current_page_item {
float: left;
margin: 0;
}

.current_page_item a, .current_page_item a:hover {
border-bottom: 1px solid white !important;
background: #fff !important;
color: #000 !important;
}

.current_page_item li a, .current_page_item li a:hover {
border-bottom: 1px solid #ccc !important;
color: #000 !important;
}

.page_item a:hover {
color:white;
}

[PatSharpX]

Nå husker jeg ikke helt hvordan det er men det er nok fordi du har valgt px.

Hvis jeg ikke husker feil kan man vel bruke % i stede?

[trygveaa]

Hvis du bruker position: absolute og piksler når du oppgir avstanden plasserer du et element et visst antall piksler fra kanten av siden. Det blir jo feil hvis man har en annen oppløsning på skjermen. Du bør derfor bruke position: relative som plasserer elementet i forhold til elementet det ligger inni.

 

Endre fra

#suckerfishnav {
position: absolute;
top: 234px;
left: 22em;
float: none;
background: url(http://www.skogshund.norblogg.net/wp-content/themes/mistylook/img/tab_bottom.gif) repeat-x bottom;
}

til

#suckerfishnav {
position: relative;
top: -22px;
float: none;
background: url(http://www.skogshund.norblogg.net/wp-content/themes/mistylook/img/tab_bottom.gif) repeat-x bottom;
}

Endret 16. mars 2009 av trygveaa

[skogshund]

Takk for raske svar! Har skiftet ut CSS'en nå og spurt folk som bruker andre oppløsninger om tilbakemeldinger.

[Hrodebert]

Kan du ikke bare sette ned oppløsning på din egen maskin å sjekke selv da

[trygveaa]

Eller resize browser-vinduet...

 

Vet ikke om du er klar over det, men nedtrekksmenyen virker ikke i IE6. Nå begynner folk heldigvis å slutte å bruke den, så du får vurdere om du vil legge til støtte for den.

 

Så vidt jeg kan se ser siden din lik ut i alle browserer jeg har testa (Opera, FF, Chrome og IE) så du kan fjerne at den vises best ut i FF.

 

Hvis du har en så høy skjerm at den er høyere enn siden din vil bakgrunnen repeteres, slik at det vises et hvitt felt under siden, og hvis man har en veldig høy skjerm vil overskriften vises på nytt. Du kan se dette selv ved å zoome ut. Hvis man har en smalere skjerm enn siden din vil overskriften komme utenfor siden. Den beste løsningen jeg kommer på er å lage et bilde med bare bakgrunnen, og repetere den nedover. Dette kan godt være lavere enn det bildet du har nå siden bakgrunnen er lik hele veien nedover. Og så ha et separat bilde til overskriften.