|
|||
Probleme mit der Anzeige in verschiedenen Browsern. Bitte um Ratschläge!
Hallo Leute
ich versuche gerade ein altes layout welches vertikal angelegt wurde in ein horizontales layout umzugestallten. Ich hab allerdings bemerkt dass die verschiedenen Browsers die Seite anders anzeigen. FF (neues version) und IE8 scheinen die Seite fast optimal anzuzeigen, während Chrome und IE9 probleme haben. Hauptsächlich Chrome. Ich habe ein paar Screenshots angehängt. Ich hoffe ihr habt ideen. Ich glaub das problem liegt an meinem Code. Der code für diese Seite: Code:
/* DocumentEdit Page */ .clear { overflow:hidden; width: 100px; } #divTagData { margin-top:1cm; float:right; padding: 10px 10px 10px 10px; text-align:left; margin-right:75px; } #tblbuttons { float:right; margin-left:auto; margin-right:55px; margin-top:10px; width:400px; } #divtable { float: right; width:400px; } #btpadding { padding: 0px } #tblTagWrapper { float:right; margin-left:auto; margin-right:auto; text-align:right; } #tblTagData { float:right; margin-left:auto; margin-right:auto; text-align:center; } #txtInstructions { float:right; clear:right; margin-left:auto; margin-right:55px; margin-top:10px; width:400px; height:100px; } #txtInstructions.blank { font-style:italic; color: Black; } #divOrderInformation { margin-top:1cm; text-align:center; } #tblOfferings { margin-left:auto; margin-right:55px; margin-bottom:10px; float:right; border-collapse:collapse; width: 400px; } #tblOfferings th { font-family: Arial; font-size:8.5pt; font-weight: bold; background:#f8a837 url(images/buttonBack.gif) repeat-x scroll 0% 0%; border:solid 1px silver; padding:2px; } #tblOfferings td { font-family: Arial; font-size: 8.5pt; border:solid 1px silver; padding:2px; } #tblOfferings tr { cursor:pointer; /* background:#add8e6 url(images/trBack.gif) repeat-x scroll 0% 0%; */ background:#f8a837 url(images/trSelectedBack.gif) repeat-x scroll 0% 0%; } #tblOfferings tr.selected { cursor:pointer; /* background:#f8a837 url(images/trSelectedBack.gif) repeat-x scroll 0% 0%; */ background:#7da5e0 url(images/trBack.gif) repeat-x scroll 0% 0%; } #divPaymentOptions { float:right; } #divProof { float:left; padding: 20px 0px 0px 60px; } IMG.proof { margin:5px; border:solid 1px black; height:236px; width:425px; } .space { height:10px; Code:
<!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> <title>Document Preview</title> <script type="text/javascript" src="../js/documentedit.js?dt=20100624"></script> </head> <body> <div id="divContent"> <div id="divBorder"> <div id="divHeader"> </div> <div id="divMenuBar"> </div> <div id="divFrameContent"> <span id="lblHead" class="label"></span> <div id="divProof" class="label" style="text-align: center;"> </div> <div id="divTagData" style="display: none;"> <table id="tblTagWrapper" cellpadding="0" cellspacing="0"> <tr> <td> <table id="tblTagData"> <tbody id="tblbTagData"> </tbody> </table> </td> </tr> <tr> <td style="text-align: right; padding-right: 4px;"> <input type="button" class="button" id="btnSaveTagData" onclick="btnSave_onClick();" /> <input type="button" class="button" id="btnCancelTagData" onclick="btnCancelTagData_onClick();" /> </td> </tr> </table> </div> <div id="divOrderInformation"> <p> <span id="lblInstructions" class="label"></span> </p> <table id="tblOfferings"> <tbody id="tblbOfferings"> </tbody> </table> <div id="divtable"> <table id="tblbuttons" cellpadding="0" cellspacing="0"> <tr> <td style="text-align: right; padding-right: 4px;"> <input type="button" class="button" id="btnEdit" onclick="btnEdit_onClick();" /> <input type="button" class="button" id="btnApp" onclick="btnTest_onClick();" /> <div id="divPaymentOptions"> <input type="button" class="button" id="btnOrder" onclick="btnOrder_onClick();" /> </div> </td> </tr> </table> </div> <p> <span id="lblDocNotFound" class="label error" style="display: none;"></span> </p> <span id="CostCentreSpan" class="label"> Cost Centre: <input type="text" id="txtCostCenter" class="blank" /><br /><br /> </span> <textarea id="txtInstructions" class="blank" onblur="txtInstructions_onBlur();" onfocus="txtInstructions_onFocus();"></textarea><br /> </div> <span id="lblNoOffering" class="label error" style="display: none;"></span> </div> <div id="divFooter"> </div> </div> </div> </body> </html> |
Sponsored Links |
Sponsored Links |
|
||||
In dem im CSS angegebenen Code fehlt auch ein Reset der Abstände in den Browsern. Das kann auch zu unschönen Fehlern führen.
Wenn du einen Login brauchst, dann lege einen Testuser an, den du nach der Fehlerbehebung wieder löschst. So lange sollte das nicht dauern und Klaus hat wahrscheinlich schon alles wichtige gesagt.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
Zitat:
|
|
||||
Ich nicht. Ich nenne mich nur so
Ganz oben im CSS einfach Code:
* { margin:0; padding:0; } Der Stern ist ein Universal-Selektor und spricht jedes Element an. Der Rest ist denke ich klar. Du sagst damit jedem Browser, dass die Elemente keine Abstände haben sollen. Diese haben sie nämlich und meist sind sie in den Browsern unterschiedlich.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
Geändert von gsharpp (12.08.2011 um 09:36 Uhr) |
Sponsored Links |
|
|||
Bei einem kurzen Blick mit Chrome ist die Tabelle nach oben gerückt, als ich aus dem linken auto-Margin bei #tblOfferings einen 0-margin gemacht habe.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wie sieht eine Webseite in verschiedenen Browsern aus | TreasureZone | Grafik, Design, Typografie | 5 | 18.05.2010 20:52 |
CSS in verschiedenen Browsern | klausschwaben | CSS | 1 | 29.07.2008 16:04 |
Schriftunterschiede in verschiedenen Browsern | gh23 | CSS | 1 | 28.01.2008 23:17 |
Probleme mit verschiedenen Browsern | evo2 | CSS | 4 | 17.06.2005 19:26 |
Online-Tool zur Anzeige mit verschiedenen Browsern? | ollo | CSS | 6 | 11.05.2005 14:22 |