Ich versuche im Webfront eine Variable mit HTML Code + CSS einzufügen und bekomme da aber immer eine andere Ansicht als wenn ich die html Seite lokal in einem Browser öffne. Ich hab per Photoshop und Slices ein Bild bearbeitet und als HTML abgespeichert. Wenn ich diese HTML Seite im IE oder Firefox öffne wird alles richtig angezeigt. Wenn ich aber den Code in eine String Variable mit HTML einfüge bekomme ich erst mal gar keine Anzeige im Webfront. Erst wenn ich im CSS Teil in der ersten Table den Parameter „Position:absolute“ entferne wird was angezeigt, leider aber verschoben.
Wenn ich aber eine extra Webserver im IPS direkt auf die HTML Seite zeigen lasse, passt wieder alles.
Hat jemand eine Idee woran das liegen kann?
Richtig:
Falsch:
Bilder als Anhang:
Display_html.zip (64.8 KB)
<?
SetValueString(55964,"<!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>Display</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style type='text/css'>
<!--
div.Table_01 {
left:0px;
top:0px;
width:666px;
height:386px;
}
div.Display-01_ {
position:absolute;
left:0px;
top:0px;
width:666px;
height:41px;
}
div.Display-02_ {
position:absolute;
left:0px;
top:41px;
width:597px;
height:39px;
}
div.LED-Stoerung_ {
position:absolute;
left:597px;
top:41px;
width:14px;
height:14px;
}
div.Display-04_ {
position:absolute;
left:611px;
top:41px;
width:55px;
height:345px;
}
div.Display-05_ {
position:absolute;
left:597px;
top:55px;
width:14px;
height:25px;
}
div.Display-06_ {
position:absolute;
left:0px;
top:80px;
width:563px;
height:2px;
}
div.Button-Info_ {
position:absolute;
left:563px;
top:80px;
width:48px;
height:48px;
}
div.Display-08_ {
position:absolute;
left:0px;
top:82px;
width:303px;
height:69px;
}
div.Display_ {
position:absolute;
left:303px;
top:82px;
width:208px;
height:78px;
}
div.Display-10_ {
position:absolute;
left:511px;
top:82px;
width:52px;
height:304px;
}
div.Display-11_ {
position:absolute;
left:563px;
top:128px;
width:48px;
height:68px;
}
div.Display-12_ {
position:absolute;
left:0px;
top:151px;
width:113px;
height:235px;
}
div.LED-Heizungspumpe-1_ {
position:absolute;
left:113px;
top:151px;
width:12px;
height:12px;
}
div.Display-14_ {
position:absolute;
left:125px;
top:151px;
width:178px;
height:137px;
}
div.Display-15_ {
position:absolute;
left:303px;
top:160px;
width:208px;
height:52px;
}
div.Display-16_ {
position:absolute;
left:113px;
top:163px;
width:12px;
height:37px;
}
div.Button-Entaschen_ {
position:absolute;
left:563px;
top:196px;
width:48px;
height:48px;
}
div.LED-Heizungspumpe-2_ {
position:absolute;
left:113px;
top:200px;
width:12px;
height:12px;
}
div.Display-19_ {
position:absolute;
left:113px;
top:212px;
width:12px;
height:37px;
}
div.Display-20_ {
position:absolute;
left:303px;
top:212px;
width:85px;
height:28px;
}
div.Button-Rauf_ {
position:absolute;
left:388px;
top:212px;
width:48px;
height:47px;
}
div.Display-22_ {
position:absolute;
left:436px;
top:212px;
width:75px;
height:28px;
}
div.Display-23_ {
position:absolute;
left:303px;
top:240px;
width:31px;
height:48px;
}
div.Button-zurueck_ {
position:absolute;
left:334px;
top:240px;
width:48px;
height:48px;
}
div.Display-25_ {
position:absolute;
left:382px;
top:240px;
width:6px;
height:146px;
}
div.Display-26_ {
position:absolute;
left:436px;
top:240px;
width:6px;
height:146px;
}
div.Button-Ja_ {
position:absolute;
left:442px;
top:240px;
width:48px;
height:48px;
}
div.Display-28_ {
position:absolute;
left:490px;
top:240px;
width:21px;
height:146px;
}
div.Display-29_ {
position:absolute;
left:563px;
top:244px;
width:48px;
height:44px;
}
div.LED-Boilerpumpe_ {
position:absolute;
left:113px;
top:249px;
width:12px;
height:12px;
}
div.Display-31_ {
position:absolute;
left:388px;
top:259px;
width:48px;
height:8px;
}
div.Display-32_ {
position:absolute;
left:113px;
top:261px;
width:12px;
height:37px;
}
div.Button-runter_ {
position:absolute;
left:388px;
top:267px;
width:48px;
height:48px;
}
div.Display-34_ {
position:absolute;
left:125px;
top:288px;
width:135px;
height:98px;
}
div.Button-Aendern_ {
position:absolute;
left:260px;
top:288px;
width:48px;
height:48px;
}
div.Display-36_ {
position:absolute;
left:308px;
top:288px;
width:74px;
height:98px;
}
div.Display-37_ {
position:absolute;
left:442px;
top:288px;
width:48px;
height:98px;
}
div.Button-IO_ {
position:absolute;
left:563px;
top:288px;
width:48px;
height:48px;
}
div.LED-Pufferpumpe_ {
position:absolute;
left:113px;
top:298px;
width:12px;
height:12px;
}
div.Display-40_ {
position:absolute;
left:113px;
top:310px;
width:12px;
height:37px;
}
div.Display-41_ {
position:absolute;
left:388px;
top:315px;
width:48px;
height:71px;
}
div.Display-42_ {
position:absolute;
left:260px;
top:336px;
width:48px;
height:50px;
}
div.Display-43_ {
position:absolute;
left:563px;
top:336px;
width:48px;
height:50px;
}
div.LED-Abgasgeblaese_ {
position:absolute;
left:113px;
top:347px;
width:12px;
height:12px;
}
div.Display-45_ {
position:absolute;
left:113px;
top:359px;
width:12px;
height:27px;
}
-->
</style>
</head>
<body style='background-color:#FFFFFF;'>
<div class='Table_01'>
<div class='Display-01_'>
<img id='Display_01' src='user/display_html/images/Display_01.png' width='666' height='41' alt='' />
</div>
<div class='Display-02_'>
<img id='Display_02' src='user/display_html/images/Display_02.png' width='597' height='39' alt='' />
</div>
<div class='LED-Stoerung_'>
<img id='LED_Stoerung' src='user/display_html/images/LED_Stoerung.png' width='14' height='14' alt='' />
</div>
<div class='Display-04_'>
<img id='Display_04' src='user/display_html/images/Display_04.png' width='55' height='345' alt='' />
</div>
<div class='Display-05_'>
<img id='Display_05' src='user/display_html/images/Display_05.png' width='14' height='25' alt='' />
</div>
<div class='Display-06_'>
<img id='Display_06' src='user/display_html/images/Display_06.png' width='563' height='2' alt='' />
</div>
<div class='Button-Info_'>
<a href='http://URL_Info' target='Info_Target'>
<img id='Button_Info' src='user/display_html/images/Button_Info.png' width='48' height='48' border='0' alt='' /></a>
</div>
<div class='Display-08_'>
<img id='Display_08' src='user/display_html/images/Display_08.png' width='303' height='69' alt='' />
</div>
<div class='Display_'>
<img id='Display' src='user/display_html/images/Display.png' width='208' height='78' alt='' />
</div>
<div class='Display-10_'>
<img id='Display_10' src='user/display_html/images/Display_10.png' width='52' height='304' alt='' />
</div>
<div class='Display-11_'>
<img id='Display_11' src='user/display_html/images/Display_11.png' width='48' height='68' alt='' />
</div>
<div class='Display-12_'>
<img id='Display_12' src='user/display_html/images/Display_12.png' width='113' height='235' alt='' />
</div>
<div class='LED-Heizungspumpe-1_'>
<img id='LED_Heizungspumpe_1' src='user/display_html/images/LED_Heizungspumpe_1.png' width='12' height='12' alt='' />
</div>
<div class='Display-14_'>
<img id='Display_14' src='user/display_html/images/Display_14.png' width='178' height='137' alt='' />
</div>
<div class='Display-15_'>
<img id='Display_15' src='user/display_html/images/Display_15.png' width='208' height='52' alt='' />
</div>
<div class='Display-16_'>
<img id='Display_16' src='user/display_html/images/Display_16.png' width='12' height='37' alt='' />
</div>
<div class='Button-Entaschen_'>
<img id='Button_Entaschen' src='user/display_html/images/Button_Entaschen.png' width='48' height='48' alt='' />
</div>
<div class='LED-Heizungspumpe-2_'>
<img id='LED_Heizungspumpe_2' src='user/display_html/images/LED_Heizungspumpe_2.png' width='12' height='12' alt='' />
</div>
<div class='Display-19_'>
<img id='Display_19' src='user/display_html/images/Display_19.png' width='12' height='37' alt='' />
</div>
<div class='Display-20_'>
<img id='Display_20' src='user/display_html/images/Display_20.png' width='85' height='28' alt='' />
</div>
<div class='Button-Rauf_'>
<img id='Button_Rauf' src='user/display_html/images/Button_Rauf.png' width='48' height='47' alt='' />
</div>
<div class='Display-22_'>
<img id='Display_22' src='user/display_html/images/Display_22.png' width='75' height='28' alt='' />
</div>
<div class='Display-23_'>
<img id='Display_23' src='user/display_html/images/Display_23.png' width='31' height='48' alt='' />
</div>
<div class='Button-zurueck_'>
<img id='Button_zurueck' src='user/display_html/images/Button_zurueck.png' width='48' height='48' alt='' />
</div>
<div class='Display-25_'>
<img id='Display_25' src='user/display_html/images/Display_25.png' width='6' height='146' alt='' />
</div>
<div class='Display-26_'>
<img id='Display_26' src='user/display_html/images/Display_26.png' width='6' height='146' alt='' />
</div>
<div class='Button-Ja_'>
<img id='Button_Ja' src='user/display_html/images/Button_Ja.png' width='48' height='48' alt='' />
</div>
<div class='Display-28_'>
<img id='Display_28' src='user/display_html/images/Display_28.png' width='21' height='146' alt='' />
</div>
<div class='Display-29_'>
<img id='Display_29' src='user/display_html/images/Display_29.png' width='48' height='44' alt='' />
</div>
<div class='LED-Boilerpumpe_'>
<img id='LED_Boilerpumpe' src='user/display_html/images/LED_Boilerpumpe.png' width='12' height='12' alt='' />
</div>
<div class='Display-31_'>
<img id='Display_31' src='user/display_html/images/Display_31.png' width='48' height='8' alt='' />
</div>
<div class='Display-32_'>
<img id='Display_32' src='user/display_html/images/Display_32.png' width='12' height='37' alt='' />
</div>
<div class='Button-runter_'>
<img id='Button_runter' src='user/display_html/images/Button_runter.png' width='48' height='48' alt='' />
</div>
<div class='Display-34_'>
<img id='Display_34' src='user/display_html/images/Display_34.png' width='135' height='98' alt='' />
</div>
<div class='Button-Aendern_'>
<img id='Button_Aendern' src='user/display_html/images/Button_Aendern.png' width='48' height='48' alt='' />
</div>
<div class='Display-36_'>
<img id='Display_36' src='user/display_html/images/Display_36.png' width='74' height='98' alt='' />
</div>
<div class='Display-37_'>
<img id='Display_37' src='user/display_html/images/Display_37.png' width='48' height='98' alt='' />
</div>
<div class='Button-IO_'>
<img id='Button_IO' src='user/display_html/images/Button_IO.png' width='48' height='48' alt='' />
</div>
<div class='LED-Pufferpumpe_'>
<img id='LED_Pufferpumpe' src='user/display_html/images/LED_Pufferpumpe.png' width='12' height='12' alt='' />
</div>
<div class='Display-40_'>
<img id='Display_40' src='user/display_html/images/Display_40.png' width='12' height='37' alt='' />
</div>
<div class='Display-41_'>
<img id='Display_41' src='user/display_html/images/Display_41.png' width='48' height='71' alt='' />
</div>
<div class='Display-42_'>
<img id='Display_42' src='user/display_html/images/Display_42.png' width='48' height='50' alt='' />
</div>
<div class='Display-43_'>
<img id='Display_43' src='user/display_html/images/Display_43.png' width='48' height='50' alt='' />
</div>
<div class='LED-Abgasgeblaese_'>
<img id='LED_Abgasgeblaese' src='user/display_html/images/LED_Abgasgeblaese.png' width='12' height='12' alt='' />
</div>
<div class='Display-45_'>
<img id='Display_45' src='user/display_html/images/Display_45.png' width='12' height='27' alt='' />
</div>
</div>
</body>
</html>");
?>