Problem: Seitenlayout: Scrollbars

[Ande]

ich möchte auf meiner Seite Scrollbars erlauben, leider ergibt sich daraus folgendes Problem:

Im Internet Explorer erscheint neben den Container rechts noch einmal eine Fläche so groß wie der Container, auf dem nur die bgcolor zu sehen ist.
Diese Fläche ist zu sehen wenn man den horizontalen Scrollbalken nach rechts schiebt.

Hier die CSS:

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: 5px;
	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: #4A5966;
	font-weight: normal;
	text-decoration: none;
}
.nav_table a:hover {
	text-decoration: underline;
}

.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: #4A5966;
	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;
}

#container {
	width: 1200px;
	\width: 1200px;
	w\idth: 1200px;
        height: 950
	border: 0px solid gray;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	background-color: rgb(255, 255, 255);
}

#headerBlock {
align: center
	background-color: rgb(255, 255, 255);
}

#mainBlock {
	padding: 0px;
        margin-left: 10px;
	margin-right: 0px;
}


#leftBlock {
	float: left;
	width:0px;
	\width: 0px;
	w\idth: 0px;
	margin: 0;
	margin-right: 0px;
	padding: 0px;
	background-color: rgb(255, 255, 255);
}

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

#footerBlock {
	clear: both;
	padding: 0px;
	margin-top: 0px;
	background-color: rgb(213, 219, 225);
}

.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;
}

.phpwcmsArticleListEntry {
	clear: both;
}
.phpwcmsArticleListImage {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	padding-top: 3px;
}
.phpwcmsArticleListImageCaption {
	padding-top: 5px;
}

div.cpPagination {
	margin: 10px 0 10px 0;
	text-align: right;
}
a.cpPaginate, a.cpPaginateActive, a.cpPaginationPrev, a.cpPaginationNext {
	padding: 0px 3px 1px 3px;
	background-color: #FFFFFF;
	color: #BBBBBB;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid #CBCBCB;
}
a.cpPaginateActive {
	background-color: #CBCBCB;
	color: #FFFFFF;
	border: 1px inset #CBCBCB;
}

a.cpPaginationPrev:hover, a.cpPaginationNext:hover, a.cpPaginate:hover {
	background-color: #DDDDDD;
	color: #666666;
	border: 1px inset #CBCBCB;
}

Wäre nett wenn einer von euch eine Lösung wüsste.

Ansonsten Scrollbars ade:

html, body {
overflow:hidden;
}

Vielen Dank

Ande

[update]

vielleicht einen Link?
Wie ist die Seite aufgebaut?
usw

[Ande]

Hier der Link: http://burgweintingfw.bu.ohost.de/index.php?startseite

Is des im mom nur bei mir so??? oder auch bei euch? - I verwend an Internet Explorer 7!

[flip-flop]

Hallo,

sorry aber ich würde erst einmal das ganze JS Gedaddel rausnehmen. Eine Feuerwehrseite die nur mit JS funktioniert?
Dann kann man weitersehen wo das Problem liegt. Übringens zerhaut es im IE6 das Layout. Der Haupt-Content beginnt erst unterhalb des Sidebar-Bildes.
Vertikal scrollen geht gar nicht.

Bei der Seitenentwicklung sollte man eigentlich Step by Step vorgehen.
1. Überlegen was ich eigentlich wie aufbauen möchte, also einen groben Plan skizzieren.
2. Spartanisches Grundlayout -> Prüfen in den gängigen Browsern
3. Layout ausbauen -> Prüfen in den gängigen Browsern -> Layout valide?
4. Einen langen Artikel einsetzen und die sidebar mit einfachem Inhalt bestücken -> Prüfen in den gängigen Browsern
5. Navigation (ohne JS) einbauen -> Prüfen in den gängigen Browsern
6. Feinschliff des Gesamt-Layouts -> Prüfen in den gängigen Browsern -> Layout valide?
7. Layout der einzelnen Artikel/CPs -> Prüfen in den gängigen Browsern
8. Formular einbauen/layouten -> Prüfen in den gängigen Browsern
9. Jetzt kommt der Punkt an dem das ganze Gedaddel wie bunte PopUp-Fenster und bewegte Elemente/JS eingesetzt werden.
Knut

[update]

Code: Select all

#container {
	width: 1200px;
	\width: 1200px;
	w\idth: 1200px;
        height: 950
	border: 0px solid gray;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	background-color: rgb(255, 255, 255);
}

Immer die Zeile mit ; abschliessen und eine Maßeinheit (px, %, em) dazugeben. Dann nochmal probieren. ( height: 950 )

[Jensensen]

ich möchte auf meiner Seite Scrollbars erlauben,...

gute idee
greetz

ps: alles andere wäre auch tv...

[flip-flop]

Vertikal scrollen geht gar nicht.

Ich meinte das horizontale Scrollen sollte man nicht verwenden.

Knut