Avatar billede Slettet bruger
26. september 2008 - 09:05 Der er 20 kommentarer og
1 løsning

Ens design i forskellige browsere - Menu problem

Hej alle sammen. Jeg er ny inden for "css-verdenen". Jeg er igang med at lave et lille design, men så får jeg problemer med menuen. Den ser ikke ens ud på alle sider. http://t.ag-s.dk/css/ . Jeg vil gerne have det sådan, at når man holder musen over et punkt, så går kommer der baggrundsfarve på som går helt ned til den sorte streg, og helt op. Men som sagt har jeg lidt problemer med at få det til at vises i alle browsere. Jeg ved jeg sikkert har lavet en eller anden dum fejl. ;) Kilde-koden fra siden:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AG-Solutions CMS - Admin</title>
<style type="text/css">
body {
    margin: 0;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
}

#top {
    background: #d2d0c6;
    height: 100px;
}

#menu {
    background: #e7e7e7;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
#menuleft {
    float: left;
}
#menuright {
    text-align: right;
}
#menuleft, #menuright {
    padding: 10px;
}
#menu a {
    text-decoration: none;
    color: #000000;
    padding: 10px;
}
#menu a:hover {
    color: #ffffff;
    background: #d2d0c6;
}
#menu img {
    vertical-align: middle;
    border: 0px;
}

#content {
    clear: both;
   
    background: orange;
}

#side {
   
   
    background: blue;
}
</style>
</head>
<body>

<div id="top">
  AG-Solutions
</div>
<div id="menu">
  <div id="menuleft">
    <a href="?page=sites/index"><img src="images/sites.png"> Sider</a> |
    <a href="?page=ban/index"><img src="images/ban.png"> Ban</a> |
    <a href="?page=admins/index"><img src="images/admins.png"> Admins</a> |
    <a href="?page=statistics/index"><img src="images/statistics.png"> Statistikker</a> |
    <a href="http://www.cmsguide.ag-s.dk" target="_blank"><img src="images/guide.png"> Guide</a> |
    <a href="?page=logout"><img src="images/logout.png"> Log ud</a>
  </div>
  <div id="menuright">
    <a href="?page=logout"><img src="images/view.png"> Vis hjemmesiden</a>
  </div>
</div>
<div id="content">
  Content
</div>
<div id="side">
  Side
</div>

</body>
</html>



Håber virkelig I kan hjælpe mig!
Avatar billede w13 Novice
26. september 2008 - 12:18 #1
Dine elementer gør vel bare ikke helt ned til stregen så - dvs. de er ikke høje nok.
Avatar billede Slettet bruger
26. september 2008 - 12:42 #2
Den går ned til stregen i IE : /
Avatar billede w13 Novice
26. september 2008 - 12:48 #3
Ja, IE tolker helt anderledes end alle de andre. =) Det er fejl i den browser.
Avatar billede w13 Novice
26. september 2008 - 12:48 #4
Det kunne også være et margin-/padding-problem.
Avatar billede Slettet bruger
26. september 2008 - 13:27 #5
Ja jeg er helt blank. Jeg har prøvet en masse. :( Jeg målte også højden på baggrundsfarven når man holdte musen over et link. I IE var den 38px og firefox 34 : / Er der ikke en måde at løse dette på?
Avatar billede olebole Juniormester
26. september 2008 - 15:01 #6
<ole>

Det er en helt klassisk renderingsfejl i IE  ;o)

Lav _aldrig_ et linjeskift i koden i slutningen af et block-element, hvis det sidste i elementet ellers er inline-indhold. Skriv f.eks. ikke:

    <a href="?page=logout"><img src="images/logout.png"> Log ud</a>
  </div>

- men:

    <a href="?page=logout"><img src="images/logout.png"> Log ud</a></div>

- ellers laver IE netop lidt ekstra luft i bunden af divet. Samme 'fejl' laver du forøvrigt i stortset alle dine div. Ret det, så har du ikke de problemer  =)

/mvh
</bole>
Avatar billede w13 Novice
26. september 2008 - 15:06 #7
Ole>> Jeg tror kun, mellemrummet forekommer i andre browsere end IE.
Avatar billede Slettet bruger
26. september 2008 - 16:19 #8
Uhh ha :D Jeg prøver lige engang med det!
Avatar billede Slettet bruger
26. september 2008 - 16:23 #9
Øv Ole. Det virker ikke rigtig :( IE går nedunder den sorte streg, men Firefox går over.
Avatar billede olebole Juniormester
26. september 2008 - 16:23 #10
w13 >> under alle omstændigheder laver konstruktionen renderingsfejl i IE, så det bør helt sikkert rettes. Om så det er kilden til spørgerens fejl, ved jeg ikke - men koden er ikke til at regne med, før den slags er rettet  ;o)
Avatar billede olebole Juniormester
26. september 2008 - 16:25 #11
sanderg >> Jaja, så kom vi da så langt. Fejlen var ikke den, du troede, men faktisk lige omvendt  ;o)

- prøver lige at teste på koden  =)
Avatar billede olebole Juniormester
26. september 2008 - 16:36 #12
I stedet for at forlade mig på 'tilfældigheder', tror jeg, at jeg ville prøve at sætte nogle dimensioner (specielt højde) på elementerne. Det er sjældent godt at stole på, at paddings kan styre dimensionerne  =)
Avatar billede Slettet bruger
26. september 2008 - 16:48 #13
Hey igen. Tusinde tak fordi I vil hjælpe. :) Jeg har fundet en løsning! Prøv at se siden nu. ;)
Avatar billede olebole Juniormester
26. september 2008 - 16:53 #14
Du skal nok passe på at blande forskellige enheder i samme regel:
    padding: 10px 2% 9px 0;

Det har i hvert fald før i tiden ikke været til at stole på. Jeg er ikke sikker på, det er rettet  =)
Avatar billede zips Juniormester
26. september 2008 - 17:05 #15
Blot til info, i Chrome og safari går hover op over stregen og i opera går den under stregen nu :)
Avatar billede Slettet bruger
26. september 2008 - 17:09 #16
Argh! Hvorfor skal browsere også se ens sider forskelligt.

Er der ikke en kode i, så man kan kode forskelligt CSS til hver enkel browser?
Avatar billede pidgeot Nybegynder
26. september 2008 - 17:24 #17
For IE kan du bruge conditional comments til at give enkelte regler til de forskellige versioner: http://msdn.microsoft.com/en-us/library/ms537512.aspx

For de andre browsere - der findes CSS hacks, hvor man udnytter fejl i CSS-parseren til at komme med specielle regler, men det er noget slam at bruge - bl.a. fordi der ikke er nogen logisk sammenhæng mellem parser-fejl, og renderings-fejl - hvis parser-fejlen bliver fixet, så skal du finde et nyt hack hvis renderingen ikke er, og det må ikke påvirke browsere der rent faktisk gør det forventede, etc.

Af samme grund skal man efter min mening ikke gå efter et design der ser 100% ens ud i alle browsere - for det ender bare med hovedpiner. Gå i stedet efter at lave noget der er simpelt, og ser godt ud i dem alle - for når alt kommer til alt, så gør det ikke nogen funktionel forskel om menuen fylder 1 pixel mere i Firefox 2.0.0.13 ift. de andre. Hvis man er ude efter sådan et præcisionsniveau, så er det ikke HTML man skal bruge, men snarere noget som Flash eller Silverlight.
Avatar billede Slettet bruger
26. september 2008 - 17:37 #18
Ja, det har du ret i. :) Gid alle browsere bare var ens. ;) Men nu skal man se det på den lyse side, hvis alle browsere var ens, ville der ikke være den store konkurrence. Og så ville browserne jo ikke blive bedre. :)
Avatar billede olebole Juniormester
26. september 2008 - 17:39 #19
pidgeot >> Sidste afsnit må du gerne engang skrive på min gravsten!

Jeg har en fortid som scenetekniker og derfra husker jeg en lille talemåde, når en eller anden teknisk detalje ikke var blevet helt perfekt (og deadline snerrede bag rygge på én):
    "Lægger de mærke til dét, er det sgu en kedelig forestilling, vi spiller!"

Den betragtning kunne man ofte med stor fordel bruge på websider  ;o)
Avatar billede olebole Juniormester
26. september 2008 - 17:43 #20
PS: og så skal man ikke glemme, at masser af renderings-issues slet ikke er standardiset.

Der står f.eks. ekstremt lidt i W3C's rekomandationer om, hvordan de forskellige formfelter skal renderes - hvorfor de naturligvis renderes vidt forskelligt. Det gælder f.eks. bredder på forskellige kontroller indenfor samme browser - men i høj grad også forskelle mellem browserne. Faktisk er det et under, de trods alt er så ens, som de er  =)
Avatar billede Slettet bruger
05. november 2008 - 21:09 #21
Lukker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester