Nieuws:

We zijn er weer.

Na lange tijd van afwezigheid zijn we er weer  :laugh:
We hebben alle wachtwoorden gereset, je oude wachtwoord werkt niet meer.Je moet via het "wachtwoord vergeten"-linkje je wachtwoord resetten. Je krijgt hiervoor een mailtje op het adres dat je bij ons geregistreerd hebt.

De komende tijd zijn we nog druk bezig om de rest van de site op te bouwen, dus het kan zijn dat sommige onderdelen (tijdelijk) niet werken.

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: Webpagina heeft een ander uitzicht bij verschillende browsers  (gelezen 1543 keer)

Offline n3p3nthess

  • Lid
  • Steunpunt: Nee
Wanneer ik een website open met verschillende browsers, krijg een een ander resultaat.
Ik heb geen idee waar de fout zit.

HTML-file:
<html>
    <head>
        <title>Jonathan Stark</title>
<meta name="viewport" content="target-densitydpi=device-dpi; initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
        <link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 600px)" />
        <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 601px)" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="desktop.css" media="all" />
        <![endif]-->
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="android.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1><a href="./">Jonathan Stark</a></h1>
                <div id="utility">
                    <ul>
                        <li><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
                <div id="nav">
                    <ul>
                        <li><a href="consulting-clinic.html">Consulting Clinic</a></li>
                        <li><a href="on-call.html">On Call</a></li>
                        <li><a href="development.html">Development</a></li>
                        <li><a href="http://www.oreilly.com">O'Reilly Media, Inc.</a></li>
                    </ul>
                </div>
            </div>
            <div id="content">
                <h2>About</h2>
                <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
            </div>
            <div id="sidebar">
                <img alt="Manga Portrait of Jonathan Stark" src="jonathanstark-manga-small.png">
                <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p>
            </div>
            <div id="footer">
                <ul>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="blog.html">Blog</a></li>
                </ul>
                <p class="subtle">Jonathan Stark Consulting, Inc.</p>
            </div>
        </div>
    </body>
</html>

CSS-file:
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space arount the inside of the body */
}

#header h1 {
margin: 0;
padding: 0;
}

#header h1 a {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 1px #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
}

#header ul {
list-style: none;
margin: 10px;
padding: 0;
}

#header ul li a {
background-color: #fff;
border: 1px solid #999;
color: #222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}

#content, #sidebar {
padding: 10px;
}

#footer {
display: none;
}

#header ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}

#header ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}

#header ul.hide {
display: none;
}

#header div.leftButton {
position: absolute;
top: 7px;
left: 6px;
height: 30px;
font-weight: bold;
text-align: center;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 1px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
}

Javascript-file:
if(window.innerWidth && window.innerWidth <= 600) {
$(document).ready(function() {
$('#header ul').addClass('hide');
$('#header').append(
'<div class="leftButton" onclick="toggleMenu()">Menu</div>');
});

function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
}
}

Dit is het beoogde resultaat:
Chrome, Desktop
http://imageshack.us/photo/my-images/141/38783541.png/
Default webbrowser, Android emulator
http://imageshack.us/photo/my-images/864/androidemulator.png/
Firefox, Android Phone

Verkeerde resultaat:
Dolphin Browser, Android Phone
http://imageshack.us/photo/my-images/338/20120220135302.jpg/
Default webbrowser, Android Phone
http://imageshack.us/photo/my-images/689/20120220135327.jpg/

Offline jan11000

  • Lid
  • Steunpunt: Nee
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #1 Gepost op: 2012/02/21, 12:35:57 »
Komt vaker voor.
Ik weet dat er een website bestaat die 20 of 30 browsers tegelijk laat zien, zodat je de verschillen kunt zien, adres weet ik niet meer.

Op een website vroeger, had iemand iets erbij gezet wat niet zichtbaar was in linux, later werd de website aangepast/herschreven toen was het weer goed.

Offline Nick Lamar

  • Lid
  • Steunpunt: Nee
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #2 Gepost op: 2012/02/21, 17:34:29 »
Weet iemand wellicht wel de naam van die multi-browser?
Ik ben daar namelijk zeer in geĆÆnteresseerd.

N.L.
 

Offline SeySayux

  • Lid
    • SeySayux.net
  • Steunpunt: Nee
I use a Unix-based system, that means I'll get laid as often as I have to reboot.
LibSylph
SeySayux.net

Offline Nick Lamar

  • Lid
  • Steunpunt: Nee
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #4 Gepost op: 2012/02/22, 15:11:17 »
Dank.

Offline ryanrio95

  • Lid
    • Riome Distro
  • Steunpunt: Nee
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #5 Gepost op: 2012/03/26, 22:38:27 »
Dit komt omdat elke browser een engine (motor) heeft.
Firefox Mozilla Gecko, Safari, Chrome en Epiphany gebruiken Apple Webkit. IE gebruikt MS Trident, Opera gebruikt Presto
Elke motor heeft zijn eigen manier van een pagina weergeven.
Bijvoorbeeld de standaard weergave van een tabel heeft in Webkit wel een border en in Gecko niet (slechts een voorbeeld)

Groetjes.

Offline SeySayux

  • Lid
    • SeySayux.net
  • Steunpunt: Nee
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #6 Gepost op: 2012/03/26, 23:57:48 »
Dit komt omdat elke browser een engine (motor) heeft.
Firefox Mozilla Gecko, Safari, Chrome en Epiphany gebruiken Apple Webkit. IE gebruikt MS Trident, Opera gebruikt Presto
Elke motor heeft zijn eigen manier van een pagina weergeven.
Bijvoorbeeld de standaard weergave van een tabel heeft in Webkit wel een border en in Gecko niet (slechts een voorbeeld)

Groetjes.
Normaal gezien moeten alle browsers zich aan de standaarden houden, een webpagina die aan de standaard voldoet zou in iedere browser er hetzelfde moeten uitzien (er van uit gaande dat die browser de standaard implementeert). Natuurlijk kan het zijn dat een browser een standaard niet implementeert (omdat deze nog te nieuw is, of omdat het bedrijf achter die browser gewoon lui is en geen goede reputatie heeft om nieuwe standaarden te implementeren) of slecht implementeert (omdat deze vaag of onvolledig is, of omdat het bedrijf achter die browser gewoon lui is en geen goede reputatie heeft om de standaarden die ze dan implementeren, correct te implementeren)

- Sey
I use a Unix-based system, that means I'll get laid as often as I have to reboot.
LibSylph
SeySayux.net