Page 1 of 1
Kleines IE8 Problem mit Javascript
Posted: Thu May 20, 2010 11:38 pm
by SCM
Hi
Ich habe hier ein kleines Projekt unter
http://www.ovlu.li/cms/
Auf der Startseite unter Aktuell -> News habe ich im CMS unter dem Menüpunkt Options -> Smarty data or logic that is specific to this page folgendes kurzes Script gespeichert:
Code: Select all
{literal}
<__script__ type="text/javascript">
function pop(file)
{
helpwindow = window.open(file, "Vaterland", "width=600, height=796", "directories=no", "toolbar=no", "location=no", "status=no", "menubar=no", "resizable=no", "width=600, height=796");
helpwindow.focus();
return false;
}
</__script>
{/literal}
Dies habe ich gemacht damit das bild auf der seite in einem neuen popup mit der passenden grösse geöffnet werden kann. Das funktioniert auch in allen Browsern wie es soll. Leider wird im Internet Explorer 8 dafür das Layout der Seite auf dem das Bild verlinkt ist (Aktuelles -> News) total versaut. Es wird in die Breite gezogen und die Farben sind nicht mehr richtig. Ich kann mir das nicht erklären, weil das JavaScript sollte ja eientlich keinen einfluss darauf haben???
Hat jemand einen guten Tipp für mich?? Vielen dank!!
Re: Kleines IE8 Problem mit Javascript
Posted: Fri May 21, 2010 10:37 am
by cyberman
SCM wrote:
Auf der Startseite unter Aktuell -> News habe ich im CMS unter dem Menüpunkt Options -> Smarty data or logic that is specific to this page folgendes kurzes Script gespeichert:
Kann es sein, dass du mit englischer Administration arbeitest
?
Leider wird im Internet Explorer 8 dafür das Layout der Seite auf dem das Bild verlinkt ist (Aktuelles -> News) total versaut. Es wird in die Breite gezogen und die Farben sind nicht mehr richtig. Ich kann mir das nicht erklären, weil das JavaScript sollte ja eientlich keinen einfluss darauf haben???
Habs mir gerade im IE8 angesehen und kann den Fehler nicht bestätigen ...
Re: Kleines IE8 Problem mit Javascript
Posted: Sun May 23, 2010 12:13 pm
by SCM
Ja ist englischsprachige Administration.
Leider habe ich die Benachrichtigungsmail erst jetzt gesehen. Hatte gedacht es ist noch keine Antwort gekommen. Auf jeden Fall konnte ich das Problem in der Zwischenzeit lösen. Das Problem war dass das JavaScript vor dem Head Tag definiert war. Jetzt habe ich es einfach in den Body Bereich geschoben und nun funktioniert es.
Leider gibts noch ein zweites Problem:
Wenn ich die Seite verkleinere schiebt sich der subnavigationslayer sehr sehr weit nach rechts, also das layout bleibt nicht so schön wie es ist. Das auch mit Firefox usw. Kann mir jemand helfen? Hier das Template:
Code: Select all
{process_pagedata}<!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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
{* note: anything inside these are smarty comments, they will not show up in the page source *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}
{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}
</head>
</__body>
<div id="pagewrapper">
{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
{* end accessibility skip links *}
<hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *
}
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "Layout: Top menu + 2 columns" *}
<div id="header">
{* this holds the name of the site on the right side *}
{*<h2 class="headright">{sitename}</h2>*}
{* this holds a link back to home page and the header left image/logo, text is hidden using CSS *}
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
</div>
{* End Header *}
{* Start Navigation *}
<div id="menu_horiz">
{* stylesheet "Navigation: Simple - Horizontal" *}
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' number_of_levels='1'}
<hr class="accessibility" />
</div>
{* End Navigation *}
{* Start Content (Navigation and Content columns) *}
<div id="content">
{* Start Sidebar, 2 divs one for top image one for bottom image *}
<div id="sidebar" align="center">
<div id="sidebara" align="left">
{* Start Sub Navigation, stylesheet "Navigation: Simple - Vertical" *}
<div id="menu_vert">
<h2 class="accessibility">Sub Navigation</h2>
{menu template='simple_navigation.tpl' start_level='2' collapse='1'}
<hr class="accessibility" />
</div>
{* End Sub Navigation *}
</div>
<p>
{global_content name='randomimage'}
</p>
<p>
{global_content name='randomimage'}
</p>
<p>
{global_content name='randomimage'}
</p>
{global_content name='footer'}
</div>
{* End Sidebar *}
{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
<div class="back1">
<div class="back2">
<div class="back3">
<div id="main">
<h2>{title}</h2>
{content}
<br />{* to insure space below content *}
<hr class="accessibility" />
<div class="clear"></div>
</div>
</div>
</div>
</div>
{* End Content Area *}
</div>
{* End Content *}
</div>
{* end pagewrapper *}
<__body>
</__html>
Re: Kleines IE8 Problem mit Javascript
Posted: Mon May 24, 2010 12:04 pm
by mike-r
Wie Du sicher siehst, bricht das obere Menü dann um und drückt unterhalb die Inhalte durcheinander.
Das kommt daher, dass Du - soweit ich sehe - unterhalb des Menüs nicht clearst.
Feste Höhen (und Breiten) in PX sind übrigens auch nicht optimal. Wenn man sich im Browser minimale Schriftgrössen einstellt zerbricht Deine obere Navigation genauso. Besser Höhe in em definieren.
Re: Kleines IE8 Problem mit Javascript
Posted: Thu May 27, 2010 9:18 pm
by SCM
Vielen Dank für deine Antwort.
Was meinst du mit nicht clearen? Sorry verstehe leider nicht viel davon, würde das aber gerne verbssern.
Und ja ich habe schon gehört dass em besser ist. Was mir aber nicht klar ist. Wenn ich das hier bei mir auf den Bildschirm mit sagen wir 20 Pixel ansehe und das für gut befinde, wie weiss ich dann wieviel em ich sezten muss?
edit: ich denke mal das du mit clearen von dem hier redest:
http://www.css4you.de/clear.html
habe im cms backend unter den stylesheets auch ein paar clearing tags gefunden. Allerdings weiss ich nicht wie ich das jetzt passend anwenden muss. danke für jede hilfe!
Code: Select all
/* clearing */
/* clearfix is a hack for divs that hold floated elements. it will force the holding div to span all the way down to last floated item. We strongly recommend against using this as it is a hack and might not render correctly but it is included here for convenience. Do not edit if you dont know what you are doing*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {
height: 0;
clear: both;
width: 90%;
visibility: hidden;
}
#main .clear {
height: 0;
clear: right;
width: 90%;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}
* html .clear {
/* Hides from IE-mac \*/
height: 1%;
clear: right;
width: 90%;
/* End hide from IE-mac */
}
/* end clearing */
danke und gruss
scm
Re: Kleines IE8 Problem mit Javascript
Posted: Sun May 30, 2010 1:55 pm
by mike-r
füg mal bei #content clear:both hinzu.
Ein Clear ist dazu da, ein voriges Float (bei Dir betrifft das die Menüpunkte:
Code: Select all
div#menu_horiz li {
float:left;...
)
zu beenden, also den normalen Element-fluss wiederherzustellen.
Re: Kleines IE8 Problem mit Javascript
Posted: Sun May 30, 2010 6:50 pm
by SCM
sorry aber wo siehst du #content?
oder meinst du div#content in diesem stylesheet?
http://www.ovlu.li/cms/stylesheet.php?c ... ype=screen
dann nützt es leider nichts
Re: Kleines IE8 Problem mit Javascript
Posted: Sun May 30, 2010 9:19 pm
by mike-r
vereinfacht gesagt: #content und div#content ist das Selbe.
Mit dem jetzigen CSS ist zumindest erst einmal das Verrutschen bei Skalierung in Geckos (was für mich genauso ausah wie in IE8) behoben.
In IE8 läuft es nun eigentlich auch so leidlich, dafür treten andere Fehler auf. Lösche mal Deinen Cache, und schau nochmal.
Du hast sehr viele Fehler im CSS, korrigier die mal:
http://jigsaw.w3.org/css-validator/vali ... ome#errors
Speziell handelt es sich hauptsächlich um die doppelten Slashs: // dies ist im CSS nur innerhalb Kommentaren erlaubt.
Re: Kleines IE8 Problem mit Javascript
Posted: Sun May 30, 2010 9:22 pm
by SCM
danke für deine tipps. es sieht jetzt auf jedenfall definitiv mal besser aus als vorher. und sobald ich zeit habe versuche ich mal die vielen fehler zu beheben. danke dir!