✔ Seite im IE erst nach Aktualisierung voll sicht- und scrollbar

Status
Nicht offen für weitere Antworten.
Felix Kunsmann

Felix Kunsmann

Kurz weg …
Hallo!

Ich habe folgendes Problem:
In Firefox, Konqueror und Opera wird meine Seite korrekt angezeigt und man kann auch sofort bis ans Ende Scrollen.

Nur im IE muss man erst 1-2-mal Aktualisieren, bis man über den unteren Rand der Navigation scrollen kann.

Der Aufbau meiner Seite ist folgender:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" href="/2col_leftNav.css" type="text/css" />
<title>Felix Kunsmann - G&auml;stebuch</title>
</head>>
<body>

<div style="height:0px; visibly:hidden;"><a name="top"></a></div>

<div id="masthead">
  <h1 id="siteName"><a href="/"><img src="/home/banner.jpg" style="width:468px; height:60px; border:none; vertical-align:middle;" alt="Felix Kunsmann"  title="Zur Startseite"/></a></h1>
</div>

<div id="content">
  <h2 id="pageName">Gästebuch</h2>

<!-- Inhalt der Seite -->

</div>

<div id="navBar">
  <!-- Navigation -->
</div>

<div style="clear:both;">&nbsp;</div>

</body>
</html>

Code: 
body{
        font-family: Arial,sans-serif;
        color: #333333;
        line-height: 1.166;     
        margin: 5px;
        padding: 0px;
}

a:link, a:visited, a:hover {
        color: #006699;
        text-decoration: none;
}

a:hover {
        text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
        font-family: Arial,sans-serif;
        margin: 0px;
        padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
}

h2{
 font-size: 114%;
 color: #006699;
}

h3{
 font-size: 100%;
 color: #334d55;
 text-decoration:underline;
}

h4{
 font-size: 100%;
 font-weight: normal;
 color: #333333;
}

h5{
 font-size: 100%;
 color: #334d55;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}
                                

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
        margin: 0px;
        padding: 0px;
        width: 78%;
        border-bottom:1px solid #CCCCCC;
        float:right;
}

#navBar{
        margin: 25px 79% 25px 0px;
        padding: 10px;
        background-color: #eeeeee;
        border: 1px solid #cccccc;
        font-size:12px;
}

#content{
        float:right;
        width: 78%;
        margin: 0px;
        padding: 0px;
}

/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
        margin: 0px;
        padding: 0px 0px 10px 10px;
        text-align:center;
}


/*************** #pageName styles **************/

#pageName{
        padding: 0px 0px 10px 10px;
        margin-left:100px;
}


/************* #globalNav styles **************/

#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {
        font-size: 90%;
        padding: 0px 4px 0px 0px; 
}


/************* #breadCrumb styles *************/

#breadCrumb{
        font-size: 80%;
        padding: 5px 0px 5px 10px;
}


/************** .feature styles ***************/

.feature{
        padding: 10px;
        font-size: 80%;
        border:1px dotted #CCCCCC;
}

.feature h3{
        padding: 10px 0px 5px 0px;
        text-align: center;
}

.feature img{
        float: left;
        padding: 0px 10px 0px 0px;
        margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story{
        clear: both;
        padding: 10px;
        font-size: 80%;
        border:1px dotted #CCCCCC;
}

.story p{
        padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
        clear: both;
        border: 1px solid #cccccc;
        font-size: 75%;
        color: #cccccc;
        padding: 10px 10px 10px 10px;
        margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
        the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
        padding: 4px 4px 4px 0px;
        vertical-align: middle;
}


/************* #search styles ***************/

#search{
        padding: 5px 0px 5px 10px;
        border-bottom: 1px solid #cccccc;
        font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
        display: block;
        margin: 0px;
        padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
        position: relative;
        margin: 0px;
        margin-top:-1px;
        padding: 0px;
        font-size: 90%;
}

#sectionLinks li{
        margin:2px;
        border:1px solid #CCCCCC;
}

#sectionLinks h3{
        padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
        padding: 2px 0px 2px 10px;
        width: 100%;
        voice-family: "\"}\""; 
        voice-family:inherit;
        width: auto;
        border-top: 1px solid #FFFFFF;
        border-left:1px solid #FFFFFF;
        border-bottom:1px solid #000000;
        border-right:1px solid #000000;
}

#sectionLinks a:visited{
        padding: 2px 0px 2px 10px;
        border-top: 1px solid #FFFFFF;
        border-left:1px solid #FFFFFF;
        border-bottom:1px solid #000000;
        border-right:1px solid #000000;
}

#sectionLinks a:hover{
        border-top: 1px solid #000000;
        border-left:1px solid #000000;
        border-bottom:1px solid #FFFFFF;
        border-right:1px solid #FFFFFF;
        background-color: #dddddd;
        text-decoration:none;
        padding: 2px 0px 2px 10px;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
        margin: 0px;
        padding: 0px 0px 10px 10px;
        font-size: 90%;
}

.relatedLinks h3{
        padding: 10px 0px 2px 0px;
}


/************** #advert styles **************/

#advert{
        padding: 10px 0px 0px 10px;
        font-size: 80%;
        border-top: 1px solid #cccccc;
}

#advert img{
        display: block;
}


/************** #headlines styles **************/

#headlines{
        margin: 0px;
        padding: 10px 0px 20px 10px;
        font-size: 80%;
}

.close{ float:right; font-size:12px;
}

Der schön zu sehen ist der Effekt im Gästebuch.

Und bevor einer Fragt: Die Site ist Valid XHTML 1.0 Transitional und im Umbau zu Strict.
 
Zuletzt bearbeitet:
Vielleicht stört sich der IE daran, daß nach den floatenden Boxen nicht der normale Textfluss im Dokument hergestellt wird?

Btw, bei mir tritt das Problem im IE 6.0 (Win2k Prof. SP4) garnicht auf.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück