This is my first try to tweak a CSS file in order to make "my own" theme.

I decided to do it based on "modern" theme. So far, this is the problem I have found and I can't figure out how to solve it:

The Problem

I would like to remove/hide the red line above the orange horizontal rule. Any ideas? or is this just a optic effect?

The CSS

This is screen.css for 'redish' theme. I also modified very minor stuff on common.css but not related to lines but fonts.

/*  screen.css - MoinMoin Default Styles

Copyright (c) 2001, 2002, 2003 by Juergen Hermann
Edited on December, 2004, by Mauricio Hernandez
*/

/* content styles */

/* debug 
* {border: 1px dotted orange;}
*/

a:hover, h1 a:hover {color: red;}

input {
    font-size: 1em;
    font-family: Arial, Lucida Grande, sans-serif;
}

textarea {
    font-size: 1em;
    font-family: monospace;
}

.disabled {
    /* IE ignore disabled attribute, but at least show items in gray */
    color: gray;
}

/* user interface styles */

#header {
    margin: 0;
    padding: 0;
    /* background: #3D4551; */
    /*background: #E7E7E7;*/
    background: #c30000;
}

#logo {
    float: left;
    margin: 5px 10px;
    padding: 0;
    /* For text only logo */
    font-size: 22px;
    line-height: 1em;
    font-weight: bold;
}

#logo img {
    vertical-align: middle;
}

#logo a {
    color: white;
    text-decoration: none;
}

*[dir="rtl"] #logo {
    float: right;
}

#username {
    margin: 0 10px;
    padding: 8px 0 0 0;
    text-align: right;
    font-size: 10px;
    white-space: nowrap;
}

*[dir="rtl"] #username {
    text-align: left;
}

#username li {
    display: inline;
    padding: 0 2px;
}

#username li:before {
        content: "| ";
    color: white;
}

#username li:first-child:before {
        content: "";
}

#searchform {
        float: right;
        margin: 5px 10px;
        padding: 0;
        white-space: nowrap;
        font-size: 11px;
}

*[dir="rtl"] #searchform {
        float: left;
}

#searchform form div {
    display: inline;
}

#pagetrail {
        clear: both;
        margin: 0;
        padding: 0 10px;
        font-size: 11px;
}

#pagetrail li {
        float: left;
        display: block;
        padding: 0 2px;
        margin: 0 0 5px 0;
}

*[dir="rtl"] #pagetrail {
        float: right;
}

/* XXX Warning: non-ascii characters! */
#pagetrail li:after {
        content: " » ";
        color: orange;
}

*[dir="rtl"] #pagetrail li:after {
        content: " « ";
}

#navibar {
        clear: both;
        display: block;
        margin: 0;
        padding: 0 10px;
        font-size: 11px;
}

#navibar li {
        float: left;
        display: block;
        margin: 0 2px;
        padding: 2px 5px;
        border: 1px solid orange;
        border-bottom: none;
        white-space: nowrap;
}

*[dir="rtl"] #navibar li {
        float: right;
}

#navibar li.wikilink {
        background: white /*url(../img/tab-wiki.png) repeat-x;*/
}

#navibar li.userlink {
        background: #f0e6e6 /*url(../img/tab-user.png) repeat-x;*/
}

#navibar a, #navibar a:visited {
        color: red;
        text-decoration: none;    
}

#navibar li.current a {
        font-weight: bold;
        color: white;
}

#navibar li:hover {
        background: #CCCCCC;
}

#navibar li.current, #navibar li.current:hover {
        background: orange /* url(../img/tab-selected.png) repeat-x; */
}

#pageline {
        clear: both;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 4px;
        /* border-top: 1px solid white;*/
        border-bottom: 1px solid #5c5c5c;
        background: orange /*url(../img/rule.png);*/
}

.editbar {
        clear: both;
        margin: 0;
        padding: 0 8px;
        white-space: nowrap;
        height: 26px;
        background: white;
        font-size: 12px;
}

.editbar form, .editbar form div {
    display: inline;
        margin: 0;
}

.editbar li {
        float: left;
        display: block;
        padding: 0;
        margin: 2px 6px;
}

*[dir="rtl"] .editbar li {
        float: right;
}

#header .editbar {
        border-bottom: 1px dotted #9C9C9C;
}

#footer .editbar {
        border-top: 1px dotted #9C9C9C;
        border-bottom: 1px solid #9C9C9C;
}

.editbar a, .editbar a:visited {color: red;}

#message {
        clear: both;
        margin: 0;
        padding: 5px 10px;
        border-bottom: 1px solid #c9c9c9;
        background: #f0e6e6;
}

#message p{
        margin: 5px 0;
        padding: 0;
        font-weight: bold;
}

#message div.buttons {
        font-weight: normal;
}

.dialog form {
    margin: 0 13px;
}

.dialog td {
    border: none;
    padding: 5px;
}

.dialog td.label {
    text-align: right;
    font-weight: bold;
    width: 25%;
}

*[dir="rtl"] .dialog td.label {
    text-align: left;
}

.dialog td.content input {
    width: 100%;
}

#page {
        background-color: white;
        margin: 0;
        padding: 10px 30px 20px 30px;
}

/* We use here dumb css1 ids because of IE suckiness */
#editor-textarea, #editor-comment {
    width: 100%;
}

#preview {
        border: 1px solid #806c78;
        padding: 10px 30px 20px 30px;
        background: url(../img/draft.png);
}

#footer {
        clear: both;
        margin: 0;
        padding: 0;
}

#credits, #version, #timings{
        margin: 5px 10px;
        padding: 0;
        text-align: center;
        font-size: 0.88em;
        color: #806c78;
        font-size: 11px;
}

#credits li, #timings li {
        display: inline;
        padding: 0 2px;
        margin: 0 4px;
}

#credits img {
        vertical-align: middle;
}

.diff {
        width:99%;
}

.diff-header {
        font-weight: bold;
}

.diff-title {
        background-color: #C0C0C0;
}

.diff-added {
        background-color: #ffede0;
        vertical-align: sub;
}

.diff-removed {
        background-color: #FFFFE0;
        vertical-align: sub;
}

.diff-added span {
        background-color: #ffad80;
}

.diff-removed span {
        background-color: #FFFF80;
}

The Support/Ideas

1. Diagnose: using the incredibly useful DOM Inspector of Firefox (or just looking at the source), you can determine the "offender" element. In this case, the <hr id="pageline">.

2. Cure: if you want to collapse the element box, just add in your screen.css the following selector/property:

hr#pageline { /* select any horizontal rule whose id matches exactly "pageline" */
 display: none; /* don't even render it */
}

Nice work Mauricio! I guess this line is either the border of the header div, or the bottom border of the list items of the navibar list.

Compare modern css with redish - first change only the colors - do not change the borders definition. I guess this is the effect you want. Pasting here the css would also help.

-- NirSoffer 2004-12-21 01:13:52

• Thanks for the tip, Nir. However, I realized this "bothering line" ONLY shows up when users are Logged In, otherwise it stays hidden. How about that? No idea why this happens but I can tell you this also happens to me when I an logged in MoinMoinwikiwikiweb. First, I thought it was a 'version' bug because you are running patch-438 and me, only 434, but nop.

• Any other idea? Also, maybe you could see other details at http://201.241.219.118/mhzwiki/FrontPage -- MauricioHernandez 2004-12-21 20:10:03

Its a browser display bug. I don't see it with Safari and Mozilla Firefox on Mac OS X. What browser are you using?

• Mozilla 1.7.3 I can use Firefox but it really sucks on PPC versions (at least mine one only shows text, almost no graphics at all) -- MauricioHernandez 2004-12-23 04:05:54