[HTML] menu verschilt per browser - Softwareontwikkeling

woensdag 27 oktober 2004 00:34

Acties:

Topicstarter

volgende situatie doet zich voor:
Afbeeldingslocatie: http://maverick.dynasoft.nl/pics/ievsff.png

In IE zie je het menu zoals het zou moeten zijn, in Firefox gaat het fout.

Heb je wel eens met verschillende browsers natuurlijk, vaak kom je er wel uit, ik nu dus niet. Het is zelfs zo dat IE het eerst fout deed, en firefox goed, nu dus andersom

het stuk code dat hiervoor zou moeten zorgen:

code:

<body>
<div class="header">[img]"header.png"[/img]</div>
<div class="menu">
<a href="cam.php">[img]"button.php?text=Webcam"[/img]</a><br />
<a href="guestbook/">[img]"button.php?text=Gastboek"[/img]</a><br />
<a href="films.php">[img]"button.php?text=Films"[/img]</a><br />
<a href="mrtg/">[img]"button.php?text=Traffic"[/img]</a><br />
<a href="sysinfo/">[img]"button.php?text=Serverstats"[/img]</a><br />
<a href="wspace.php">[img]"button.php?text=Webspace"[/img]</a><br />
<a href="online.htm">[img]"button.php?text=IPlog"[/img]</a>
</div>

waar dit m'n css info is uit de pagina:

code:

<style type="text/css">
div a img {border-color: #000000;}
div.menu img {margin-top: 1px;} 
div.menu {position: absolute; width: 208px; height: 366px; left: 4px; top: 155px;} 
div.menu img {border: 2px solid #000000;}
div.header img {border: 2px solid #000000;}
div.index {width:500px; margin:0px auto;}
div.footer img {border: 0px;}

h1, h2, h3, h4, h5, h6 {font-family: Shruti; font-weight: normal; font-size: 15px; color: #666666; margin-top: 15px;}
h2 {color: #800080; font-weight: bold;}
h3 {text-align: left;} 
h4 {color: white;} 
h5 {font-size: 10px; color: black;}

body {text-align: center;}
</style>

Kan iemand me nu vertellen wat ik hier fout doe? Vooral omdat het eest in Firefox wel goed gewerkt heeft snap ik niet dat ik het niet meer aan de plaat krijg. op http://maverick.dynasoft.nl is de pagina in actie te zien.
Note: ik ben nog een behoorlijke beginner met html en php, ik zie ook dat veel mensen hun code heel anders ordenen enzo, probeer daar een beetje overheen te kijken aub, ik zal zoiezo nog wel verbeteren op dat punt, als het de werking beinvloed is commentaar natuurlijk altijd welkom.
Alvast bedankt

PSN: DutchTrickle PVoutput

woensdag 27 oktober 2004 00:44

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Gooi dit eens in je CSS

code:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

[ Voor 8% gewijzigd door Thijsmans op 27-10-2004 00:45 ]

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

woensdag 27 oktober 2004 00:47

Acties:

crisp

Devver

Pixelated

die extra ruimte lijkt me eerder te komen door whitespace. Geef je anchors eens display:block en haal de <br />'s weg. Het mooist is natuurlijk om dit met een list op te lossen en die te stylen, maar gezien het feit dat je aangeeft een beginner te zijn zullen we daar nog maar niet al te veel op hameren

Intentionally left blank

woensdag 27 oktober 2004 00:50

Acties:

Maverick

Topicstarter

Prammenhanger schreef op 27 oktober 2004 @ 00:44:
Gooi dit eens in je CSS
code:
1
2
3
4
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Dit geeft geen resultaat

crisp schreef op 27 oktober 2004 @ 00:47:
die extra ruimte lijkt me eerder te komen door whitespace. Geef je anchors eens display:block en haal de <br />'s weg. Het mooist is natuurlijk om dit met een list op te lossen en die te stylen, maar gezien het feit dat je aangeeft een beginner te zijn zullen we daar nog maar niet al te veel op hameren

hm, opzich vind ik dat niet erg, ze hebben me ook aal de css gekregen, dus list moet opzich ook wel erbij kunnen, alles wat ik bijleer is meegenomen, alleen moet je me even vertellen wat anchors precies zijn, is dat waar nu de <br /> 's staan?

PSN: DutchTrickle PVoutput

woensdag 27 oktober 2004 00:52

Acties:

Cyphax

Moderator LNX

Maverick schreef op 27 oktober 2004 @ 00:50:
alleen moet je me even vertellen wat anchors precies zijn

Allow me: een anchor is een linkje. Nou weet je waar die A in <A HREF...> voor staat

Je kunt er nog wat meer mee (naar een anchor dat je midden op je pagina zet kun je bijvoorbeeld weer linken) maar in jouw geval is het je link.

[ Voor 25% gewijzigd door Cyphax op 27-10-2004 00:53 ]

Saved by the buoyancy of citrus

woensdag 27 oktober 2004 00:59

Acties:

Maverick

Topicstarter

Cyphax schreef op 27 oktober 2004 @ 00:52:
[...]

Allow me: een anchor is een linkje. Nou weet je waar die A in <A HREF...> voor staat
Je kunt er nog wat meer mee (naar een anchor dat je midden op je pagina zet kun je bijvoorbeeld weer linken) maar in jouw geval is het je link.

ja, dat van dat linken wist ik ervan, vandaar dat ik niet wist dat ik het ook had, nu wel dus, maargoed, heb nu in me css toegevoegd;

code:

1	a.pic {display: block;}

en in me Anchors van het menu staat dan class="pic" uiteraard.
Hierna zat er een enorme witruimte tussen alle buttons, dus de <br /> 's weggehaald, witruimte weer netjes weg, maar opnieuw in de ruimte in firefox meer dan de gewenste 1px. nettoresultaat is dus gelijk.

PSN: DutchTrickle PVoutput

woensdag 27 oktober 2004 02:01

Acties:

Harm

Maverick schreef op 27 oktober 2004 @ 00:50:
hm, opzich vind ik dat niet erg, ze hebben me ook aal de css gekregen, dus list moet opzich ook wel erbij kunnen, alles wat ik bijleer is meegenomen, alleen moet je me even vertellen wat anchors precies zijn, is dat waar nu de
's staan?

Mooi

. Informatie over het maken van opgemaakte lijsten kun je hier vinden. Allerlei lijsten en hoe je ze maakt worden daar behandeld. Erg handig

.

woensdag 27 oktober 2004 02:55

Acties:

Maverick

Topicstarter

Harm schreef op 27 oktober 2004 @ 02:01:
[...]

Mooi . Informatie over het maken van opgemaakte lijsten kun je hier vinden. Allerlei lijsten en hoe je ze maakt worden daar behandeld. Erg handig .

harm, je bent geweldig.

zoals je her kunt zien heb ik nu een perfect menu met list, en dat met blocks ipv images, dus nog beter voor m'n bandbreedte ook

Afbeeldingslocatie: http://maverick.dynasoft.nl/pics/goedmenu.png

werkend te zien op http://maverick.dynasoft.nl/test/
ziet er hetzelfde uit in Firefox EN Internet explorer, zo zien we het graag

PSN: DutchTrickle PVoutput