Announcement

Collapse
No announcement yet.

Border in FF anders wie in Safari

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Border in FF anders wie in Safari

    Hallo,

    ich habe ein Problem mit der Border Eigenschaft. Und zwar zeigt der FF den Border anders an als der Safari. Welche ansicht jetzt korrekt ist weiß ich nicht, aber ich möchte das es aussieht wie in Safari:

    Firefox:
    firefox.jpg
    Safari:
    safari.jpg

    Im FF bildet sich eine Schräge, im Safari bleibt der obere Rand über die ganze breite erhalten. Was muss ich tun, damit dies im FF genauso aussieht wie im Safari?

    Danke und Gruß
    Ralf
    Tags: None
  • #2
    Deinen Code anpassen. Zeile 4 oder 5 müsste es sein.

    Sorry das ich es nicht genauer mitteilen kann, aber dein bereitgestellter Code der zu dem Ergebnis führt ist doch etwas ungenau.

    Comment

    • #3
      Hi,

      sorry, ich dachte das wäre ein "Standard"-Problem :-)

      Hier der Code:
      Code:
      <!DOCTYPE html>
<html>
<head>
    <title>Application</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/i7.css">
</head>
<body><div id="menue" class="heightster">
    <div id="company">
        <span id="company_name">Home</span>
        <img id="company_logo" src="images/companylogo.png" />
    </div>
    <div id="navigation" class="navigation">
        <ul>
            <li id="listKontakte"><a href="#" id="buttonKontakte">Kontakte</a></li>
            <li id="listSettings"><a href="#" id="buttonSettings">Settings</a></li>
        </ul>
    </div>
    <div id="logout" class="navigation">
        <ul>
            <li><a href="index.php">Logout</a></li>
        </ul>
    </div>
</div>
</body>
</html>
      und das css:
      Code:
      /**
 * Created by JetBrains PhpStorm.
 * User: Ralf
 * Date: 02.02.13
 * Time: 01:22
 */

/*
    Global
 */
* {
    margin: 0px;
    padding: 0px;
}

/*
    HTML
 */
html, body {
    font-family: Verdana;
    font-size: 12px;
    background-color: #ffffff;
    color: #7c7c7c;
    margin: 0;
    padding: 0;
    height: 100%;
}

/*
    Kaskadierung
 */
div#menue .navigation li {
    list-style: none;
    width: 150px;
    padding: 7px 0px 7px 20px;
    border-bottom: 1px #282828 solid;
    border-top: 1px #3c3c3c solid;
}
div#logout.navigation li {
    width: 150px;
}
div#menue a {
    text-decoration: none;
    font-size: 18px;
    color: #787878;
    width: 150px;
}
div#menue a:hover {
    color: #ffffff;
}
div#menue li.active {
    width: 140px;
    border-right: 10px #ffa200 solid;
    background-color: #282828;
}
div#menue li.active a {
    color: #ffffff;
}

/*
    ID-Selektor
 */
#menue {
    width: 170px;
    background-color: #313131;
}
#company {
    padding: 10px;
    clear: both;
}
#company_name {
    margin: 5px;
    font-size: 20px;
    float: left;
    color: #ffffff;
}
#company_logo {
    float: right;
}
#navigation {
    margin-top: 110px;
}
#logout {
    position: absolute;
    bottom: 0px;
    margin-bottom: 0px;
    width: 170px;
}

/*
    Class
 */
.heightster {
    min-height: 100%;
    height:auto !important;
    height: 100%;
    overflow: hidden !important;
    float: left;
}
.navigation {
    border-top: 1px #282828 solid;
    border-bottom: 1px #3c3c3c solid;
}
.main {
    width: 430px;
    background-color: #e8e8e8;
    display: none;
}
      Sorry :-)

      Comment

      • #4
        Warum sollte das ein Standard-Problem sein??
        Dein

        div#menue li.active {
        width: 140px;
        border-right: 10px #ffa200 solid;
        background-color: #282828;
        }

        wird bei mir im Firefox einwandfrei ohne "schräge" angezeigt.
        Christian

        Comment

        • #5
          Hi,

          Standard-Problem im Sinne von: Der Browser zeigt den Border anders an, du kannst das so und so umgehen.

          Ich habe FF 19.0.2. D.h. bei Dir ist der Border genau wie im Safari (mein Bild)?

          LG
          Ralf

          Comment

          • #6
            ich habe es heute morgen mit FF 10 getestet (da gab es nix anderes). Wenn du es möchtest mache ich es hier nochmal mit FF 19.0.2.
            Christian

            Comment

            • #7
              Das wäre nett.

              Comment

              • #8
                Da habe ich das Problem auch, aber mit der Korrektur (u.a. Doppelpunkt vor active) von

                div#menue li:active {
                width: 140px;
                border-right: 10px #ffa200 solid;
                border-top-style: none;
                border-bottom-style: none;
                 background-color: #282828;
                }


                geht es dann
                Christian

                Comment

                • #9
                  hm, das überschreibt aber folgendes:

                  div#menue .navigation li {
                  list-style: none;
                  width: 150px;
                  padding: 7px 0px 7px 20px;
                  border-bottom: 1px #282828 solid;
                  border-top: 1px #3c3c3c solid;
                  }

                  Damit geht der effekt mit den trennlinien verloren. Und bei :active bleibt der orangene rechte border nicht, sondern verschwindet wieder wenn man die maustaste los lässt.

                  Comment

                  • #10
                    Wie kann es das? Das ist nur aktiv, wenn das Objekt - hier das li - active ist. Das hat das schon immer überschrieben, ggf. musst du die gewünschten Attribute hier auch aufnehmen
                    Zuletzt editiert von Christian Marquardt; 28.03.2013, 21:42.
                    Christian

                    Comment

                    • #11
                      ja, das klappt ja wenn ich es mit der klasse "active" mache, also wie ursprünglich gepostet.

                      Das mit dem border ist doof. sieht halt so kacke aus

                      Comment

                      • #12
                        Hallo,

                        also bei mir im FF 19.0.2 sieht der rechte orange Rahmen ganz normal aus!

                        Gruß Falk
                        Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

                        Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

                        Comment

                        • #13
                          Hmm, kann das dannein Frage des BS sein?

                          Firefox 10 Darstellung Ok = XP
                          Firefox 19 Darstellung falsch = Win7
                          Christian

                          Comment

                          • #14
                            Möglich, mein FF 19 läuft hier noch auf einem XP.
                            Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

                            Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

                            Comment

                            • #15
                              Alternative wäre:

                              [highlight=css]
                              div#menue .navigation li {
                              list-style: none;
                              width: 100%;
                              /*padding: 7px 0px 7px 20px;*/
                              padding: 0;
                              border-bottom: 1px #282828 solid;
                              border-top: 1px #3c3c3c solid;
                              }

                              div#menue a {
                              text-decoration: none;
                              font-size: 18px;
                              color: #787878;
                              width: 140px;
                              height: 100%;
                              display: inline-block;
                              padding: 7px 0px 7px 20px;
                              background-color: #313131;
                              }

                              div#menue li.active {
                              /*width: 140px;
                              border-right: 10px #ffa200 solid;
                              background-color: #282828;*/
                              background-color: #ffa200
                              }
                              div#menue li.active a {
                              color: #ffffff;
                              background-color: #282828;
                              }
                              [/highlight]

                              Gruß Falk
                              Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

                              Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

                              Comment

                              Previous template Next
                              Working...
                              X