Avatar billede mosquito Nybegynder
25. februar 2006 - 19:49 Der er 8 kommentarer og
1 løsning

forskelle på visning i browserne IE6 og Firefox

http://ternholm.dk/images/firefoxContraIE6.jpg

Jeg synes jeg har prøvet alt fra collapse, spacing, margin mv. Altsammen uden nogen ændringer.

kildekoden ser således ud:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Time Registration</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body background="images/siteBG.gif" bgcolor="#FFFFFF" text="#000000" leftmargin="0"  topmargin="0" scroll="yes">
    <form id="form1" runat="server">
    <div>
        <!--
       
        Surrounding table -->
        <table  border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" >
            <tr>
                <td valign="top" style="height: 100%; width: 151px;">
                    <!--
                   
                    Left area table -->
                    <table border="0" cellspacing="0" cellpadding="0" width="150">
                        <tr>
                            <td class="almTekst" height="20"><img src="images/spacers/spacerGennem.gif"></td>
                            <td class="almTekst" width="1"><img src="images/spacers/spacerBlaa.gif" width="1" height="20"></td>
                        </tr>
                        <tr>
                            <td class="almTekst" height="1"><img src="images/spacers/spacerSort.gif" width="150" height="1"></td>
                            <td class="almTekst" width="1"><img src="images/spacers/spacerSort.gif" width="1" height="1"></td>
                        </tr>
                        <tr>
                            <td class="almTekst" valign="top" height="200" ><img src="images/Planner_grey.jpg"></td>
                            <td class="almTekst" width="1" bgcolor="#000000"><img src="images/spacers/spacerSort.gif" width="1" height="150"></td>
                        </tr>
                        <tr>
                            <td class="almTekst" height="1"><img src="images/spacers/spacerSort.gif" width="150" height="1"></td>
                            <td class="almTekst" width="1"><img src="images/spacers/spacerSort.gif" width="1" height="1"></td>
                        </tr>
                        <tr>
                            <!--
                           
                            margin between woman and menu -->
                            <td valign="top" style="height: 20px">
                                <!--
                               
                                here goes the left menu-->
                            </td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <!-- TABLE 3 BEGIN -->
                    <table border="0" cellspacing="0" cellpadding="0" height="135" width="100%">
                        <tr>
                            <td bgcolor="#004C6D" class="menu" height="20" align="right">
                                <a class="menu" href="Default.aspx">
                                    <img src="images/spacers/spacerOrange.gif" width="4" height="4" align="absmiddle"
                                        border="0">&nbsp;home</a>&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="almTekst" height="1" bgcolor="#000000">
                                <img src="images/spacers/spacerSort.gif"></td>
                        </tr>
                        <tr>
                            <td class="almTekst" height="95" background="images/TimeRegistration.jpg">
                                <img src="images/spacers/spacerGennem.gif"></td>
                        </tr>
                        <tr>
                            <td class="almTekst" height="1" bgcolor="#000000">
                                <img src="images/spacers/spacerSort.gif"></td>
                        </tr>
                        <tr>
                            <td class="menu" bgcolor="#0E3749" style="height: 20px">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td class="menu">
                                            &nbsp;</td>
                                        <td class="menu">
                                            <a class="menu" href="Default.aspx">Templates</a></td>
                                        <td class="menu">
                                            <img src="images/spacers/menuSpacer.gif"></td>
                                        <td class="menu">
                                            <a class="menu" href="Default.aspx">Statistics</a></td>
                                        <td class="menu">
                                            <img src="images/spacers/menuSpacer.gif"></td>
                                        <td class="menu">
                                            <a class="menu" href="Default.aspx">Admin</a></td>
                                    </tr>
                                </table>
                                <!-- TABLE 3 END -->
                            </td>
                        </tr>
                        <tr>
                            <td class="almTekst" height="1" bgcolor="#000000">
                                <img src="images/spacers/spacerSort.gif"></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        </div>
    </form>
</body>
</html>



tilhørende css:

body            {
                    }
                   
a       
                    {
                    text-decoration            :    none;
                    color                                :    gray;
                    }
                   
a:hover
                    {
                    text-decoration            :    none;
                    color                                :    #CD7D12;
                    }
                   
.menu:link
                    {
                    text-decoration            :    none;
                    font-family                    :    verdana, arial;
                    font-size                        :    8pt;
                    color                                :    white;
                    }
                   
.menu:hover
                    {
                    text-decoration            :    none;
                    font-family                    :    verdana, arial;
                    font-size                        :    8pt;
                    color                                :    #EB9420;
                    }
                   
.menu:visited
                    {
                    text-decoration            :    none;
                    font-family                    :    verdana, arial;
                    font-size                        :    8pt;
                    }
                   
.u_menu:link
                    {
                    text-decoration            :    none;
                    font-family                    :    verdana, arial;
                    font-size                        :    7pt;
                    color                                :    white;
                    }
                   
.u_menu:hover
                    {
                    text-decoration            :    none;
                    font-family                    :    verdana, arial;
                    font-size                        :    7pt;
                    color                                :    #EB9420;
                    }
                   
.u_menu:visited
                    {
                    text-decoration            :    none;
                    font-family                    :    verdana, arial;
                    font-size                        :    7pt;
                    }


hvori ligger fejlen??

som i kan se af linket, ser det ok ud i IE6.0 men det ser ud som om der er en margin eller spacing på den yderste tabel. Men uanset hvad jeg gør ved den tabel, er resultatet det samme.

Hvordan løser jeg problemet, så den er browser venlig uanset ff eller ie ??
Avatar billede roenving Novice
25. februar 2006 - 20:03 #1
Hvorfor kaster du html3.2-kode i xhtml ?-)

-- og benytter 1993-metoder til at opbygge design ???

-- benyttelse af nestede tabeller og spacer.gifs må siges at være noget, der hører til fra før html4 kom for omkring 10 år siden (tabeller har dog mange specielle egenskaber, der kan være grund til at bruge !-)

-- og benyttelse af papir-størrelsen pt kan give mange sjove effekter, da der faktisk findes browsere, der tager den slags alvorligt, og da et typografisk punkt er ~0.35mm og en pixel typisk er mellem 0.20mm og 0.28mm, vil det give forskel mellem browserne ...
Avatar billede mosquito Nybegynder
25. februar 2006 - 23:52 #2
Mit udgangspunkt var en funktionel intranet løsning, hvor design er sekundær.

funktionaliteten er på plads, og jeg har derfor copy/pastet designet fra det oprindelige public website. bare for at gøre det lidt pænere end bare et kedeligt men funktionelt site.

kort og godt: Genbrug - copy/paste

Jeg er dotnet udvikler uden den store erfaring i html/js/xhtml/css... men må åbenlyst konkludere at jeg må researche lidt mere på området og erkende min manglende viden.

Jeg takker for kommentaren og nedlægger spørgsmålet ;-)
Avatar billede mosquito Nybegynder
25. februar 2006 - 23:55 #3
roenving >
smid et svar og pointene er dine som tak for hjælpen. Selvom det ikke gav mig en løsning, gav det alligevel et brugbart svar.
Avatar billede roenving Novice
25. februar 2006 - 23:55 #4
Hvis du alligevel er på intranet kender du vel brugernes browser ?-)

-- hvis det er tilfældet har du jo en helt anden palette at tegne med, så det skal du da absolut tage udgangspunkt i, for det er vel legitimt at fortælle folk, at de skal bruge en IE til at timeregistrere, selvom de har lov til at downloade og bruge en FireFox eller Opera !-)
Avatar billede mosquito Nybegynder
25. februar 2006 - 23:59 #5
Ligesom det er et ønske fra brugerne at løsningen er brugbar i begge browsere, og det ikke er kompliceret grafik, skulle det jo være muligt uden de store armbevægelser. ... formoder jeg ;-)
Avatar billede roenving Novice
26. februar 2006 - 00:22 #6
En hurtig skitse:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;background-color:#ddd}
#mainTable{height:700px;width:960px;margin:0 auto;border-collapse:collapse;}
#mainTable td{border:0;padding:0;vertical-align:top;}
a,a:link,a:visited{color:white;text-decoration:none;}
a:hover,a:active{color:red;text-decoration:overline underline;}
</style>
<title>Tomt dokument</title>
</head>
<body>
  <table id="mainTable">
    <tr>
      <td style="background:#00f;width:150px;height:100%;">Menu-søjle<br>
        <img src=" ... ">
        <div id="menu">Menu-område</div></td>
      <td style="width:810px;height:100%;">
        <div style="height:120px;background-image:url(baggrundTop.jpg);">&nbsp;</div>
        <div style="height:20px;background:#00f;color:white;padding:5px;">
          <a href="etLink.html">Link1</a>
          <a href="etLink.html">Link2</a>
          <a href="etLink.html">Link3</a>
        </div>
        <div id="indhold">
          <form name="timeRegistration" action=" ... " method="post">
            <h1>Indtast alle relevante felter</h1>
           
            ...
           
          </form>
        </div>
    </tr>
  </table>
</body>
</html>
Avatar billede mosquito Nybegynder
09. marts 2006 - 11:18 #7
roenving> smid et svar, jeg er kommet videre
Avatar billede roenving Novice
19. marts 2006 - 12:57 #8
Oki '-)
Avatar billede roenving Novice
19. marts 2006 - 23:44 #9
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester