 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Gronkalonka
Threadersteller
Dabei seit: 14.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 16.03.2009 12:21
Titel Wieso zerschießt der IE so mein Layout? |
  |
|
Hallo,
ich baue grad meine erste Website und hab deshalb noch keine Erfahrungen, woran des liegen könnte, dass der Internet Explorer mein Layout so zerstört. Auf jeden Fall bin ich fast fertig mit meiner Homepage, im Firefox und Safari läuft alles bestens und jetzt bin ich mal auf brwosershots.org , damit ich des ganze auch im IE sehen kann und da kam folgendes heraus...
Aufm IE 8.0 scheints zu gehen:
Der IE 7.0 verschiebt schon irgendwie den unteren schwarzen Balken:
Und der IE 6.0 macht irgendwas
Sorry für die großen Bilder von browsershots.org, aber ich dachte, so kann mans gut vergleichen.
Kann jemand sagen oder vermuten, woran sowas liegen könnte?
Vielen Dank!
|
|
| |
  |
 |
lexk
Dabei seit: 11.11.2007
Ort: Fürth
Alter: 35
Geschlecht: 
|
Verfasst Mo 16.03.2009 12:23
Titel
|
|
|
na dann hau doch bitte mal den quellcode her, dann können dir sicher die meisten hier helfen - so wirds leider nichts 
|
|
| |
 |
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 16.03.2009 12:35
Titel
|
|
|
|
Verschoben von Software-Nonprint
|
|
| |
|
|
Gronkalonka
Threadersteller
Dabei seit: 14.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 16.03.2009 13:00
Titel
|
|
|
so, dann heir mal quellcode und css:
| 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"><!-- InstanceBegin template="/Templates/uc_image.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Under Canvas</title>
<!-- InstanceEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
-->
</style></head>
<body onload="MM_preloadImages('images/prev_rollover.gif','images/next_rollover.gif','images/navi_dreieck_rollover.gif','images/presskit_rollover.gif')">
<div class="container">
<div class="header">
<div class="logo"><img src="images/logo.gif" alt="" name="logo" width="198" height="80" id="logo" /></div>
<!-- InstanceBeginEditable name="Prev" -->
<div class="prev"><img src="images/prev_leer.gif" name="Prev" width="77" height="64" border="0" id="Prev" /></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Next" -->
<div class="next"><a href="image3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Next','','images/next_rollover.gif',1)"><img src="images/next.gif" alt="Next" name="Next" width="77" height="64" border="0" id="Next" /></a></div>
<!-- InstanceEndEditable -->
<p> </p>
</div>
<div class="navi">
<div class="navibutton1"><img src="images/navi_news.gif" width="175" height="19" alt="News" /><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Click1','','images/navi_dreieck_rollover.gif',1)"><img src="images/navi_dreieck.gif" alt="Click" name="Click1" width="23" height="19" border="0" id="Click1" /></a></div>
<div class="navibutton3"><img src="images/navi_band.gif" width="175" height="19" alt="Band" /><a href="band.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Click21','','images/navi_dreieck_rollover.gif',1)"><img src="images/navi_dreieck.gif" alt="Click" name="Click21" width="23" height="19" border="0" id="Click21" /></a></div>
<div class="navibutton3"><img src="images/navi_live.gif" width="175" height="19" alt="Live" /><a href="live.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Click22','','images/navi_dreieck_rollover.gif',1)"><img src="images/navi_dreieck.gif" alt="Click" name="Click22" width="23" height="19" border="0" id="Click22" /></a></div>
<div class="navibutton3"><img src="images/navi_image.gif" width="175" height="19" alt="Image" /><a href="image.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Click23','','images/navi_dreieck_rollover.gif',1)"><img src="images/navi_dreieck.gif" alt="Click" name="Click23" width="23" height="19" border="0" id="Click23" /></a></div>
<div class="navibutton3"><img src="images/navi_audio.gif" width="175" height="19" alt="Audio" /><a href="audio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Click24','','images/navi_dreieck_rollover.gif',1)"><img src="images/navi_dreieck.gif" alt="Click" name="Click24" width="23" height="19" border="0" id="Click24" /></a></div>
<div class="navibutton3"><img src="images/navi_contact.gif" width="175" height="19" alt="Contact" /><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Click25','','images/navi_dreieck_rollover.gif',1)"><img src="images/navi_dreieck.gif" alt="Click" name="Click25" width="23" height="19" border="0" id="Click25" /></a></div>
</div>
<div class="content">
<div class="bar_top"><img src="images/bar_top.gif" width="456" height="22" /></div>
<!-- InstanceBeginEditable name="Content Headline" -->
<div class="contentheadline"><img src="images/image_headline.gif" alt="Image" width="456" height="18" /></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="Content" -->
<div class="contentcontent">
<div class="bar_bottom"><span class="text_headline"><img src="images/bar_middle.gif" width="456" height="11" /></span></div>
<div class="text_image_headline">16/12/08 - Munich/Substanz</div>
<div class="image_thumbnails">
<div class="image_thumbnail"><a href="images/image/081216substanz/undercanvas1.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/undercanvas1_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/PC160149edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160149edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/PC160129edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160129edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail_right"><a href="images/image/081216substanz/PC160117edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160117edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/PC160110edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160110edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/PC160093edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160093edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/PC160075edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160075edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail_right"><a href="images/image/081216substanz/PC160063edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160063edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/PC160040edit.JPG" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/PC160040edit_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/_DSC2036.jpg" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/_DSC2036_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail"><a href="images/image/081216substanz/_DSC2034.jpg" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/_DSC2034_thumb.jpg" width="111" height="111" border="0" /></a></div>
<div class="image_thumbnail_right"><a href="images/image/081216substanz/_DSC2033.jpg" rel="lightbox[081216substanz2]"><img src="images/image/081216substanz/_DSC2033_thumb.jpg" width="111" height="111" border="0" /></a></div>
</div>
</div>
<!-- InstanceEndEditable --></div>
<div class="presskit"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Presskit','','images/presskit_rollover.gif',1)"><img src="images/presskit.gif" alt="Presskit" name="Presskit" width="130" height="37" border="0" id="Presskit" /></a></div>
</div>
</body>
<!-- InstanceEnd --></html>
|
| Code: |
@charset "UTF-8";
.styles {
}
.container {
height: 608px;
width: 681px;
margin-top: -304px;
margin-left: -340px;
position: absolute;
left: 50%;
top: 50%;
}
.logo {
float: left;
height: 80px;
width: 198px;
position: relative;
}
.prev {
float: left;
height: 64px;
width: 77px;
margin-left: 313px;
position: relative;
}
.navi {
float: left;
height: 528px;
width: 198px;
position: relative;
}
.header {
height: 80px;
width: 681px;
position: relative;
}
.next {
float: left;
height: 64px;
width: 77px;
margin-left: 11px;
position: relative;
}
.content {
float: left;
height: 474px;
width: 456px;
margin-left: 16px;
position: relative;
}
.presskit {
float: right;
height: 37px;
width: 130px;
margin-top: 17px;
position: relative;
}
.navibutton1 {
height: 19px;
width: 198px;
margin-top: 295px;
float: left;
position: relative;
}
.navibutton3 {
height: 19px;
width: 198px;
margin-top: 359px;
position: relative;
}
.navibutton3 {
float: left;
height: 19px;
width: 198px;
margin-top: 13px;
position: relative;
}
.contentheadline {
height: 18px;
width: 456px;
float: left;
margin-top: 4px;
position: relative;
}
.contentcontent {
float: left;
width: 456px;
margin-top: 45px;
height: 385px;
position: relative;
}
.bar_top {
float: left;
height: 22px;
width: 456px;
position: relative;
}
.bar_middle {
margin-top: 10px;
margin-bottom: 10px;
float: left;
height: 11px;
width: 456px;
position: relative;
}
.bar_bottom {
height: 11px;
width: 456px;
position: absolute;
bottom: 0px;
float: left;
}
.more_info {
float: right;
height: 14px;
width: 112px;
position: relative;
}
.text_headline {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
line-height: 17px;
position: relative;
float: left;
width: 456px;
}
.text_live {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 18px;
font-weight: bold;
text-decoration: none;
position: relative;
float: left;
}
.text_normal {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
position: relative;
float: left;
width: 456px;
line-height: 13px;
}
.text_band_blocksatz {
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
float: left;
width: 274px;
position: relative;
line-height: 13px;
}
.no_flash {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: absolute;
left: 0px;
bottom: 15px;
}
.text_box {
float: left;
width: 456px;
position: relative;
}
.image_thumbnail {
height: 111px;
width: 111px;
float: left;
margin-bottom: 4px;
margin-right: 4px;
position: relative;
}
.image_thumbnail_right {
height: 111px;
width: 111px;
position: relative;
float: left;
margin-bottom: 4px;
}
.image_thumbnails {
height: 341px;
width: 456px;
float: left;
}
.player {
float: right;
height: 106px;
width: 206px;
position: absolute;
right: 1px;
bottom: 15px;
}
.text_image_headline {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
position: relative;
float: left;
width: 456px;
margin-top: 12px;
line-height: normal;
}
.contentcontent_headline {
height: 18px;
width: 456px;
float: left;
position: relative;
}
.image_band {
float: right;
position: relative;
}
|
So, ich hoffe, das hilft 
[edit kash: Bitte CODE Button benutzen]
Zuletzt bearbeitet von Kash am Mo 16.03.2009 13:37, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Pogomeal
Dabei seit: 12.03.2009
Ort: Dresden
Alter: 35
Geschlecht:
|
Verfasst Mo 16.03.2009 19:43
Titel
|
|
|
Der IE neigt immer mal dazu gewisse Standards anders zu interpretieren, was dann mit conditional comments zu beheben ist.
Aber da der IE7 sich in die Richtung schon etwas verbessert hat, sollte eine Optimierung des Stylesheets u.U. schon zum gewünschten Ergebnis führen.
CC ist bei mir immer 2. Wahl.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Outlook zerschießt Newsletter-Layout
HTML Export aus InDesign zerschießt Layout
Outlook 2007 zerschießt meinen Newsletter
Firefox zerschießt CSS, abhängig vom Server [solved]
Website mit festen Layout in dynamisches Layout umbauen
Word -> iPad Pages -> Word zerschießt Rahmen
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
