Hya,
At http://www.xarno.nl/fotoalbum/ I've created my own theme (adjusted some other files ;))
My problem is after selecting the picture details.
The screen looks ok at OS Fedora. Browsers : Firefox 2, MSIE 6, Opera 9.23
The screen doesn't look ok at Win XP MCE with browser Firefox 3, Google Chrome
The menu + topbar + everything takes the width of the picture- + filmstrip frame.
In the other browsers these are set at screen width (which is the purpose)
Is this something with a new style of rendering by the new browsers?
The content of your template.html (http://www.xarno.nl/fotoalbum/themes/xarno/template.html) is<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/xarno/style.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html,v 1.2 2005/12/04 03:22:35 donnoman Exp $ -->
</head>
<body>
{CUSTOM_HEADER}
<!-- begin uitlijntabel kop -->
<table style="width : 100%; border : 0px;">
<tr>
<td style="width : 95px;"> </td>
<td>
<!-- einde uitlijntabel kop -->
<table width="95%" border="0" cellpadding="5" cellspacing="5">
<tr>
<td valign="top" style="background-color : #EBF9B5;">
<SPAN CLASS="menus"> {SYS_MENU} <br /> {SUB_MENU}</SPAN>
<img src="images/spacer.gif" width="1" height="15" alt="" />
<br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
{ADMIN_MENU}
{GALLERY}
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- begin uitlijntabel voet -->
</td></tr></table>
<!-- einde uitlijntabel voet -->
{CUSTOM_FOOTER}
</body>
</html>
The content of your stylesheet (http://www.xarno.nl/fotoalbum/themes/xarno/style.css) isbody {
font-family : tahoma, arial, sans-serif;
font-size: 12px;
background-image : url(../../../pics/achtergrond.gif);
background-repeat : repeat-y;
background-color : #EBF9B5;
padding-left : 30px;
color : #000000;
}
.menu {
position : absolute;
left : 150px;
top : 8px;
}
.menu img {
border : none;
}
.menus a {
color : #000000;
}
.tekst {
position : absolute;
top : 125px;
}
.tables_maintable
{
width: 90%; /* Width of the whole guestbook */
}
.tablerows_header
{
background-color: #00aaff; /* Background color of mainbar with links */
height: 20px; /* Height of mainbar with links */
padding-left: 5px; /* Text in mainbar with links starts 5 pixels after start */
padding-right: 5px; /* Text in mainbar with links ends 5 pixels before end */
font-weight: bold; /* Text decoration of text in mainbar with links */
border: solid 1px #FFF; /* Mainbar with links border */
color: #FFF; /* Text color in mainbar */
}
.tablerows_header a
{
color: #FFF;
text-decoration : none;
}
.tablerows_header a:hover
{
color: #000;
text-decoration : none;
}
table {
font-size: 12px;
background-color : #EBF9B5;
}
h1{
font-weight: bold;
font-size: 22px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
line-height : 120%;
color : #000000;
margin: 2px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin: 0px;
background-color : #00aaff;
}
h3 {
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 2px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 2px 0px;
}
ul {
margin-left: 5px;
padding: 0px;
}
li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
list-style-type: disc;
}
.textinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #00aaff;
padding-right: 3px;
padding-left: 3px;
}
.listbox {
font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #00aaff;
vertical-align : middle;
}
.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #00aaff;
background-image : url(images/button_bg.gif);
background-position : bottom;
}
.comment_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #00aaff;
background-image : url(images/button_bg.gif);
background-position : bottom;
padding-left: 3px;
padding-right: 3px;
}
.radio {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align : middle;
}
.checkbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align : middle;
}
a {
color: #00aaff;
text-decoration: none;
}
a:hover {
color: #0033CC;
text-decoration: underline;
}
.bblink a {
color: #0033CC;
text-decoration: none;
}
.bblink a:hover {
color: #0033CC;
text-decoration: underline;
}
.maintable {
border: 1px solid #00aaff;
background-color: #EBF9B5;
margin-top: 1px;
margin-bottom: 1px;
}
.tableh1 {
background : #00aaff;
color : #FFFFFF;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh1_compact {
background : #00aaff;
color : #FFFFFF;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableh2, .catrow_noalb {
color : #00aaff;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh2_compact {
background: #00aaff;
color : #000000;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableb, .display_media, .catrow {
background: #EBF9B5;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableb_compact {
background: #EBF9B5;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tablef {
background: #EBF9B5;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.catrow_noalb {
background: #00aaff ;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.catrow {
background: #EBF9B5;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.album_stat {
font-size: 85%;
margin: 5px 0px;
visibility : hidden;
}
.thumb_filename {
font-size: 80%;
display: block;
}
.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}
.thumb_caption {
font-size: 80%;
padding: 1px;
display : block;
}
.thumb_caption a {
text-decoration: underline;
color: #000000;
}
.thumb_num_comments {
font-weight: normal;
font-size: 80%;
padding: 2px;
font-style : italic;
display : block;
}
.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}
.user_thumb_infobox th {
font-weight : bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}
.user_thumb_infobox td {
font-size: 80%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}
.user_thumb_infobox a {
text-decoration: none;
color: #000000;
}
.user_thumb_infobox a:hover {
color: #000000;
text-decoration: underline;
}
.sortorder_cell {
background : #00aaff ;
color : #FFFFFF;
padding: 0px;
margin: 0px;
}
.sortorder_options {
font-family: Verdana, Arial, Helvetica, sans-serif;
background : #00aaff;
color : #000000;
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 80%;
white-space: nowrap;
}
.navmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 100%;
font-weight: bold;
background : #00aaff;
border-style: none;
}
.navmenu img {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
}
.navmenu a {
position: relative;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #FFFFFF;
}
.navmenu a:hover {
background : #00aaff;
text-decoration: none;
color: #000000;
}
.admin_menu_thumb {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #00aaff;
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}
.admin_menu_thumb a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}
.admin_menu_thumb a:hover {
color: #000000;
text-decoration: underline;
}
.admin_menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #00aaff;
background-color:#EFEFEF;
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align: center;
}
.admin_menu a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.admin_menu a:hover {
color: #000000;
text-decoration: underline;
}
td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}
td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}
.comment_date{
color : #5F5F5F;
font-size : 90%;
vertical-align : middle;
}
.image {
border : 1px solid #00aaff;
margin: 2px;
}
.imageborder {
border: 1px solid #00aaff;
background-color: #EBF9B5;
margin-top: 30px;
margin-bottom: 30px;
}
.display_media {
background: #EBF9B5;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.thumbnails {
background: #EBF9B5;
border : 0px solid #00aaff;
padding: 5px;
}
.footer {
font-size : 9px;
}
.footer a {
text-decoration: none;
color: #000000;
}
.footer a:hover {
color: #000000;
text-decoration: underline;
}
.statlink {
color: #FFFFFF;
background-color : #00aaff;
}
.statlink a {
text-decoration: none;
color: #FFFFFF;
}
.statlink a:hover {
color: #FFFFFF;
text-decoration: underline;
}
.alblink a {
text-decoration: underline;
color: #00AAFF;
weight : bold;
font-size : larger;
}
.alblink a:hover {
color: #5F740A;
text-decoration: underline;
}
.catlink {
display: block;
margin-bottom: 2px;
font-size : x-large;
}
.catlink a {
text-decoration: underline;
color: #000000;
}
.catlink a:hover {
color: #000000;
text-decoration: underline;
}
.topmenu {
line-height : 130%;
font-size: 100%;
}
.topmenu a {
color : #0033CC;
text-decoration : none;
}
.topmenu a:hover {
color : #0033CC;
text-decoration : underline;
}
.img_caption_table {
border: none;
background-color: #FFFFFF;
width : 100%;
margin : 0px;
}
.img_caption_table th {
background: #00aaff ;
font-size: 100%;
color : #000000;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
}
.img_caption_table td {
background: #F00 ;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
white-space: normal;
}
.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width : 100%;
margin : 0px;
}
.clickable_option {
cursor : default;
}
.listbox_lang {
color: #000000;
background-color: #00aaff;
border: 1px solid #00aaff;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align : middle;
}
#vanity a {
display:block;
width:57px;
height:20px;
margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}
I looked at your gallery both in FF2 on Linux as well as FF3 on Win XP and can't see in which aspect the output differs not what you have done in your stylesheet to accomplish what you're up to. The only observation that I have made is that your overall menu ("Dagboek", "Foto's/films" etc.) takes too much space - even with a screen resolution of 1280 x 1024 it doesn't display as desired, let alone the "regular" resolutions of 1024 x 768 nor 800 x 600.
Please specify what you are actually trying to accomplish and how this is suppossed to be accomplished in your design.
I've uploaded 2 screenshots.
OS: Fedora 7
Browsers :
Firefox 2.0.0.14 (http://www.xarno.nl/pics/firefox2.png (http://www.xarno.nl/pics/firefox2.png))
Opera 9.52 (http://www.xarno.nl/pics/opera.png (http://www.xarno.nl/pics/opera.png))
Inteded is what you see at the Firefox screenshot.
I'm on another computer than normally, I notice Opera gives the wrong lay-out also.
Can it be something in Firefox 2 which makes me think I created the right lay-out?
About the topmenu it looks ok on my screen, forgot to check on smaller ones. Thanks for the notice (sometimes you get blind for somethings ;))
ps. sorry for the late response, forgot to turn the notify on.
You need to give your 'tekst' div a 100% width, ie.
.tekst {
width: 100%;
}
Quote from: Nibbler on September 16, 2008, 08:25:56 PM
You need to give your 'tekst' div a 100% width, ie.
.tekst {
width: 100%;
}
Dang!
I did supply width in the main css, but not in the CPG css.
I've got different CSS-files for the different parts (main, s9y, cpg), is it possible to point the cpg template to the main css which is in the root of the site or would this give problems with the scripts?
Quote from: ff on September 17, 2008, 08:28:17 AMI've got different CSS-files for the different parts (main, s9y, cpg), is it possible to point the cpg template to the main css which is in the root of the site
Sure, just edit template.html and add the reference to the other CSS files. In your case, edit http://www.xarno.nl/fotoalbum/themes/xarno/template.html, find
<link rel="stylesheet" href="themes/xarno/style.css" type="text/css" />and add before it (in a new line)
<link rel="stylesheet" href="path/to/your/other/stylesheet.css" type="text/css" />That's plain HTML. No specific Coppermine skills needed.