'jumping' topbar 'jumping' topbar
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

'jumping' topbar

Started by ff, September 09, 2008, 09:12:14 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

ff

September 09, 2008, 09:12:14 PM
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?

Joachim Müller

#1
September 10, 2008, 07:19:57 AM
The content of your template.html is
Code Select
<!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;">&nbsp;</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 is
Code Select
body {
        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.

ff

#2
September 16, 2008, 11:20:21 AM
I've uploaded 2 screenshots.
OS: Fedora 7
Browsers :
Firefox 2.0.0.14 (http://www.xarno.nl/pics/firefox2.png)
Opera 9.52 (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.

Nibbler

#3
September 16, 2008, 08:25:56 PM
You need to give your 'tekst' div a 100% width, ie.

Code Select

.tekst {
    width: 100%;
}

ff

#4
September 17, 2008, 08:28:17 AM
Quote from: Nibbler on September 16, 2008, 08:25:56 PM
You need to give your 'tekst' div a 100% width, ie.

Code Select

.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?

Joachim Müller

#5
September 17, 2008, 06:05:17 PM
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
Code Select
<link rel="stylesheet" href="themes/xarno/style.css" type="text/css" />and add before it (in a new line)
Code Select
<link rel="stylesheet" href="path/to/your/other/stylesheet.css" type="text/css" />That's plain HTML. No specific Coppermine skills needed.
Print
Go Up Pages1
User actions