Altes Lied: IE verschiebt teile des Contents

themaker · Post by **themaker** » Wed Aug 25, 2010 8:47 am

Hallo,

ich hoffe hier kann mir jemand einen Tipp geben.

Habe gestern für einen Freund unter http://www.drumsformers.com
die von mir in Joomla gestaltete Homepage hochgeladen.

Sieht im Firefox auch genauso aus, wie es sein sollte.

Im Internet Explorer allerdings hat sich zunächst der Hintergrund
für die Slideshow verschoben.

Dieses Problem konnte ich mittlerweile lösen, indem ich in der
ieonly.css den content-Bereich extra angegeben habe.

/* IE ONLY CSS */
* html div.joomla div.headline,
* html div.joomla div.item,
* html div.joomla div.item-bg {zoom:1;}

#content{
margin-top: -8px;
}

Somit ist der Hintergrund im IE da wo er sein sollte.

Etwas verwunderlich allerdings, da ich auf der Testumgebung
http://www.drumsformers2.bplaced.net/drumsformers2/
mit den gleichen CSS-Files wie jetzt auf der drumsformers.com
gearbeitet habe.

Mein größtes Problem ist und bleibt allerdings das Slideshow-Plugin
von bretteleben.de.

Im IE verschiebt liegt es zu weit oben und passt nicht mehr auf die Hintergrund-Grafik.

Nachfolgend poste ich auch mal die template.css und den html-code.

Wenn mir jemand helfen könnte, wäre ich sehr dankbar.

template.css

/* CSS TEMPLATENAME
*********************************************/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol,
ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {border:0; font-size:100%; margin:0;
padding:0;}
a {outline:none;}
table {border-collapse:collapse; border-spacing:0;}
fieldset, img {border:0;}
del, ins {text-decoration:none;}
caption, th {text-align:left;}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}
q:before, q:after {content:'';}
abbr, acronym {border:0; font-variant:normal;}
sup, sub {vertical-align:baseline;}
legend {color:#000;}
input, button, textarea, select, optgroup, option
{font-family:inherit; font-size:inherit;
font-style:inherit; font-weight:inherit;}
input, button, textarea, select {*font-size:100%;}

/* start */

html {height:100%; margin-bottom:1px;}

body {
background-image: url(../images/df_bg_back.jpg);
background-repeat:repeat-x;
background-color:#fff;
color:#000;
font:normal normal normal 11px/15px arial,sans-serif;
text-align:center;
}

/* Layout
*********************************************/

div#overall {
height:100%;
padding: 0px;
text-align:center;
}

div#container {text-align:center;}

/* Layout Classes */

/* Floats */
.floatLeft {float:left;}
.floatRight {float:right;}
.floatClear {clear:both;}

/* Menus
*********************************************/

/* Links
*********************************************/
a:link, a:visited {color:#fff; font-weight:normal; text-decoration:underline;}
a:hover {color:#ccc; text-decoration:none;}

/* Content
*********************************************/

#page_bg {
background: url(../images/df_background.jpg) 100% 0 no-repeat;
background-position: top center;
position: fixed;
overflow: scroll;
width: 100%;
height: 100%;
}

#container
{
margin: 0 auto;
width: 1000px;
margin-top:230px;
}

#content-container
{
float: left;
/*width: 1000px;*/
}

#section-twitter {
float: left;
width: 260px;
heigth: 280px;
padding: 5px 0;
margin: 0 0px;
display: inline;
margin-right: auto;
margin-left: auto;
}

#content
{
float: left;
width: 450px;
/*padding: 0px 0;*/
margin: 0 0 0 30px;
background: url(../images/bg_fotos.png) no-repeat center;
}

#section-links
{
float: right;
width: 150px;
padding: 20px 0;
margin: 0 100px 0 0;
display: inline;
}

#footer
{
float: right;
color: #000000;
text-align: right;
margin-top: 20px;
margin-right: 210px;
height: 1%;
}

html-Code:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<!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="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="http://www.drumsformers.com/templates/s ... system.css" type="text/css" />
<link rel="stylesheet" href="http://www.drumsformers.com/templates/css/general.css" type="text/css" />
<link rel="stylesheet" href="http://www.drumsformers.com/templates/t ... mplate.css" type="text/css" />



</head>

<body>

<div id="page_bg">

<div id="container">

<div id="section-ticker">
<div id="tour_ticker"><jdoc:include type="modules" name="top" style="none" /></div>
</div>

<div id="content-container">

<div id="section-twitter">

<div id="twitter_news"><jdoc:include type="modules" name="left" style="none" /></div>

</div>

<div id="content">

<div id="fotos"><jdoc:include type="component" /></div>

</div>

<div id="section-links">

<div id="link_area"><jdoc:include type="modules" name="right" style="none" /></div>

</div>

<div id="footer">
Copyright © Drumsformers, 2010
</div>
</div>
</div>

</div>

</body>

</html>

themaker · Post by **themaker** » Wed Aug 25, 2010 5:31 pm

Hallo und guten Abend,

teilweise habe ich das Problem gelöst.

Zumindest der IE8 zeigt es jetzt korrekt an.

Aber was macht der IE7?

http://browsershots.org/screenshots/fe8 ... 775ed4de68

Irgendwelche Tipps?

Vielen Dank!

LG
The Maker

themaker · Post by **themaker** » Thu Aug 26, 2010 5:00 pm

Hallo,
bisher leider keine Antworten und/oder Hilfen :-(

Mittlerweile läuft die Seite unter Firefox und dem IE8 ganz passabel
Opera verschiebt noch ein bisschen die Slideshow.
Der IE7 macht mir allerdings noch immer Probleme.
Ich schaffe es dort einfach nicht die Slideshow, welche ein "Beitrag" ist,
über dem dafür bestimmten Hintergrund zu platzieren.
Habe mir schon überlegt, ob es mit dem Content zusammenhängt oder ob
ein Eingriff in die CSS-File der Slideshow erfolgen muss, aber irgendwie
hilft mir nichts weiter.

Ich poste nachfolgend einfach mal den groben Code und hoffe auf Eure Hilfe.

HTML (Grundaufbau der Seite):

<body>
<div id="page_bg">
<div id="container">
<div id="content-container">
<div id="section-twitter"><jdoc:include type="modules" name="left" style="none" /></div>
<div id="section-ticker"><jdoc:include type="modules" name="top" style="none" /></div>
<div id="content"><jdoc:include type="component" /></div>
<div id="section-links"><jdoc:include type="modules" name="right" style="none" /></div>
<div id="footer">Copyright © Drumsformers, 2010</div>
</div>
</div>
</div>
</body>
</html>

Die CSS für den IE7 (ie7only.css) hat folgenden Inhalt:

* html div.joomla div.headline,
* html div.joomla div.item,
* html div.joomla div.item-bg {zoom:1;}

#page_bg {
background: url(../images/df_background.jpg) no-repeat;
margin: 0 auto;
position:relative;
overflow:auto;
overflow-x: hidden;
}

#container
{
margin-top:230px; /*verschiebt den gesamten Seiteninhalt*/
text-align:center;
}

#content-container
{
float: left;
}

#content{
float: left;
height: 327px;
width: 450px;
padding: 0px 0;
margin: 0 0 0 30px;
background: url(../images/bg_fotos.png) no-repeat center;
}

#footer
{
margin: 0 auto;
margin-top: 25px;
margin-right: 210px;
height: 1%;
}

Biiiiiiiiiiiiittteeeeeee!!!

Ich bin am Verzweifeln!

LG
themaker

themaker · Post by **themaker** » Thu Aug 26, 2010 6:02 pm

Schaut bitte auch mal auf meine Testseite,
wo man anhand der Rahmen sehen kann,
wo was ist.

Die Slideshow liegt total "daneben".

http://www.drumsformers2.bplaced.net/drumsformers2/

sbr · Post by **sbr** » Tue Sep 14, 2010 8:15 pm

Du glaubst nicht ernsthaft, dass jemand deinen ganzen Code aufräumt, oder?! Die Seite ist mittlerweile nicht einmal mehr online - so wird "datt nüscht".

Es wäre nicht schlecht, wenn die Seite online wäre.

The Joomla! Forum™

Altes Lied: IE verschiebt teile des Contents

Altes Lied: IE verschiebt teile des Contents

Re: Altes Lied: IE verschiebt teile des Contents

Re: Altes Lied: IE verschiebt teile des Contents

Re: Altes Lied: IE verschiebt teile des Contents

Re: Altes Lied: IE verschiebt teile des Contents