Avatar billede fantomet Nybegynder
18. oktober 2003 - 20:13 Der er 46 kommentarer og
1 løsning

Mozilla vs. Explorer

Hej

Jeg har et problem med et stylesheet der ikke ser helt ens ud i explorer og mozilla. Jeg ved godt at explorer ikke er helt god til at tolke css, men jeg kan ikke lige løse problemet:

I kan se forskellen her: http:www.kona.dk :Brugerid: laurits , password: perplex

Den øverste topbar ser lidt sjov ud mozilla. Jeg vil gerne have den til at se ud som den gør i Explorer.

Her er den del af sylesheet som jeg bruger til topbaren:

body {
    border: none;
      margin: 0px;
    background: #cccccc;
    z-index: 0;
    }

.logo {
    margin: 0px;
    position:absolute;
    left:50px;
    top:10px;
    z-index:20;
    }
.topbar {
    position:absolute;
    top: 0px;
    width:100%;
    height:90px;
    background: #7F919F url(moenster.gif) repeat;
    z-index: 5;
    }

.topbar_under {
    position:absolute;
    top: 80px;
    width:100%;
    height:10px;
    background: #7F919F;
    z-index: 6;
    }


#designcontainer {
    position: absolute;
    margin: 0px;
    width: 970px;
    height: 900px;
    left: 30px;
    border: 1px solid black;
    z-index: 1;
    background: #ffffff;
        }


.menu {

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
        font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    position: absolute;
    left: 70px;
    top: 82px;
    z-index: 20;
    }



.menu_barn{
    width:100px;
    text-align:left;
    float:left;
    }
Avatar billede kr-data Nybegynder
18. oktober 2003 - 20:29 #1
må jeg få koden der skaber menuen?
Avatar billede fantomet Nybegynder
18. oktober 2003 - 21:06 #2
Menupunkterne 'Bikes' og Forum' bliver hentet som en include fra 'menu.htm' og den stiplede topbar bliver der bare linket til:

<div id="designcontainer">
  <?php

  include("recycle/menu.htm");
  ?>
  <p class="topbar"></p>
  <p class="topbar_under"></p>


Menu.html er opbygget således.

<div class="menu">
<div class="menu_barn">:::<a href="../bikeindex.php">bikes</a>:::</div>
<div class="menu_barn">:::<a href="../phpBB2/index.php">forum</a>:::</div>
</div>
<a href="../index.php"><img src="../billeder/basic/logo.gif" border="0" class="logo"></a>
Avatar billede kr-data Nybegynder
18. oktober 2003 - 21:17 #3
må jeg foreslå at gøre det sådan:


<!-- Skaber en tabel som sikrer at det man ser vil se ens ud i IE og Netscape (Mozilla klon!)-->
<table width="100%" id=designcontainer>
<tr>
<td width="100%" class=topbar><a href="../index.php"><img src="../billeder/basic/logo.gif" border="0" class="logo"></a></td>
</tr>
<tr>
<td width="100%" class=topbar_under>

<!-- Skaber en tabel, som sikrer at der er lige langt fra første bogstav i første menu punkt og til næste og evt. trejie (er egentlig først nøttigt når man har mere end to punkter -->
<table width="30%" class=menu>
<tr>
<td width="10%">:::<a href="../bikeindex.php">bikes</a>:::</td>
<td width="10%">:::<a href="../phpBB2/index.php">forum</a>:::</td>
</tr>
</table>

</td>
</tr>
</table>

Hvis jeg har tolket den kode rigtigt så burde dette virke!
Avatar billede fantomet Nybegynder
18. oktober 2003 - 21:21 #4
Jeg er egentlig ikke meget for at lægge tabller ind på siden. Jeg ville helst klare det med stylesheet. Har du en løsning til det ?
Avatar billede kr-data Nybegynder
18. oktober 2003 - 21:25 #5
Det er en dårlig idé at udgå tabeller, et gør at designet på din side bliver mere præcist, du kan placere ting så det ser ens ud uanset browser (Opera skulle vist gøre det meget anderledes), og uanset opløsning.

Men hvorfor vil du undgå tabeller?
Avatar billede fantomet Nybegynder
18. oktober 2003 - 21:35 #6
Det er vel egentligt et spørgsmål om religion. Jeg kan godt lide at jeg kan styre alle sider fra ét sted (css).
Avatar billede kr-data Nybegynder
18. oktober 2003 - 21:41 #7
hmm, jeg finder det latterlig (ikke for at blive personlig), får du har er f*ck*ng kraftigt værktøj, hvis du kombinerer php, css, og html (med tabeller)
Avatar billede fantomet Nybegynder
18. oktober 2003 - 21:51 #8
Det er fair nok. Bortset fra det tror jeg måske at jeg har fundet en løsning, mens jeg har siddet og tænkt lidt over det... Nogle gange er det godt at få luftet problemet lidt så kommer man til at se lidt anderledes på det...

Ha det godt!
Avatar billede kr-data Nybegynder
18. oktober 2003 - 21:53 #9
det så sandelig rigtigt, tak i lige måde!
Avatar billede roenving Novice
19. oktober 2003 - 05:42 #10
Det er da for kunstigt, at du ikke sætter dine elementer ind som logiske elementer !-)

<div id="designcontainer">
<div class="topbar"></div>
<div class="topbar_under"></div>
<div class="menu">
<div class="menu_barn">:::<a href="../bikeindex.php">bikes</a>:::</div>
<div class="menu_barn">:::<a href="../phpBB2/index.php">forum</a>:::</div>
</div>
<a href="../index.php"><img src="../billeder/basic/logo.gif" border="0" class="logo"></a>
Avatar billede fantomet Nybegynder
19. oktober 2003 - 12:11 #11
Du har helt ret. Det var faktisk også den løsning som jeg luftede ovenfor. Men tak. Der er dog stadig et enkelt problem: 'topbar_under' er ikke lige høj i de to browsere. Det er som om at mozilla æder lidt af den. De to elementer hedder:

.topbar {
    position:absolute;
    top: 0px;
    width:100%;
    height:90px;
    background: #7F919F url(moenster.gif) repeat;
    z-index: 5;
    }

.topbar_under {
    position:absolute;
    top: 90px;
    width:100%;
    height:10px;
    background: #7F919F;
    z-index: 6;
    }

(jeg har gjort topbaren lidt højere...)
Avatar billede fantomet Nybegynder
19. oktober 2003 - 17:00 #12
roenving: Kan du løse det sidste så får du pointene...
Avatar billede olebole Juniormester
19. oktober 2003 - 17:15 #13
<ole>

Inden du begynder at lave 'hovsa-hacks', skal du lige skrive HTML - det gør du nemlig ikke i øjeblikket  :)

For at browsere overhovedet kan vide, hvordan siderne skal vises, skal du starte din side med en DOC-TYPE (før <HTML>). F.eks:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
Du _skal_ have URL'en (http://www.w3.org/TR/html4/loose.dtd) med, da IE ellers ikke kan tolke CSS korrekt.

Du skal være forberedt på at skrive din CSS om, når du har sat DOC-TYPE'en ind. Hvis din side ser korrekt ud i IE uden DOC-TYPE, er din CSS nemlig forkert  :)

/mvh
</bole>
Avatar billede kr-data Nybegynder
19. oktober 2003 - 17:20 #14
jeg har sq aldrig haft problemer med det!
Avatar billede fantomet Nybegynder
19. oktober 2003 - 17:21 #15
Takker - det er nu gjort, heldigvis er siden stadig ok i explorer, men desværre også stadig gal i Firebird...
Avatar billede kr-data Nybegynder
19. oktober 2003 - 17:24 #16
set det da op i tabeller, har anldrig haft problemer med netscape mod IE
Avatar billede fantomet Nybegynder
19. oktober 2003 - 17:26 #17
Jeg troede at vi havde afsluttet den diskussion :-)
Avatar billede olebole Juniormester
19. oktober 2003 - 17:28 #18
kr-data >> så er det _yderst_ simple sider, du har lavet. Man kan ikke undgå at få problemer med det - specielt, når der bruges CSS ... udover det helt elementært, at man skal sætte en DOC-TYPE  :)

fantomet >> prøv evt. at lægge en '&nbsp;' ind i dit div med klassen 'topbar_under'. Det er altid noget skidt med tomme elementer.
/mvh
Avatar billede kr-data Nybegynder
19. oktober 2003 - 17:29 #19
hehe, tja det er egentlig rigtigt nok, jeg syns nu stædig det er spild at smide den funktion væk, for den virker!
Avatar billede kr-data Nybegynder
19. oktober 2003 - 17:31 #20
Olebole>> www.tka-mobildisco.dk det nye design er ikke færdigt, men prøv at kigge efter tabeller! Og jeg bruger CSS, CSS og tabeller og evt. med php eller asp så har du de vigtigste værktøjer!
Avatar billede olebole Juniormester
19. oktober 2003 - 17:31 #21
Du bør i øvrigt altid bruge absolutte stier til baggrundsbilleder, når du bruger en remote CSS-fil. Ellers kan visse browsere ikke finde billedet  :)
/mvh
Avatar billede fantomet Nybegynder
19. oktober 2003 - 17:36 #22
Så lykkedes det. Jeg gav følgende style. Det er måske ikke så kønt med at lægge en en font-size ind i stedet for en heigth, men det virker:

.topbar_under {
    position:absolute;
    top: 90px;
    width:100%;
    background: orange;
    z-index: 6;
    font-size: 15px;
    }
Avatar billede fantomet Nybegynder
19. oktober 2003 - 17:37 #23
olebole & roenving: >>

Svar og jeg giver 15 point til hver
Avatar billede olebole Juniormester
19. oktober 2003 - 17:38 #24
kr-data >> jeg ved ikke, hvad det er, du misforstår - udover HTML-standarden  :)
Jeg taler i dette spørgsmål hverken for eller imod tabeller - men du har da ret i, det er kraftige værkstøjer ... ikke mindst, hvis man kan bruge dem.

På din side 'http://www.tka-mobildisco.dk/index.php?p=prices' har du selv lavet det mest perfekte eksempel på, at IE ikke kan læse CSS-box-modellen uden brug af nævnte DOC-TYPE. Det er derfor dine pris-bokse har forskellig bredde i IE og NS.
Derudover _skal_ id være unik for hvert HTML-element. Det er en grundlæggende misforståelse at lade flere elementer have samme id./mvh
Avatar billede olebole Juniormester
19. oktober 2003 - 17:39 #25
fantomet >> det er en rigtig skidt løsning. Har du prøvet at lægge en '&nbsp;' ind i div'et? Det burde kunne klare problemet  :)
/mvh
Avatar billede olebole Juniormester
19. oktober 2003 - 17:40 #26
ooops .... og så et svar  :)
Avatar billede fantomet Nybegynder
19. oktober 2003 - 17:42 #27
&nbsp; hjalp ikke alene...

Du har ret i at det ikke er en super løsning, men det virker :-)
Avatar billede kr-data Nybegynder
19. oktober 2003 - 17:47 #28
hmm, det vigtige er at den virker, og normalt kigger du ikke i bægge browsere når du besøger en side

for det næste er det jo ikke direkte grimt!
Avatar billede olebole Juniormester
19. oktober 2003 - 17:51 #29
Jo, den hjælper alene - men det kræver naturligvis, du sætter den rigtige højde ... ikke 10px  ;o)

IE sætter blank-tegn ind her og der og alle vegne (det er en Windows-sygdom, desværre). Derfor vil IE opfatte det somom du sætter et blanktegn ind og bruger font-størrelsen til at bestemme højden. Derfor bliver kassen ikke 10px høj ... men 12-15px.

Det sker ikke i NS, der giver dig den højde, du har sat den til  ;o)

Prøv engang at sætte en '&nbsp;' ind og sæt højden til 15px. Så vil jeg æde min gamle 'klaptop' på, det virker.
/mvh
Avatar billede olebole Juniormester
19. oktober 2003 - 17:55 #30
kr-data >> Det er da fløjtende ligegyldigt. Det er slamkode, der ikke har noget med HTML at gøre. Uanset, hvad du prøver at bruge som bortforklaringer, overholder du ikke HTML-standarden, hvilket resulterer i browsernes fejlfortolkning af dine sider.
På samme måde er din manglende kendskab til HTML-standarden skyld i, du ikke kunne bidrage med løsningen i dette spm.
Avatar billede kr-data Nybegynder
19. oktober 2003 - 17:56 #31
altså hvor skal jeg angive høje og hvor skal $nbsp; ind?
Avatar billede fantomet Nybegynder
19. oktober 2003 - 18:01 #32
Hej Olebole

Det hjalp, men nu er explorer højden blevet 18 px...selvom den er sat til 15 i css. Det ser ok ud i firebird.

Explorer er da irriterende...
Avatar billede kr-data Nybegynder
19. oktober 2003 - 18:03 #33
For øvrigt den med doc type er faktisk en der er kommet til med tiden, den oprindelige html-standard er bare

<html>
<head>
</head>
<body>
tekst
</body>
</html>
Avatar billede olebole Juniormester
19. oktober 2003 - 18:06 #34
yups ... sæt font-size og line-height til 0px. Nu bruger du jo tegn i boksen - og hvis man ønsker små højder, bør man altid sætte de to properties til meget små værdier, da boksen ellers bliver udvidet  :)

Ja, IE er så helt klart en af markedets aller dårligste browsere  :o|
/mvh
Avatar billede olebole Juniormester
19. oktober 2003 - 18:09 #35
kr-data >> Ja ... og hvordan tror du færdselsloven så ud i 1763? Hvilken interesse har dog den oprindelige HTML-standard i 2003?

Som jeg skrev: "Uanset, hvad du prøver at bruge som bortforklaringer, overholder du ikke HTML-standarden ..."
Avatar billede fantomet Nybegynder
19. oktober 2003 - 18:09 #36
Respekt! Det virker.

Jeg takker...
Avatar billede olebole Juniormester
19. oktober 2003 - 18:12 #37
... anytime  ;o)
Avatar billede kr-data Nybegynder
19. oktober 2003 - 18:44 #38
olebole>> hmm meget muligt, kan du guide mig til at overholde den, eller kender du en god guide?
Avatar billede olebole Juniormester
19. oktober 2003 - 18:47 #39
Yups: http://www.w3.org/TR/html401/ bedre kommer de ikke  :)
/mvh
Avatar billede kr-data Nybegynder
19. oktober 2003 - 18:49 #40
w3 hmm, den burde jeg selv have kunne komme på :) Tak.
Avatar billede olebole Juniormester
19. oktober 2003 - 18:55 #41
;o)
Avatar billede kr-data Nybegynder
19. oktober 2003 - 19:13 #42
Er der ikke en maskine som tester om en side overholder W3C standarden? Jeg syns jeg har hørt om en, men jeg kan ikke finde den!
Avatar billede olebole Juniormester
19. oktober 2003 - 19:20 #43
http://validator.w3.org/
Men husk: Den er _kun_ en guide. Den er et stykke software - og som sådan har der (i hvert fald tidligere) været en del fejl i den  :)
/mvh
Avatar billede kr-data Nybegynder
19. oktober 2003 - 19:30 #45
nu er det fixet :)
Avatar billede kr-data Nybegynder
19. oktober 2003 - 19:39 #46
mange tak skal du ha olebole, hvis du vil, så giver jeg hellere end gerne pts for din hjælp, du har fortjent dem!
Avatar billede olebole Juniormester
19. oktober 2003 - 19:45 #47
Nejnej ... jeg har rigeligt. Men tak for tanken  ;o)
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