zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit der Anzeige in verschiedenen Browsern. Bitte um Ratschläge!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2011, 10:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2011
Beiträge: 10
gsharpp befindet sich auf einem aufstrebenden Ast
Standard 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;
hier ist der HTML code zu dieser Seite

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>
Angehängte Grafiken
Dateityp: jpg chrome.jpg (93,3 KB, 3x aufgerufen)
Dateityp: jpg ff.jpg (62,0 KB, 5x aufgerufen)
Dateityp: jpg ie8.jpg (82,8 KB, 3x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2011, 10:56
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

klingt fast nach einem typischen Darstellungsfehler der durch overflow:hidden der Klasse .clear hervorgerufen wird.
overflow:hidden ist die mit Abstand schlechteste Methode zum Clearen, weil
dadurch gerne vor allem in modernen Browsern Darstellungsfehler hervorgerufen werden.

Aber das ist nur geraten, weil:
Mit deinem geposteten code kann leider man nix anfangen.
Wo sind denn die Texte dazu und was bewirkt das JS was im head eingebunden ist.
Hier ist nur das interessant was an den Browser ausgegeben wird, deshalb am besten immer einen Link zum Problem.
Deine Grafiken können wir sonst auch nicht sehen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.08.2011, 11:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2011
Beiträge: 10
gsharpp befindet sich auf einem aufstrebenden Ast
Standard

naja die Seite braucht einen Login den ich nicht unbedingt öffentlich reinstellen möchte. Könnte ich dir vielleicht eine private nachricht mit dem Link und Login schicken?
Mit Zitat antworten
  #4 (permalink)  
Alt 11.08.2011, 11:08
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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!
Mit Zitat antworten
  #5 (permalink)  
Alt 11.08.2011, 11:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2011
Beiträge: 10
gsharpp befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
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.
hallo Praktikant! (Bin auch einer) Wie würde ich so einen Reset implementieren?
Mit Zitat antworten
  #6 (permalink)  
Alt 11.08.2011, 11:28
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von gsharpp Beitrag anzeigen
hallo Praktikant! (Bin auch einer)
Ich nicht. Ich nenne mich nur so

Ganz oben im CSS einfach
Code:
* { margin:0; padding:0; }
schreiben.
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!
Mit Zitat antworten
  #7 (permalink)  
Alt 11.08.2011, 11:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2011
Beiträge: 10
gsharpp befindet sich auf einem aufstrebenden Ast
Standard

hmm danke dass hat jetzt ein paar Probleme mit IE gelöst aber Chrome streikt immer noch
Mit Zitat antworten
  #8 (permalink)  
Alt 11.08.2011, 11:55
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Link ist immer noch gefordert
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #9 (permalink)  
Alt 11.08.2011, 12:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2011
Beiträge: 10
gsharpp befindet sich auf einem aufstrebenden Ast
Standard

Candor Bizcard

Geändert von gsharpp (12.08.2011 um 09:36 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.08.2011, 12:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:25 Uhr.