Nieuws:

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

Pagina's: [1]   Omlaag

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

Offline n3p3nthess

  • Lid
Webpagina heeft een ander uitzicht bij verschillende browsers
« Gepost op: 2012/02/20, 14:06:13 »
Wanneer ik een website open met verschillende browsers, krijg een een ander resultaat.
Ik heb geen idee waar de fout zit.

HTML-file:
Code: [Selecteer]
<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:
Code: [Selecteer]
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:
Code: [Selecteer]
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/
Meld dit bericht aan de moderator   Gelogd

Offline jan11000

  • Lid
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.
Meld dit bericht aan de moderator   Gelogd

Offline Nick Lamar

  • Lid
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.
 
Meld dit bericht aan de moderator   Gelogd

Offline SeySayux

  • Lid
    • SeySayux.net
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #3 Gepost op: 2012/02/21, 17:43:43 »
Meld dit bericht aan de moderator   Gelogd
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
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #4 Gepost op: 2012/02/22, 15:11:17 »
Dank.
Meld dit bericht aan de moderator   Gelogd

Offline ryanrio95

  • Lid
    • Riome Distro
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.
Meld dit bericht aan de moderator   Gelogd
Riome Bravo Released
Officiële Riome Website

Offline SeySayux

  • Lid
    • SeySayux.net
Re: Webpagina heeft een ander uitzicht bij verschillende browsers
« Reactie #6 Gepost op: 2012/03/26, 23:57:48 »
Citaat van: ryanrio95 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.
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
Meld dit bericht aan de moderator   Gelogd
I use a Unix-based system, that means I'll get laid as often as I have to reboot.
LibSylph
SeySayux.net
Pagina's: [1]   Omhoog