Sehr komische Ansicht in IE6 nicht in IE7 und FF

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
extrano
Posts: 8
Joined: Wed 3. Jan 2007, 17:47

Sehr komische Ansicht in IE6 nicht in IE7 und FF

Post by extrano »

hallo community.

ich bin gerade dabei eine seite mit phpwcms zu basteln,
hat auch alles ganz gut geklappt, ausser dieser komische anzeigefehler:

http://img6.picsplace.to/img.php?file=i ... ebug60.jpg

warum ist der artikel soweit unten angeordnet? in den anderen browser werden die 2 artikel ohne problem und richtig angezeigt.

der code im ersten artikel ist dieser hier:

Code: Select all

<br />
<table width="100%" cellpadding="2" border="0">
    <tbody>
        <tr>
            <td width="35%"> Montag:</td>
            <td width="65%">06.30 Uhr - 22.30 Uhr</td>
        </tr>
        <tr>
            <td> Dienstag:</td>
            <td>09.15 Uhr - 22.30 Uhr</td>
        </tr>
        <tr>
            <td>Mittwoch:</td>
            <td>06.30 Uhr - 22.30 Uhr </td>
        </tr>
        <tr>
            <td> Donnerstag:</td>
            <td>09.15 Uhr - 22.00 Uhr</td>
        </tr>
        <tr>
            <td> Freitag:</td>
            <td>06.30 Uhr - 22.00 Uhr </td>
        </tr>
        <tr>
            <td>Samstag und Feiertags:</td>
            <td>10.00 Uhr - 17.30 Uhr</td>
        </tr>
        <tr>
            <td>Sonntag:</td>
            <td>09.00 Uhr - 20.00 Uhr</td>
        </tr>
    </tbody>
</table>
im zweiten artikel ist es dieser hier:

Code: Select all

<br />
<table width="100%" cellpadding="2" border="0">
    <tbody>
        <tr>
            <td width="35%"> Montag, Mittwoch, Freitags:</td>
            <td width="65%">09.00 Uhr - 12.00 Uhr</td>
        </tr>
    </tbody>
</table>
kann mir jemand helfen? ich komme da nicht weiter....

extrano
TODOS ESTÁ LIBRE
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Hi extrano,

das liegt nicht an den Artikeln, die sind ok. Es ist dein Gesamtlayout.
Wie du das aufgebaut hast ist so nicht erkennbar. <DIV> oder Tabelle?

Dort wird etwas mit den Breiten bzw. der Ausrichtung nicht stimmen. Denn der Content beginnt unterhalb des linken Menü-Blocks.

Gruß Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
extrano
Posts: 8
Joined: Wed 3. Jan 2007, 17:47

Post by extrano »

hallo knut,
danke für deine antwort!

stimmt, er beginnt unterhalb, aber nur im IE6!
ich habe div gewählt....

mein css file sieht wie folgt aus:

Code: Select all

body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
}

form, div, p, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

td, th, p, div, span {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px
}

.listEntry {
	margin-bottom: 10px;
}

a, a:link, a:visited, a:active, a:focus {
	color: #FF3300;
	text-decoration: none
}
a:hover {
	color: #FF3300;
	text-decoration: underline;
}

.articleText { 
	margin-bottom: 3px;
	text-align: justify;
}

.articleCode {
	margin-bottom: 3px;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}

.articleSummary {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #000000;
	line-height: 135%;
}

.nav_table, .nav_table a, .nav_table a:link, .nav_table a:active, .nav_table a:visited, .nav_table a:hover {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}
.nav_table a:hover {
	text-decoration: none;
}

.nav_table_active, .nav_table_active a, .nav_table_active a:link, .nav_table_active a:active, .nav_table_active a:visited, .nav_table_active a:hover {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

.articleList_toptext {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
}

.articleList_listhead {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
}


/* CSS for the top level list */
ul.list_top, ul.list_level {
	padding: 3px 0;
	margin-left: 0;
	border-bottom: 1px solid #5E747F;
	font: bold 12px Verdana, sans-serif;
}
ul.list_top li, ul.list_level li {
	list-style: none;
	margin: 0;
	display: inline;
	padding: 0;
}
ul.list_top li a, ul.list_level li a {
	padding: 3px 0.5em;
	margin: 0px;
	border: 1px solid #778;
	border-bottom: none;
	background: #D7DEE5;
	text-decoration: none;
}
ul.list_top li a:link, ul.list_level li a:link { color: #5E747F; }
ul.list_top li a:visited, ul.list_level li a:visited { color: #5E747F; }
ul.list_top li a:hover, ul.list_level li a:hover {
	color: Black;
	background: #92A1AF;;
	border-color: #227;
}
ul.list_top li.active a, ul.list_level li.active a {
	background: white;
	border-bottom: 1px solid white;
}



/** 
 * Sample CSS for DIV pagelayout 
 */
#container {
	width: 678px;
	\width: 678px;
	w\idth: 678px;
	border: 0px solid #000000;
	margin: 10px;
	/*margin-left: auto;
	margin-right: auto;*/
	margin:0px;
	padding: 0px;
}

#headerBlock {
	padding: 0px;
	margin-bottom: 0px;
	background-color: #000000;
}

#mainBlock {
	padding: 5px;
	margin-left: 155px;
	margin-right: 5px;
	background-color: #FFFFFF;

}

#leftBlock {
	float: left;
	width: 150px;
	\width: 150px;
	w\idth: 150px;
	height: 490px;
	margin: 0;
	margin-right: 0px;
	padding: 0px;
	background-color: #000000;
	color:#000000;
}

#rightBlock {
	float: right;
	width: 200px;
	\width: 210px;
	w\idth: 200px;
	margin: 0;
	margin-left: 5px;
	padding: 5px;
	background-color: rgb(235, 235, 235);
}

<!--#footerBlock {
<!--	clear: both;
<!--	padding: 5px;
<!--	margin-top: 0px;
<!--	background-color:#FFFFFF;
<!--	text-align:right;
<!--}
-->


.imgDIVinTextLeft {
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 0;
}
.imgDIVinTextRight {
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
	padding: 0;
} 
.imgDIVtopLeft { 
	margin:8px 10px 5px 20px; 
	padding:0px; 
	border:0; 
} 
.imgDIVtopCenter { 
	margin:8px -50% 5px -50%; 
	padding:0px; 
	border:0; 
}

.imgDIVblockImgLeft { 
	margin-right: 10px;
}
.imgDIVblockImgRight {
	margin-left: 10px; 
} 

.phpwcmsImgListRight {
	text-align: right;
	margin: 0;
	padding: 0;
}
.phpwcmsImgListLeft {
	text-align: right;
	margin: 0;
	padding: 0;
}


.phpwcmsSearchResult {
	margin: 15px 0 15px 0;
}
.phpwcmsSearchResult h3 {
	margin: 10px 0 1px 0;
	font-size: 12px;
	font-weight: bold;
}
.phpwcmsSearchResult p {
	margin: 0;
}
.phpwcmsSearchResult em.highlight, em.highlight {
	background-color: #FFFF00;
	font-style:inherit;
}


#VisualModeIndicator {
	position:absolute;
	left:5px;
	bottom:5px;
	padding:5px;
	z-index:10000;
	background-color:#FF3300;
	color:#FFFFFF;
	border:1px solid #000000;
}

#dhtmltooltip {
position: absolute;
width: 300px;
border: 1px solid black;
padding: 2px;
background-color: #FFFFFF;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

.kursplan:link, .kursplan:visited, .kursplan:hover, .kursplan:active {
text-decoration:underline;
color:#000000;
}
kannst du irgendwas erkennen?

extrano
TODOS ESTÁ LIBRE
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Vermutlich liegt es daran:
#leftBlock {
float: left;
width: 150px;
\width: 150px;
w\idth: 150px;
height: 490px;
margin: 0;
margin-right: 0px;
padding: 0px;
background-color: #000000;
color:#000000;
}
Und was ist das für ein Trick?
<!--#footerBlock {
<!-- clear: both;
<!-- padding: 5px;
<!-- margin-top: 0px;
<!-- background-color:#FFFFFF;
<!-- text-align:right;
<!--}
-->
Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
extrano
Posts: 8
Joined: Wed 3. Jan 2007, 17:47

Post by extrano »

nein leider nicht....

Code: Select all

#leftBlock {
	float: left;
	width: 150px;
	\width: 150px;
	w\idth: 150px;
	/*height: 490px;*/
	margin: 0;
	margin-right: 0px;
	padding: 0px;
	background-color: #000000;
	color:#000000;
}

#rightBlock {
	float: right;
	width: 200px;
	\width: 210px;
	w\idth: 200px;
	margin: 0;
	margin-left: 5px;
	padding: 5px;
	background-color: rgb(235, 235, 235);
}

/*#footerBlock {
clear: both;
padding: 5px;
margin-top: 0px;
background-color:#FFFFFF;
text-align:right;
}
*/
ich habe die höhe reingemacht, da der linke block, also das menü
immer die gleiche grösse behalten soll, da ich aber noch bei manchen kategorien ein submenü habe und der layer somit grösser wird,
wollte ich ein unschönes "hopfen" grösser, kleiner werden der navigation verhindern!

was mich bei dem komischen auskommentieren geritten hat, weiss ich selbst nicht ;-)

extrano
TODOS ESTÁ LIBRE
extrano
Posts: 8
Joined: Wed 3. Jan 2007, 17:47

Post by extrano »

das komische daran ist ja wirklich nur,
das alle anderen artikel / texte ordnungsgemäss oben anschliessen!!!

meiner meinung muss es an dem HTML CODE liegen, da in allen anderen artikel keine tabelle vorkommt und dort es richtig angezeigt wird!

kann mir vielleicht noch jemand ein paar anregungen geben???

extrano
TODOS ESTÁ LIBRE
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Hast du denn einen zweiten Container eingesetzt, damit der IE das begreift?
z.B.

Code: Select all

.mycontent {
   padding: 5px;
   width: 285px;
   text-align:left;
}
Mit dem Aufruf:

Code: Select all

<div class="mycontent">
{CONTENT}
</div>
oder

Code: Select all

<div style="padding: 5px; width: 285px;text-align:left;">
{CONTENT}
</div>
Wo kommt denn der Eintrag in der Tabelle width="100%" her?
Streiche bitte einmal diesen Eintrag, dann wird es sicher funktionieren, bzw. gebe dem inneren Container eine Breite mit.

Test: Gib allen Containern eine unterschiedliche Hintergrundfarbe, dann siehst du was dort passiert.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
extrano
Posts: 8
Joined: Wed 3. Jan 2007, 17:47

Post by extrano »

hi.

funktioniert mittlerweile immer noch nicht, wie gesagt es liegt nur an dem html,
sobald ich eine tabelle in den artikel einpflege zerstört er mir das layout.
habe nun anstatt dem text und der damit verbundenen tabelle einfach eine grafik eingefügt,
ist zwar keine saubere lösung aber anderst weiss ich mir nicht mehr zu helfen.

extrano
TODOS ESTÁ LIBRE
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

Same here, IE is displaying the content under the content of th left box with the submenu and the latest changes.
Only the sitemap is displayed right at the top next to the left box under the header.
Opera is displaying the content right under the header on all sites.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Hi,

what is your DocType in use?

Regards Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

<!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">
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

Ich hab schnell einmal ein DIV template aufgesetzt, bei mir funktioniert es im IE5x - 6 - 7, FF, Opera.

Screenshot IE6:
Image

Code: Select all

/* -------Test CSS ---------------------- */
.y450 { height:450px; float:right; width:1px; }

.mycontent {
   padding: 5px;
   text-align:left;
   width: 285px;
   background-color: #cc7755;
}
#container {
   width: 678px;
   \width: 678px;
   w\idth: 678px;
   border: 1px solid #000000; 
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   padding: 0;
   background-color: #aa4455;
}

#headerBlock {
   padding: 0;
   margin: 0;
   background-color: #8FBFA8;
}

#mainBlock {
/* float: left; */
   padding: 5px;
   margin-left: 155px;
/*   margin-right: 215px; */ 
   background-color: #FFFFFF;
   text-align:left;


}

#leftBlock {
   float: left;
   width: 150px;
   \width: 150px;
   w\idth: 150px;
/*   height: 490px; */ 
   margin: 0;
   padding: 0px;
   background-color: #00bbee;
   color:#000000;
   text-align:left;
}

#rightBlock {
   float: right;
   width: 200px;
   \width: 210px;
   w\idth: 200px;
   margin: 0;
   margin-left: 5px;
/*   height: 490px; */
   padding: 5px;
   background-color: #aaa;
}

#footerBlock {
   clear: both; 
   padding: 5px;
   margin-top: 0px;
   background-color:#FFFFdd;
   text-align:right;
}

/* ENDE TEST ------------ */
Template Haupt:

Code: Select all

<div class="mycontent">
<br />
<table  width="100%" cellpadding="2" border="0">
    <tbody>
        <tr>
            <td width="35%"> Montag:</td>
            <td width="65%">06.30 Uhr - 22.30 Uhr</td>
        </tr>
        <tr>
            <td> Dienstag:</td>
            <td>09.15 Uhr - 22.30 Uhr</td>
        </tr>
        <tr>
            <td>Mittwoch:</td>
            <td>06.30 Uhr - 22.30 Uhr </td>
        </tr>
        <tr>
            <td> Donnerstag:</td>
            <td>09.15 Uhr - 22.00 Uhr</td>
        </tr>
        <tr>
            <td> Freitag:</td>
            <td>06.30 Uhr - 22.00 Uhr </td>
        </tr>
        <tr>
            <td>Samstag und Feiertags:</td>
            <td>10.00 Uhr - 17.30 Uhr</td>
        </tr>
        <tr>
            <td>Sonntag:</td>
            <td>09.00 Uhr - 20.00 Uhr</td>
        </tr>
    </tbody>
</table>
<br />
<table  cellpadding="2" border="0">
    <tbody>
        <tr>
            <td width="35%"> Montag, Mittwoch, Freitags:</td>
            <td width="65%">09.00 Uhr - 12.00 Uhr</td>
        </tr>
    </tbody>
</table>
</div>
DocType:

Code: Select all

<!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">
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

I'm using my own div. But mow I found out, that it has to do with the articletitle. When I hide the articletitle, IE is displaying it right at the top.
When I show it, the content is displayed under the leftbox (just like css clearer).
Guess I have to check my articletitle css:

Code: Select all

h1 {
	margin: 0;
	padding: 10px;
	background: url("../../images/rightcorn.gif") no-repeat top right;
	color: #455270;
	font-weight: bold;
	font-size: 180%;
}

div.round {
	width: 520px;
	margin: 0;
	padding: 0;
	background: #E4E7EE url("../../images/leftcorn.gif") no-repeat top left;
	border-bottom: 2px solid #CC0000;
}

h2 {
	margin: 0;
	padding: 10px;
	color: #336699;
	font-weight: bold;
	font-size: 140%;
}

div.subheader {
	width: 514px;
	margin: 0;
	padding: 0;
	border-bottom: 3px solid #E4E7EE;
	border-left: 3px solid #E4E7EE;
	border-right: 3px solid #E4E7EE;
}

Code: Select all

<div id="content">
      <a name="jump1"></a><div class="round"><h1>Article-Title</h1></div><div class="subheader"><h2>Subtitle</h2></div><h3>.....
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

It has to do with the div.round and div.subheader.
When I disable those in the css, IE is displaying the content
at the top.
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Post by Nordlicht »

After checking it out with IE7, I found something else.

It has to do with the width of my columnbox.

Code: Select all

 <div id="content">
       {CONTENT}
       <div id="columnbox">
       <div id="leftcolumn">{CONTENT_LEFT}</div>
       <div id="rightcolumn">{CONTENT_RIGHT}</div>
       <div id="columnclear"></div>
       </div>
       {CONTENT_BOTTOM}
    </div>
Everything I put in CONTENT_LEFT and CONTENT_RIGHT is displayed
under the LEFT_BOX in IE

Code: Select all

#columnbox {
	width: 96%;
	text-align: justify;
	margin-left: 2%;
	margin-right: 2%;
}

#leftcolumn {
	float: left;
	width: 46%;
	text-align: justify;
	padding: 5px 5px 11px 5px;
	margin-bottom: 10px;
}

#rightcolumn {
	float:right;
	width:46%;
	text-align: justify;
	padding: 5px 5px 11px 5px;
	margin-bottom: 10px;
}

#columnclear {
	clear:both;
	margin-top: 20px;
}

Code: Select all

 <div id="content">
       {CONTENT}
       <div id="columnbox">
       <div id="leftcolumn">{CONTENT_LEFT}</div>
       <div id="rightcolumn">{CONTENT_RIGHT}</div>
       <div id="columnclear"></div>
       </div>
       {CONTENT_BOTTOM}
    </div>
When I set the width of the columnbox to 92% it's displayed at the top like in Opera, but why?
Post Reply