html - Problemer med forskellige browsere - Udvikleren.dk

Tags: html css

Bruger #14776 @ 31.03.12 16:44

Hej.

Jeg har et problem. Min hjemmeside bliver vist forskelligt efter hvilken browser den er i.

I Internet Explorer ser den helt forkert ud. Den ignorer helt margin: auto og padding af en eller anden grund.

I Firefox, ser det dog ikke ud til, at der er nogle problemer.

I Google Chrome er der nogle problemer med min header. Logo og tekst, som er i min header div hopper op og ned, hvis man trykker opdater et par gange efter hinanden.

Her er CSS koden til mit stylesheet, som hedder style.css:

CSS kode

 @charset "utf-8";
 /* CSS Document */
 
 @import url(reset.css);
 
 body
 {
     background-color: #000000;
 }
 
 p
 {
     font-size: 14px;
 }
 
 h1
 {
     font-size: 24px;
 }
 
 h2
 {
     font-size: 18px;
 }
 
 h3
 {
     font-size: 16px;
 }
 
 a
 {
     color: #317c09;
 }
 
 a:hover
 {
     color: #ff9000;
 }
 
 li
 {
     font-size: 14px;
     margin-bottom: 5px;
 }
 
 #wrapper
 {
     margin-top: 25px;
     margin-bottom: 25px;
     margin-left: auto;
     margin-right: auto;
     width: 1080px;
     min-height: 500px;
 }
 
 #header
 {
     width: 1080px;
     height: 138px;
     background-color: #FFFFFF;
 }
 
 #logo
 {
     width: 118px;
     height: 118px;
     padding: 10px;
     float: left;
 }
 
 #overskrift
 {
     height: 138px;
     width: 900px;
     padding: 10px;
     float: left;
 }
 
 #overskrift p
 {
     text-align: center;
     line-height: 90px;
     font-size: 18px;
 }
 
 #indhold
 {
     width: 1060px;
     min-height: 200px;
     padding: 10px;
     background-color: #FFFFFF;
 }
 
 #footer
 {
     width: 1080px;
     min-height: 50px;
     background-color: #FFFFFF;
 }
 
 #footer p
 {
     text-align: center;
 }
 
 /* ID'er, som bruges i de forskellige Mod's changelog sider */
 
 #versionlinks
 {
     padding: 10px;
     width: 300px;
     min-height: 100px;
     border: #000 1px solid;
 }
 
 #version_overskrift
 {
     font-weight: bold;
     text-decoration: underline;
 }
 
 /* Klasser, som bruges på flere sider */
 
 .center
 {
     text-align: center;
 }
 
 .small
 {
     font-size: 12px;
 }
 
 .warning
 {
     color: #990000;
     text-decoration: underline;
     font-weight: bold;
 }

Jeg bruger også en eller anden form for reset stylesheet, som jeg selv har lavet. Jeg har tjekket, om det er den, som laver problemer, men det ser ikke ud til, at det er den, som gør det.

Koden til mit reset stylesheet er her:

CSS kode

 @charset "utf-8";
 /* CSS Document */
 
 /* ---------------------------------------- */
 /* Reset stylesheet made by DarkruneDK.        */
 /* Website: http://www.danskeskyrimmods.dk/ */
 /* Other website: http://www.darkrune.dk/   */
 /* ---------------------------------------- */
 /* Reset stylesheet inspired by the reset   */
 /* stylesheet by ?                          */
 /* ---------------------------------------- */
 
 
 *
 {
     margin: 0px;
     padding: 0px;
 }
 
 p
 {
     margin-top: 5px;
     margin-bottom: 5px;
 }
 
 ul, ol
 {
     margin-left: 20px;
 }
 
 h1, h2, h3, h4, h5
 {
     margin-top: 5px;
     margin-bottom: 5px;
 }
 
 img
 {
     border: none;
 }

Hvis i skal bruge HTML koden, så ligger jeg også lige den ind herunder:

HTML kode

 <html>
 
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <!-- <meta http-equiv="content-language" content="en" />
 
 <meta name="description" content="This page shows changelogs for DarkruneDK's (nickname) Skyrim Mods. Take a look, if you are interrested." />
 
 <meta name="keywords" content="Danske Skyrim Mods, Changelog, Changelogs, The Betrayed General, DarkruneDK, Therealdarkrune, The Elder Scrolls V: Skyrim, Skyrim, The Elder Scrolls, " />
 
 <meta name="copyright" content="Danske Skyrim Mods.dk ©" />
 
 <meta name="author" content="DarkruneDK" />
 
 <meta name="Charset" content="UTF-8" /> -->
 
 
 
 <script type="text/javascript">
 
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-11617548-4']);
   _gaq.push(['_trackPageview']);
 
   (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
 
 </script>
 
 <title>Home - Changelogs</title>
 
 <link rel="stylesheet" type="text/css" href="style/style.css" />
 
 </head>
 
 <body>
 
 
 
 <div id="wrapper">
 
 
 
 <div id="header">
 
     ?<div id="logo">
 
     <a href="http://changelog.danskeskyrimmods.dk/"><img src="http://changelog.danskeskyrimmods.dk/billeder/logo.png" title="Danske Skyrim Mods logo" alt="Danske Skyrim Mods logo" /></a>
 
 </div>
 
 
 
 <div id="overskrift">
 
     <p>Changelogs of DarkruneDK's Skyrim Mods</p>
 
 </div></div>
 
 
 
 <div id="indhold">
 
 
 
 <h1 class="center">Home - Changelogs</h1>
 
 
 
 <p>This page is made for showing changelogs for DarkruneDK's Skyrim Mods. Below you can see, which Mods there has been made changelogs for right now:</p>
 
 
 
 <ul>
 
     <li><a href="/the_betrayed_general/" title="Changelogs for The Betrayed General">The Betrayed General</a></li>
 
 </ul>
 
 
 
 </div>
 
 
 
 <div id="footer">
 
     ?<p>Danske Skyrim Mods © 2012 | Experience may differ from browser to browser | <span class="warning" title="Layout doesn't work properly in Internet Explorer.">Warning (mouseover to read)</span></p>    
 
 </div>
 
 
 
 </div>
 
 
 
 </body>
 
 </html>

Link til siden herunder:
Changelog - Danske Skyrim Mods

På forhånd, tak for hjælpen

Indlæg senest redigeret d. 31.03.2012 16:46 af Bruger #14776

2 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #9814 @ 31.03.12 17:06

1.302

Prøv at validere din side her:

http://validator.w3.org/ og ret fejlene

Du mangler bl.a. at angive DocType

Bruger #14776 @ 31.03.12 18:04

Prøv at validere din side her:

http://validator.w3.org/ og ret fejlene

Du mangler bl.a. at angive DocType

Tak for det

. Nu virker det i hvert fald i Internet Explorer. Google Chrome giver stadig lidt problemer med header div'et.

Problemer med forskellige browsere

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler