CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

[Opgelost] layout van foto's (Gallery module) in firefox goed maar in IE7 niet

https://forum.cmsmadesimple.org/viewtopic.php?t=41262

Page 1 of 1

[Opgelost] layout van foto's (Gallery module) in firefox goed maar in IE7 niet

Posted: Wed Feb 03, 2010 10:57 am
by rayring
Hallo Allemaal,

Op onderstaande site krijg ik de layout van de fotoalbums niet goed, ziet er prima uit in firefox maar niet in IE7
http://www.drumhero.nl/index.php?mact=Gallery,m6e73e,default,1&m6e73edir=Album3&m6e73ereturnid=16&page=16 iemand een idee.

Dit is de CSS:

Code: Select all

*/
* {
	margin:0;
	padding:0;
	outline:0
}
body {
	font:11px/165% "Lucida Grande",Geneva,Verdana,Arial,Helvetica,sans-serif;
	color:#666666;
	margin:0;
	padding:0 0 50px 0;
	background:#E7E5E8 url(uploads/unbound/bg.jpg) repeat-x;
	text-align: center;
}
/* Links */
a {
	text-decoration:none;
	color:#A56F38;
}
a:hover {
	background:#F0f0f0;
	color:#000;
	border-bottom: 1px dotted #000;
}
/* Headers */
h1,h2,h3 {
	font:bold 1em/1.5em "Trebuchet MS",Tahoma,Arial,Sans-serif;
	color:#111;
	padding:15px 10px 5px 10px;
	margin:0;
}
h1 {
	font-size:345%;
	font-weight:normal;
	letter-spacing:-2px;
}
h2 {
	font-size:200%;
	color:#663333;
}
h3 {
	font-size:170%;
	font-weight:normal;
}
p,dl {
	padding:10px;
	margin:0;
}
ul,ol {
	margin:10px 20px;
	padding:0 20px;
}
ul {
	list-style:none;
}
dt {
	font-weight:bold;
	color:#895F30;
}
dd {
	padding-left: 25px;
}
/* Images */
img {
	background:#fafafa;
	border:1px solid #dcdcdc;
	padding:5px;
}
img.float-right {
	margin:5px 0px 10px 10px;
}
img.float-left {
	margin: 5px 10px 10px 0px;
}
code {
	margin:5px 0;
	padding:15px;
	text-align:left;
	display:block;
	overflow:auto;
	font:500 1em/1.5em 'Lucida Console','courier new',monospace;
	/* white-space:pre;
	*/
	border:1px solid #EBEBEB;
	background:#F0F0F0;
}
acronym {
	cursor:help;
	border-bottom:1px dotted #895F30;
}
blockquote {
	margin:15px 10px;
	padding:10px 10px 10px 35px;
	border:1px solid #F0F0F0;
	background:#F0F0F0 url(uploads/unbound/quote.jpg) no-repeat 10px 10px;
	font-weight:normal;
	font-size:17px;
	line-height:1.5em;
	font-style:italic;
	font-family:Georgia,"Times New Roman",Times,serif;
	color: #555;
}
/* start - table */
table {
	border-collapse:collapse;
	margin:15px 10px;
}
th {
	color:#555;
	background:#E6E6E6;
	height:38px;
	padding-left:12px;
	padding-right:12px;
	text-align:left;
	border-width:1px;
	border-style:solid;
	border-color:#ebebeb #d4d4d4 #d4d4d4 #ebebeb;
}
tr {
	height:34px;
	background:#fff;
}
td {
	padding-left:11px;
	padding-right:11px;
	border: 1px solid #ECECEC;
}
/* end - table */
/* form elements */
form {
	margin:15px 10px;
	padding:5px 10px 20px 10px;
	border:1px solid #f1f1f1;
	background:#fdfdfd;
}
label {
	display:block;
	font-weight:bold;
	margin:8px 0 5px 0;
	color:#895F30;
}
input,select {
	padding:4px;
	font:normal 1em Verdana,sans-serif;
	color:#666666;
	background:#fff;
}
textarea {
	width:350px;
	padding:4px;
	font:normal 1em Verdana,sans-serif;
	height:100px;
	display:block;
	color:#666666;
}
input,textarea,select {
	background:#fff;
	border-width:1px;
	border-style:solid;
	border-color:#D4D4D4 #ebebeb #ebebeb #d4d4d4;
}
input.button {
	font:bold 12px Arial,Sans-serif;
	height:30px;
	margin:0;
	padding:2px 3px;
	color:#555;
	background:#E6E6E6;
	border-width:1px;
	border-style:solid;
	border-color: #ebebeb #d4d4d4 #d4d4d4 #ebebeb;
}
/* search form */
div.searchform form {
	background-color:transparent;
	border:none;
	margin:0;
	padding:12px 0 15px 8px;
	width:190px;
}
div.searchform form p {
	margin:0;
	padding:0 0 10px 0;
}
div.searchform form input.textbox, div.searchform form input {
	width:115px;
	color:#666666;
	height:18px;
	padding:2px;
	vertical-align:top;
}
div.searchform form input.button, div.searchform form input[type=submit] {
	width:60px;
	height:24px;
	padding:2px 5px;
	vertical-align:top;
}
/* ------------------------------------------ LAYOUT------------------------------------------- */ 
#header-wrap {
	position:relative;
	background:#fff url(uploads/unbound/wrap-bg.jpg) no-repeat;
	margin:0 auto;
	width:940px;
	height:385px;
	text-align:left;
}
#header-photo {
	position:absolute;
	top:90px;
	left:24px;
	padding:0;
	height:290px;
	width:890px;
	clear:both;
	/* border:1px solid #F0F0F0;
	*/
}
#header-photo img {
	border:none;
	margin:0;
	padding: 0;
}
/* Navigation */
#nav {
	position:absolute;
	margin:0;
	padding:0;
	width:880px;
	left:25px;
	top:0px;
}
#nav ul {
	float:left;
	list-style:none;
	width:880px;
	height:40px;
	margin:0;
	padding:0;
	display:inline;
}
#nav ul li {
	display:inline;
	margin:0;
	padding:0;
}
#nav ul li a {
	float:left;
	margin:0;
	padding:18px 11px 0 11px;
	font:bold 14px/35px 'Trebuchet MS',Tahoma,Helvetica,Arial,Geneva,Sans-serif;
	text-decoration:none;
	color:#070000;
}
#nav ul li a:hover,#nav ul li a:active {
	color:#663333;
	background:none;
	border:none;
}
#nav ul li#current a {
	color:#000;
	background:#d5d3d6 url(uploads/unbound/nav-current.jpg) repeat-x;
	border-bottom: 1px solid #CECECE;
}
#header-wrap h1#logo-text a {
	position:absolute;
	margin:0;
	padding:0;
	font:normal 62px Georgia,'Times New Roman',Times,serif;
	letter-spacing:-1.5px;
	color:#070000;
	text-decoration:none;
	/* change the values of top and left to adjust the position of the logo*/
	top:135px;
	left:48px;
}
#header-wrap h1#logo-text a:hover {
	background:none;
	border: none;
}
#header-wrap p#intro {
	position:absolute;
	margin:0;
	padding:0;
	font-family:Georgia,'Times New Roman',Times,serif;
	font-weight:normal;
	font-size:18px;
	line-height:1.6em;
	font-style:italic;
	text-transform:none;
	color:#663333;
	width:400px;
	/* change the values of top and left to adjust the position */
	top:205px;
	left:60px;
}
/* header quick search */
#header-wrap div#quick-search form {
	position:absolute;
	top:25px;
	right:25px;
	padding:0;
	margin:0;
	width:260px;
	height:26px;
	background:#fff;
	z-index:999999;
	border:1px solid #D8D8D8;
}
#header-wrap div#quick-search form p {
	margin:0;
	padding:0;
}
#header-wrap div#quick-search form input {
	margin:2px 0 0 4px;
	width:210px;
	background:none;
	border:none;
	color:#ABABAB;
}
#header-wrap div#quick-search form label, #header-wrap div#quick-search form .btn,
#header-wrap div#quick-search form input[type=submit] {
	display:none;
}
#content-outer {
	background:#fff;
	width:100%;
}
#content-wrapper {
	width:940px;
	margin:0 auto;
	text-align:left;
}
#content {
	float:left;
	width:100%;
	background:#fff url(uploads/unbound/content-bg.jpg) no-repeat;
}
.col-one {
	margin-right:280px;
	padding-left:25px;
}
.col-two {
	float:left;
	width:210px;
	margin-left:-455px;
	margin-top:12px;
}
.col-three {
	float:left;
	width:210px;
	margin-left:-235px;
	margin-top:12px;
}
.col-one,.col-two,.col-three {
	padding-bottom:20px;
}
#content .col-one h2 {
	padding-bottom:3px;
	font:normal 3.4em "Trebuchet MS",Tahoma,Arial,Sans-serif;
	color:#000;
	letter-spacing:-2px;
	text-transform:none;
	border-bottom:1px solid #ebebeb;
	margin-left:5px;
	padding-left:5px;
}
#content .col-one h2 a {
	color:#000;
	text-decoration:none;
	background:none;
	border:none;
}
#content .col-one ul li {
	list-style-image:url(uploads/unbound/bullet.gif);
}
#content-wrapper .col-two h3,#content-wrapper .col-three h3, .NewsSummaryLink, .NewsSummaryPostdate {
	color:#111;
	font:normal 1.4em "Trebuchet MS",Tahoma,Arial,sans-serif;
	text-transform:none;
	letter-spacing:-0.5px;
	padding:5px 10px;
	margin: 15px 0 5px 0;
}
/* sidebar menu */
div.sidemenu ul {
	text-align:left;
	margin:7px 5px 8px 0px;
	padding:0;
	text-decoration:none;
	background:url(uploads/unbound/dots.gif) repeat-x left top;
}
div.sidemenu ul li {
	list-style:none;
	background:url(uploads/unbound/dots.gif) repeat-x left bottom;
	padding:6px 10px;
	margin:0;
}
* html body div.sidemenu ul li {
	height:1%;
}
div.sidemenu ul li a {
	text-decoration:none;
	background-image:none;
	background-color:transparent;
	border:none;
	color:#666666;
}
div.sidemenu ul li a span {
	color:#989898;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-style:italic;
	font-weight:normal;
	font-size:1em;
}
div.sidemenu ul li a:hover {
	color:#000;
	background:none;
	border:none;
}
div.sidemenu ul ul {
	margin:0 0 0 5px;
	padding:0;
}
div.sidemenu ul ul li {
	background: none;
}
/* footer */
#footer-wrapper {
	clear:both;
	width:940px;
	margin:0 auto;
	text-align:left;
	font:normal 1em/1.6em 'Trebuchet MS',Tahoma,Sans-serif;
}
#footer-wrapper h3,#footer-wrapper p {
	padding-left:0;
}
#footer-wrapper h3 {
	font:normal 1.6em/1.6em 'Trebuchet MS',Tahoma,Arial,Sans-serif;
	color:#ABABAB;
}
#footer-wrapper a {
	color:#696969;
	background:transparent;
}
#footer-wrapper ul.footer-list {
	border-top:1px solid #111;
	list-style:none;
	padding:0;
	margin-left:0;
}
#footer-wrapper ul.footer-list li {
	border-bottom:1px solid #111;
}
#footer-wrapper ul.footer-list li a {
	display:block;
	width:98%;
	line-height:2em;
	font-weight:bold;
	padding:4px 0;
	border:none;
	margin-left:0;
	padding-left:0;
	color:#666666;
}
#footer-wrapper ul.footer-list li a span {
	color:#444;
	font-style:italic;
	font-weight:normal;
	font-family:Georgia,'Times New Roman',Times,serif;
}
#footer-wrapper ul.footer-list li a:hover,#footer-wrapper ul.footer-list li a:hover span {
	color:#fff;
	text-decoration:none;
}
#footer {
	float:left;
	width:100%;
	padding:0;
	margin-left:5px;
	margin-top:10px;
}
#footer-bottom {
	clear:both;
	border-top:1px solid #969696;
	width:880px;
	margin:0 auto;
}
#footer-bottom .bottom-left {
	float:left;
	padding-left:5px;
}
#footer-bottom .bottom-right {
	text-align:right;
	padding-right: 0;
}
/* postmeta */
.postmeta {
	padding:5px;
	margin:20px 10px 15px 10px;
	font-size:1em;
	color:#777;
	border:1px solid #EBEBEB;
	background:#F5F5F5;
}
.postmeta a {
	background:transparent;
}
.postmeta .date {
	margin:0 10px 0 5px;
}
.postmeta a.comments {
	margin:0 10px 0 5px;
}
.postmeta a.readmore {
	margin:0 10px 0 5px;
}
.post-info, #NewsPostDetailDate {
	font-size:.95em;
	padding-top:3px;
	margin-left:5px;
	color:#bababa;
}
.post-info a {
	color: #000;
}
/* thumbnails */
p.thumbs {
	padding:12px 0 0 10px;
}
.thumbs img {
	position:relative;
	padding:4px;
	margin:5px;
	background:#fafafa;
	border:1px solid #dcdcdc;
}
.thumbs img:hover {
	border:1px solid #8E8E8E;
	background:#8E8E8E;
}
.thumbs a:hover {
	background-color:transparent;
	border: none
}
/* alignment classes */
.float-left {
	float:left;
}
.float-right {
	float:right;
}
.align-left {
	text-align:left;
}
.align-right {
	text-align: right;
}
/* clearing */
.clearer {
	clear:both;
}
.clear {
	display:inline-block;
}
.clear:after {
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
	content: ".";
}

.NewsSummaryCategory,  .NewsSummaryAuthor, .NewsSummaryContent, #NewsPostDetailCategory,
#NewsPostDetailAuthor, #NewsPostDetailContent,  #NewsPostDetailPrintLink, #NewsPostDetailReturnLink, .NewsSummarySummary, .NewsSummaryMorelink {
        padding: 0 10px;
}
#NewsPostDetailHorizRule {
         display: none;
}
 
/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
  position: absolute;
  left: -5000px;
  width: 4000px;
}
/* end wiki style external links */

Re: layout van foto's (Gallery module) in firefox goed maar in IE7 niet

Posted: Wed Feb 03, 2010 11:11 am
by Jos
De css die je hier toont is niet degene die de gallery elementen de opmaak geeft. Die css vind je in de template-editor binnen Gallery.

je zou daar de een breedte kunnen instellen. Bovendien overlappen de afzonderlijke foto's elkaar in hoogte. Die hoogte zou je kunnen opkrikken. Boven aan in het css veld binnen de fancybox template zou je kunnen toevoegen/wijzigen:

Code: Select all

.gallery { width: 700px; }

.gallery .img {
	height: 150px;
.... etc

Re: layout van foto's (Gallery module) in firefox goed maar in IE7 niet

Posted: Wed Feb 03, 2010 12:58 pm
by rayring
Ja super dat werkt  ;D ik heb de CSS van de gallery aangepast..
Wel raar dat de layout zonder de aanpassing in firefox wel goed was..

Bedankt Jos!
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited