Problemer med CSS meny.

[howieD]

Noen som kan se hvorfor menyen ser bra ut i IE, mens den ser dårlig ut i Firefox??

 

her er siden:

 

Elling

 

Med firefox flyter menyen for langt til høyre, mens med IE holder den seg innenfor..

Har satt width på menyen til 800px, da #ramme er 820px i bredde, og skyggestreken er 20px...

Men menyen vil ikke få en fast bredde.. Surt

 

 

Håper på svar

 

 

CSS koden (alt ligger i layout.css. Menyen er i #ramme #meny):

Klikk for å se/fjerne innholdet nedenfor

#ramme {

height: 100%;

margin-top:0;

margin-left: 0;

margin-right: 0;

width: 820px;

background: url(../Bilder/sort-linje3.jpg) repeat-y right;

border-left: 1px #999 solid;

float: left;

overflow: hidden;

font: 14px Verdana, Arial, Helvetica, sans-serif;

}

#ramme #topp {

float: left;

height: 119px;

width: 800px;

margin: 0px;

background-image: url(../Bilder/topp2.jpg);

background-repeat: no-repeat;

background-position: left;

margin-top: 0px;

}

#ramme #meny {

width: 800px;

background-color: #ede7d0;

margin: 0;

}

 

#ramme #meny #navcontainer ul

{

margin: 0;

background-color: #b17f5c;

color: White;

font-family: arial, helvetica, sans-serif;

float: left;

width: 800px;

}

 

#ramme #meny #navcontainer ul li { display: inline; }

 

#ramme #meny #navcontainer ul li a

{

background-color: #b17f5c;

color: White;

text-decoration: none;

float: left;

border-right: 1px solid #fff;

padding-top: 0.2em;

padding-right: 1em;

padding-bottom: 0.2em;

padding-left: 1em;

}

 

#ramme #meny #navcontainer ul li a:hover

{

background-color: #c09477;

color: #fff;

}

 

#ramme #gallerimeny {

float: left;

height: 15px;

width: 800px;

margin: 0px;

background-color: #ede7d0;

}

#ramme #innhold {

margin: 0px;

padding-top: 5px;

float: left;

height: 100%;

width: 700px;

padding-right: 50px;

padding-left: 50px;

background-color: #ede7d0;

}

#ramme #bunnstrek {

margin: 0px;

float: left;

height: 2px;

width: 800px;

border-bottom: 1px solid #999999;

background-color: #ede7d0;

}

 

 

Denne HTML delen av menyen blir hentet inn fra en "horisontalmeny.inc"-fil ved hjelp av PHP include:

 

Klikk for å se/fjerne innholdet nedenfor

<div id="navcontainer">

<ul id="navlist">

<li><a href="index.php?s=forsiden" id="current">Forsiden</a></li>

<li><a href="index.php?s=prosjekter">Prosjekter</a></li>

<li><a href="index.php?s=bilder">Bilder</a></li>

<li><a href="index.php?s=ansatte">Ansatte</a></li>

<li><a href="index.php?s=kontakt">Kontakt oss</a></li>

</ul>

</div>

Endret 14. januar 2007 av Haavard82

[Drømmemannen]

Sklir ut i Opera også. Prøv å fjerne <li id="active"> fra html-koden din.

[haugsand]

Fjern float: left; fra #navcontainer ul i første omgang, den er helt unødvendig. Deretter kan du fjerne alle de tomme listeelementene, og prøve deg frem igjen.

[howieD]

Sklir ut i Opera også. Prøv å fjerne <li id="active"> fra html-koden din.

7713309[/snapback]

 

 

Gjort det.

Det ser fortsatt likedan ut.

Snålt.

 

Over min forstand

[howieD]

Nå fjernet jeg float left.

Fjernet de tomme listeelementene.

 

Ser bra ut i IE.

 

Men i Firefox strekker ikke den brune bakgrunnen seg 100%.

[Anders Moen]

Ser bedre ut nå (i Opera), men den ligger fortsatt for langt ut på høyre sida. Altså den brunfargen eller hva det nå enn er for noe

[Drømmemannen]

Et tips er natuligvis å få siden til å validere: http://validator.w3.org/check?uri=http%3A%....no%2Felling%2F

[maZe-]

Hmm.. Jeg ser ikke noe feil nå i FF. Clean side btw. Veldig grei.

[howieD]

Hmm.. Jeg ser ikke noe feil nå i FF. Clean side btw. Veldig grei.

7715913[/snapback]

 

Den ser fortsatt ikke ut i FF slik som den ser ut i IE.. :/

 

Den bør og skal se ut som i IE dersom man ser den i Opera og FF.

 

Jeg fatter det ikke

[Svinat]

Hvorfor bruker du id navlist på ul og active på li?

[howieD]

Noen som kan se hvorfor den brune menyen strekker seg lengre til høyre i FF enn når man ser den i IE?

mystifistisk rett og slett.

Har prøvd det meste nå

[Fløffi]

ff og ie bruker ulike marger (ie setter på no ekstramarger, mens ff gjør det ikke)

 

så du kan stille inn med to verdier, slik at det passer i ie og at det passer i alle andre nettlesere ved å bruke

 

width: 100px !important;

width: 90px;

 

så vil den øverste gjelde for ikke-ie og den nederste for ie håper det hjelper ^^

[howieD]

ff og ie bruker ulike marger (ie setter på no ekstramarger, mens ff gjør det ikke)

 

så du kan stille inn med to verdier, slik at det passer i ie og at det passer i alle andre nettlesere ved å bruke

 

width: 100px !important;

width: 90px;

 

så vil den øverste gjelde for ikke-ie og den nederste for ie håper det hjelper ^^

7755025[/snapback]

 

Jeg fant ut av det for noen dager siden.

Det måtte settes padding 0.

 

Men nå trodde jeg alt var i skjønneste orden.

CSS validering er OK, og det er også XHTML valideringen.

 

Men så til min store skrekk....

Jeg satt her på skolen og tittet innom siden, og der finner jeg ut at bildegalleriet ikke virker slik det skal hvis man ser det i IE 6.0.2900.2180 med win XP SP2 installert.

Det er triste saker gitt.

 

Kanskje det er noe med CSS koden som skal gjenkjenne dersom det er IE 6 som brukes...?

 

Jeg ser ikke grunnen til hvorfor det er feil...