[css] position in IE en FF - Softwareontwikkeling

zaterdag 22 juli 2006 16:23

Acties:

...

Topicstarter

Hier is het zoveelste probleem met de verschillen tussen FireFox (V1.5) en Internet Explorer (V6.0.29....).
Het probleem heb ik niet kunnen vinden met de search, of ik heb tussen de vele resultaten er overheen gekeken. Ik heb een website in xhtml geschreven en nu heb ik problemen met het menu.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en">
<head>
    <title>TEST!</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=ISO-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
        <div class="MenuBox2">
            <a class="MenuChoise" id="Login" href="index.php?Login">Login</a>
            <a class="MenuChoise" id="Register" href="index.php?Register">Registreer</a>
        </div>
</body>
</html>

Cascading Stylesheet:

.MenuBox2 {
    background-color:       #669966;    
    border-style:           solid;
    border-color:           #FFFF00;
    border-width:           1px;

    width:                  100px;
    padding:                0px;
    position:               absolute;               
    margin-left:            0px;
    margin-top:             0px;
    margin-right:           auto;
    margin-bottom:          auto;
    left:                   16px;
    top:                    64px;   
}

Als ik in FireFox met de muis over het rechthoekige vakje gaat, wordt mijn cursor een handje.
Als ik dat doe in Internet Explorer, wordt de cursor alleen een handje als ik over de tekst zelf beweeg.

Ik heb gevonden dat dat aan het position commando ligt. Want als ik die verwijder, werkt het in beide browsers correct.

Helaas heb ik het position commando voor de site nodig. Weet iemand hoe ik dit probleem netjes kan oplossen of omzeilen ?

Speel ook Balls Connect en Repeat

zaterdag 22 juli 2006 16:46

Acties:

crisp

Devver

Pixelated

Tsja, of je hier echt absolute positioning voor nodig hebt is lastig te bepalen zonder de rest van de code te zien (overigens is het geen commando maar een css-attribuut).
Ik snap in ieder geval niet waarom je ook nog margins en paddings opgeeft voor een element dat default al geen paddings of margins heeft (en bij absolute positioning hebben margins al geen invloed meer op de rest). Verder mis ik nog of je wellicht ook nog stylerules voor de anchors in je CSS hebt staan.

Wist je overigens dat je dit ook korter kan schrijven:

Cascading Stylesheet:

border-style:             solid;
border-color:             #FFFF00;
border-width:             1px;

margin-left:             0px;
margin-top:                0px;
margin-right:             auto;
margin-bottom:            auto;

namelijk zo:

Cascading Stylesheet:

1
2
3

border: 1px solid #ff0;

margin: 0 auto auto 0;

[ Voor 7% gewijzigd door crisp op 22-07-2006 16:47 ]

Intentionally left blank

zaterdag 22 juli 2006 16:47

Acties:

Verwijderd

Probeer het eens met dit erbij:

Cascading Stylesheet:

1	background:url(none);

zaterdag 22 juli 2006 17:12

Acties:

Onbekend

...

Topicstarter

@dexus: Nee, dat werkt niet.

@crisp: Inderdaad. Ik heb niet alles in m'n startpost gezet. Van de relevante css code mist nog een stukje:

Cascading Stylesheet:

.MenuBox2 {
    background-color:       #669966;    
    border-style:           solid;
    border-color:           #FFFF00;
    border-width:           1px;

    width:                  100px;
    padding:                0px;
    margin-left:            0px;
    margin-top:             0px;
    margin-right:           auto;
    margin-bottom:          auto;
    left:                   16px;
    top:                    64px;   
}

.MenuChoise {
    background-color:       #00CC00;
    border-style:           solid;
    border-color:           #FFFF00;
    border-width:           0px;

    margin:                 2px;
    padding-left:           3px;
    padding-top:            0px;
    padding-right:          3px;
    padding-bottom:         0px;
    
    cursor:                 pointer;    
    display:                block;
    text-decoration:        none;
    color:                  #000000;
}

Mijn complete stylesheet heeft inmiddels 1500 regels code.

Ik wil het menu "laten zweven" op ongeveer 100px van de bovenkant en 40px van links.
Verder staan op de site nog tientallen andere divjes.

Ik weet dat de code ook korter geschreven kan worden.
Maar ik schrijf bij het testen alles voluit omdat ik anders atributen vergeet. Daarom schrijf ik de margin en border ook op.

Speel ook Balls Connect en Repeat

zaterdag 22 juli 2006 17:19

Acties:

Borizz

Zet in je .MenuChoise class eens een height of een width... je zult zien dat het dan ook in IE goed werkt. Is een bekend probleem met display:block op een A element in IE (bij mij in ieder geval).

Cascading Stylesheet:

1
2
3

.MenuChoise {
  width: 100%;
}

[ Voor 13% gewijzigd door Borizz op 22-07-2006 17:20 ]

If I can't fix it, it ain't broken.

zaterdag 22 juli 2006 17:36

Acties:

Onbekend

...

Topicstarter

Bedankt, het werkt nu correct. Ik gebruik height: 100%. Als ik width: 100% er neer zet gaat er iets anders fout in het menu.

Speel ook Balls Connect en Repeat

zaterdag 22 juli 2006 18:10

Acties:

crisp

Devver

Pixelated

Ook onbekend schreef op zaterdag 22 juli 2006 @ 17:36:
Bedankt, het werkt nu correct. Ik gebruik height: 100%. Als ik width: 100% er neer zet gaat er iets anders fout in het menu.

W3C boxmodel, bij width komt de padding er nog bij dus wordt het te breed.

Intentionally left blank