[XHTML & CSS] Foute hoogte lijst - Softwareontwikkeling

woensdag 6 februari 2008 19:41

Acties:

Topicstarter

Hallo,
ik ben een site aan het maken en loop tegen een probleem aan. Bij het menu gebruik ik een ul lijst, maar deze neemt een vreemde waarde voor de hoogte aan. In de meeste browsers heeft dit geen negatieve gevolgen, behalve in IE6. Daar Schuift de inhoud onder het menu naar onderen en bij het hoveren nog verder naar onderen.
De site is hier te bekijken: www.wilcodl.nl/ie6
CSS: www.wilcodl.nl/ie6/css/site.css

Weet iemand hoe ik dit kan oplossen? BVD
.

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
</head>

<body>
<div id="topPan">
<a href="?page=home"><img src="images/logo.jpg" title="test" alt="test" /></a>
    <ul>
        <li class="selected">Home</li>
        <li><a href="signup.php">Registreren</a></li>
        <li><a href="demos.php">Demo's</a></li>
        <li><a href="faq.php">Help</a></li>
    </ul>
</div>

<div id="headerPan">
    <div id="headerPanleft">
        <div id="ourblog">
            <h2>Probeer</h2>
            <p>Demo gastenboek</p>
            <a href="demos.php"></a>
        </div>
        <div id="possib">
            <h2>Begin direct</h2>
            <p>Gratis registreren</p>
            <a href="signup.php"></a>
        </div>
        <div id="solution">
            <h2>Help</h2>
            <p>Hulp bij problemen</p>
            <a href="faq.php"></a>
        </div>
    </div>
    <div id="headerPanright"></div>
</div>

</body>
</html>

donderdag 7 februari 2008 02:03

Acties:

f.v.b

Je hebt op de elementen in de topnavigatie een flinke padding staan. In de nieuwste browsers kan je dat overrulen door een height op een van de parent objecten te zetten. In IE6 werkt height echter zoals min-height in andere browsers: Als de content groter is, dan wordt ook het geheel groter.

Een aantal oplossingen:

code:

#topPan ul {
  color:#33729E;
  display:block;
  float:left;
  height:96px;
  width:520px;
  /* nieuw */
  overflow: hidden;
}

Met de overflow: hidden voorkom je dat de kinderen het geheel toch groter kunnen maken dan de height en width die je opgeeft.

Beter is het natuurlijk om het probleem bij de bron aan te pakken. Waarom hebben de a-tags in de topnavigatie een padding aan de onderkant terwijl je ze alleen een padding aan de bovenkant wilt geven? Hetzelfde geldt voor de li.selected stijl.

code:

#topPan ul li a {
  background:#FCFAE6 url(../images/menu-bg.gif) no-repeat scroll 0pt;
  color:#33729E;
  display:block;
  height:35px;
  margin:0pt;
  padding:61px 0pt;
  text-decoration:none;
  width:104px;
  /* nieuw */
  padding-bottom: 0px;
}

#topPan ul li.selected
{
  background:#FCFAE6 url(../images/menu-bg-hover.gif) no-repeat scroll 0pt;
  padding:61px 0pt;
  /* nieuw */
  padding-bottom: 0px;
}

Geen padding geven dus waar je 'm niet nodig hebt. Bovenstaande code is niet optimaal. Vervang de padding+padding-bottom natuurlijk door een padding of padding-top.

Wat tips waar je een keer naar moet kijken... Je zet stijlen die default zijn (een li is in elke browser al display: block. Wat doen de font-weight: normal op de body, of de padding: 0px op een div?)

Verder zitten alle elementen met elkaar te knokken. Je zet breedtes, hoogtes, paddings, float en positioneert objecten. Druk twee keer op CTRL+ in Firefox, en de teksten breken uit de layout.
Probeer dezelfde layout eens zonder height of position te bereiken. Gebruik alleen maar width, margin, clear en float. En zet heights zo min mogelijk en alleen maar met em's niet met px's. En font-size in % en niet in px.

Verder vind ik het een hele mooie pagina.

Don't erase all files?
[Yes] [No]

donderdag 7 februari 2008 17:36

Acties:

wilcodl

Topicstarter

Bedankt voor de reactie, fvb. Ik heb het kunnen oplossen met de overflow: hidden; op #topPan ul. De bron van het probleem heb ik nog niet aangepakt. Er zit namelijk geen padding-bottom op de #topPan ul li.selected en #topPan ul li a...

donderdag 7 februari 2008 22:56

Acties:

moozzuzz

wilcodl schreef op donderdag 07 februari 2008 @ 17:36:
Er zit namelijk geen padding-bottom op de #topPan ul li.selected en #topPan ul li a...

We lezen hier nochthans: padding:61px 0pt;

Wat gelijk is aan: padding:61px 0pt 61px 0pt; (top, right, bottom, left)

[ Voor 17% gewijzigd door moozzuzz op 07-02-2008 22:56 ]

vrijdag 8 februari 2008 03:49

Acties:

f.v.b

Installeer even Firebug, click op 'Inspect' en hover over de items in het top menu. Dan zie je dat die elementen wel degelijk een padding-bottom hebben.

Don't erase all files?
[Yes] [No]

dinsdag 12 februari 2008 20:35

Acties:

wilcodl

Topicstarter

Ik was in de veronderstelling dat padding:61px 0 wordt geimplementeerd als: padding:61px 0 0 0. Hierin heb ik mij dus vergist. Het is inderdaad opgelost door die padding-bottom en de hoogte van de hover te verwijderen.

[ Voor 4% gewijzigd door wilcodl op 12-02-2008 20:35 . Reden: overbodige info ]