webdesign - Browser Kompatibilitet - Udvikleren.dk - Programmering, webdesign og grafik

Tags: grafik webdesign

Bruger #10114 @ 12.09.10 03:44

Hey, jeg har lavet et website design, men har problemer med kompatibilitet til andre browsere, end Firefox, nogen der kan hjælpe mig med at gøre den kompatibilitet?

Mit Design (Skal ses i Firefox!)

Min CSS kode:

CSS kode

 <style type="text/css">
         body {
             background-image: url(17x17_stripes.png);
             background-repeat: repeat;
             background-color: #505050;
             margin: 0px;
         }
         a:link {
             color: #970000;
             font-weight: bold;
             text-decoration: none;
         }
         a:visited {
             color: #970000;
             font-weight: bold;
             text-decoration: none;
         }
         a:hover {
             color: #930000;
             font-weight: bold;
             text-decoration: underline;
         }
         a:active {
             color: #930000;
             font-weight: bold;
             text-decoration: underline;
         }
         h2 {
             font-size: 26px;
             font-style: normal;
             font-weight: bold;    
         }
         h3 {
             font-size: 18px;
             font-style: normal;
             font-weight: bold;
         }
         #container {
             margin: 0 auto; 
             width: 960px;
         }
         #grid-header {
             background-image: url(Top_banner_By_FreeInk.png);
             background-repeat: no-repeat;
             margin: 0px;
         }
         #grid-content {
             margin: 0px;
             width: 960px;
         }
         #headder_bg {
             background-image: url(Headder.png);
             background-repeat: no-repeat;
         }
         #content_bg {
             background-image: url(Middle.png);
             background-repeat: repeat-y;
         }
         #footer_bg {
             background-image: url(Footer.png);
             background-repeat: no-repeat;
         }
         #headder {
             padding-top: 0px;
             padding-left: 40px;
             padding-right: 40px;
             padding-bottom: 0px;
         }
         #topmenu {
             height: 51px;
             border: 0px;
             padding-top: 185px;
             padding-left: 40px;
             padding-right: 40px;
             padding-bottom: 0px;
         }
         #topmenu a:link {
             border: 2px solid #750000;
             background-color: #000000;
             color: #970000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #topmenu a:visited {
             border: 2px solid #750000;
             background-color: #000000;
             color: #970000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #topmenu a:hover {
             border: 1px solid #B30000;
             background-color: #5E0000;
             color: #930000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #topmenu a:active {
             border: 1px solid #B30000;
             background-color: #5E0000;
             color: #930000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #content_submenu {
             padding-top: 0px;
             padding-left: 40px;
             padding-right: 10px;
             padding-bottom: 0px;
         }
         #content {
             padding-top: 0px;
             padding-left: 10px;
             padding-right: 40px;
             padding-bottom: 0px;
         }
 
         #footer {
             padding-top: 0px;
             padding-left: 40px;
             padding-right: 40px;
             padding-bottom: 10px;
         }
     </style>

Hele Filen:

HTML kode

 <html>
 <head>
     
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
     <style type="text/css">
         body {
             background-image: url(17x17_stripes.png);
             background-repeat: repeat;
             background-color: #505050;
             margin: 0px;
         }
         a:link {
             color: #970000;
             font-weight: bold;
             text-decoration: none;
         }
         a:visited {
             color: #970000;
             font-weight: bold;
             text-decoration: none;
         }
         a:hover {
             color: #930000;
             font-weight: bold;
             text-decoration: underline;
         }
         a:active {
             color: #930000;
             font-weight: bold;
             text-decoration: underline;
         }
         h2 {
             font-size: 26px;
             font-style: normal;
             font-weight: bold;    
         }
         h3 {
             font-size: 18px;
             font-style: normal;
             font-weight: bold;
         }
         #container {
             margin: 0 auto; 
             width: 960px;
         }
         #grid-header {
             background-image: url(Top_banner_By_FreeInk.png);
             background-repeat: no-repeat;
             margin: 0px;
         }
         #grid-content {
             margin: 0px;
             width: 960px;
         }
         #headder_bg {
             background-image: url(Headder.png);
             background-repeat: no-repeat;
         }
         #content_bg {
             background-image: url(Middle.png);
             background-repeat: repeat-y;
         }
         #footer_bg {
             background-image: url(Footer.png);
             background-repeat: no-repeat;
         }
         #headder {
             padding-top: 0px;
             padding-left: 40px;
             padding-right: 40px;
             padding-bottom: 0px;
         }
         #topmenu {
             height: 51px;
             border: 0px;
             padding-top: 185px;
             padding-left: 40px;
             padding-right: 40px;
             padding-bottom: 0px;
         }
         #topmenu a:link {
             border: 2px solid #750000;
             background-color: #000000;
             color: #970000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #topmenu a:visited {
             border: 2px solid #750000;
             background-color: #000000;
             color: #970000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #topmenu a:hover {
             border: 1px solid #B30000;
             background-color: #5E0000;
             color: #930000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #topmenu a:active {
             border: 1px solid #B30000;
             background-color: #5E0000;
             color: #930000;
             font-weight: bold;
             text-decoration: none;
             display: block;
             padding-top: 2px;
             padding-bottom: 2px;
             padding-left: 10px;
             padding-right: 10px;
             margin: 2px;
         }
         #content_submenu {
             padding-top: 0px;
             padding-left: 40px;
             padding-right: 10px;
             padding-bottom: 0px;
         }
         #content {
             padding-top: 0px;
             padding-left: 10px;
             padding-right: 40px;
             padding-bottom: 0px;
         }
 
         #footer {
             padding-top: 0px;
             padding-left: 40px;
             padding-right: 40px;
             padding-bottom: 10px;
         }
     </style>
     
 </head>
 <body>
 
 <div id="container">
     
     <div id="grid-header">
         <div id="topmenu">
         <table width="100%" border="0px" cellpadding="0px" cellspacing="0px">
             <tr>
                 <td align="left" valign="middle">
                     <a style="float: left" href="#">Forside</a> 
                     <a style="float: left" href="#">Topmenu</a> 
                     <a style="float: left" href="#">Topmenu</a> 
                     <a style="float: left" href="#">Topmenu</a> 
                     <a style="float: left" href="#">Topmenu</a>
                 </td>
                 <td align="right" valign="middle">
                     <a style="float: right" href="#">Intranet</a> 
                     <a style="float: right" href="#">Affiliate</a>
                 </td>
             </tr>
         </table>
         </div>
     </div>
     
     <div id="grid-content">
         <div style="border: 0px">
                <table width="100%" border="0" cellspacing="0">
                 <tr id="headder_bg">
                     <td colspan="2" align="left" valign="bottom" height="70px" id="headder">
                         <table width="100%" border="0px" cellspacing="0">
                             <tr>
                                 <td align="left" valign="middle"><h2>[overskrift her]</h2></td>
                                 <td align="right" valign="middle">
                                     <a href="#" style="text-decoration: none"><img src="dansk_flag.png" alt="Dansk" border="0px" width="36" height="24"></a> 
                                     <a href="#" style="text-decoration: none"><img src="english_flag.png" alt="English" border="0px" width="36" height="24"></a> 
                                     <img src="spacer.png" border="0px" width="24" height="24"> 
                                     <a href="#" style="text-decoration: none"><img src="theme_red.png" alt="Rødt Tema" border="0px" width="24" height="24"></a> 
                                     <a href="#" style="text-decoration: none"><img src="theme_green.png" alt="Grønt Tema" border="0px" width="24" height="24"></a> 
                                     <a href="#" style="text-decoration: none"><img src="theme_blue.png" alt="Blåt Tema" border="0px" width="24" height="24"></a> 
                                     <a href="#" style="text-decoration: none"><img src="theme_purple.png" alt="Lilat Tema" border="0px" width="24" height="24"></a>
                                       <img src="spacer.png" border="0px" width="24" height="24"> 
                                     <a href="#" style="text-decoration: none"><img src="print_page.png" alt="Print Side" border="0px" width="24" height="24"></a>
                                 </td>
                             </tr>
                         </table>
                     </td>
                   </tr>
                   <tr id="content_bg">
                     <td width="23%" align="left" valign="top" id="content_submenu">
                         <p>
                             <h3>Undermenu</h3>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                         </p>
                         <p>
                             <h3>[titel]</h3>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                             <a href="#">[link]</a><br>
                         </p>
                         <p>
                             <h3>Tekstboks</h3>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at diam urna, eget vehicula purus.
                         </p>
                     </td>
                     <td width="77%" align="left" valign="top" id="content">
                         <p>1: Der skal være linjemellemrum på ca. 1,5mm</p>
                         <p>2: Lav designet færdigt, og få hjælp på nettet (udvikleren.dk), til at gøre sitet kompatibelt med de fleste browsere.</p>
                         <p>3: Kan designet være gået i stykker fordi jeg flyttede meget af koden?</p>
                         <p>&nbsp;</p>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at diam urna, eget vehicula purus. Nam tempor, massa sit amet adipiscing molestie, erat purus ornare dolor, ac condimentum urna mauris vitae est. Donec ac risus purus, quis pellentesque justo. Morbi vehicula varius enim, ut posuere massa consequat eu. Mauris sagittis iaculis commodo. Etiam rutrum semper ipsum non convallis. Nulla at leo eu massa posuere euismod. Ut commodo odio vel neque eleifend convallis. Pellentesque in sodales ante. Nulla feugiat magna eu odio dictum eleifend sollicitudin nisi dignissim. Phasellus mi dolor, dapibus eu molestie ut, tempor sed justo. Maecenas dolor erat, convallis vel fringilla ut, venenatis a neque. Donec vestibulum ante vitae augue pellentesque scelerisque. Vestibulum metus mi, semper et consectetur sit amet, faucibus id ipsum. Cras at quam at velit cursus semper. Nam dui turpis, pretium non condimentum id, posuere vel augue. Fusce vehicula, urna eu consectetur venenatis, diam massa viverra leo, nec rutrum neque elit id augue. Sed orci purus, vehicula in lacinia non, dignissim a elit.</p>
                         <p>Mauris at turpis non nisi ornare condimentum nec et quam. Aenean commodo lectus quis dolor aliquet vel volutpat sem viverra. Mauris porta pretium velit vel condimentum. Mauris ac diam erat. Pellentesque nisl odio, malesuada ut porttitor vitae, interdum vitae ante. Suspendisse potenti. Proin cursus volutpat nunc, at tincidunt arcu vulputate id. Fusce pellentesque, turpis nec consectetur facilisis, erat odio condimentum magna, nec mollis diam turpis quis arcu. Quisque dignissim odio ullamcorper orci feugiat non molestie mi accumsan. Aenean eget neque elit, non ornare ante. Mauris elementum interdum varius. Pellentesque feugiat lorem id justo commodo sit amet lobortis felis semper. Praesent pharetra massa eget nisl ultrices ut egestas arcu ornare. Mauris eget tortor vel nisl consectetur posuere eu eget nulla. Curabitur hendrerit augue at leo feugiat venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                         <p align="right">
                             Skrevet d. [xx/xx - xxxx]<br>
                             [if opdateret] Opdateret d. [xx/xx - xxxx]
                         </p>
                     </td>
                   </tr>
                 <tr id="footer_bg">
                     <td colspan="2" align="center" valign="middle" height="112px" id="footer">
                         <hr align="center" width="80%" size="1" noshade />
                         2010 - 2011 | Borgen44.dk - All Rights <a href="#">NOT</a> Reserved | <a href="#">[link]</a> | <a href="#">[link]</a> | <a href="#">[link]</a> | <a href="#">[link]</a> | <a href="#">[link]</a>
                     </td>
                 </tr>
             </table>
         </div>
     </div>
 </div>
 
 </body>
 </html>

Indlæg senest redigeret d. 12.09.2010 03:45 af Bruger #10114

Bruger #8773 @ 12.09.10 09:41

658

Som regel får du meget bedre kompatibilitet på tværs af browsere hvis du styler det hele med DIV's i stedet for TABLES

Bruger #16121 @ 12.09.10 11:14

Jeg giver helt klart Simon ret. Det er samtidig også meget lettere at få til at se ordentlig ud :-)

Bruger #11361 @ 12.09.10 11:40

106

Start med at læse lidt om XHTML.. Det er nemmere at lave hjemmesider som er kompatible med andre browsere hvis du benytter det..

Derudover kan du tilføje dette i din css:

* {
margin:0px;
padding:0px;
}

Browserne har en standard for hvor meget margin og padding der er på forskellige elementer. Derfor vil det ikke altid se ens ud i alle browsere..
Det koden ovenover gør, er at gå ind og sige at ATL der har en margin og padding skal være lig 0px..

Tilgengæld skal du så selv ind og definere margin og padding på alle elementer som normalt har det.. F.eks. H1, P, UL osv..

Om du bruger tables eller divs er ligemeget.. Der er bare mere arbejde ved at sætte det op i tables.. Du vil gøre dig selv en god tjeneste ved at bruge divs i stedet for.. Men, man skal starte et sted!

Jeg brugte selv framesets i starten..

God fornøjelse!

Bruger #3143 @ 13.09.10 18:47

1.965

Du mangler først og fremmest en doctype. Du instruerer altså Firefox til at vise siden i Netscape 4 mode og du instruerer Internet Explorer i at vise siden i Internet Explorer 5 mode.

Nu er Internet Explorer 5 en meget gammel browser, som ingen bruger længere. Jeg vil anbefale at du hopper frem til noget nyere ved at tilføje en doctype.

Se http://www.jesperkristensen.dk/webstandarder/doctype-chooser/

Bruger #10114 @ 14.09.10 21:00

Tror nogenlunde jeg har fået det til at fungere, men skriver måske igen.

Martin D

Tak for:

Kode

* {
	margin:0px;
	padding:0px;
}

Kendte ikke det trick. - Læser noget om XHTML.

Jesper Kristensen

Har normalt også specificeret doctype.

Mht. Internet Explorer 5 mode, mener du:

Kode

[b]<!--[if gte IE 5]>[/b]
<style type="text/css">
	#grid-header {
		height: 236px;
	}
</style>
<![endif]-->

For jeg instruere Internet Explorer til version 5 eller nyere.

Bruger #3143 @ 14.09.10 21:32

1.965

Nej, det har intet med Internet Explorer Conditional Comments at gøre, det har med doctypen at gøre.

Jeg siger bare at når du ikke har en korrent doctype, så forsøger Internet Explorer (delvist) at opføre som om den var Internet Explorer 5. Og da Internet Explorer 5 ikke var så god til at vise nyere hjemmesider lavet i Firefox, som din, er det klart at den ikke kan vise siden korrekt.

Altså: det er meget vigtigt at tilføje den doctype.

Indlæg senest redigeret d. 14.09.2010 21:33 af Bruger #3143

Browser Kompatibilitet

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler