Padding bij uitzoomen in IE7 weg

Status
Niet open voor verdere reacties.
L

lady johnny

Gebruiker
Lid geworden
10 nov 2008
Berichten
38
Iets wat ik nog nooit ben tegengekomen.
Mijn klant ziet op zijn scherm (IE7) bij 1 keer uitzoomen dit:
http://img7.imageshack.us/i/ontwerpsite.jpg/

Bij 1 keer uitzoomen schijnen dus alle paddings te verdwijnen?
Als ik in IEtester kijk, ziet alles er prima uit.

En dit is het menu:

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
<li><a href="#">Pagina 4</a></li>
<li class="geenstreep"><a href="#">Pagina 5</a></li>
</ul> </div>

#menu {
width: 1080px;
height: 32px;
margin-left: 5px;
margin-top: 5px;
background-color: #8fbaf1;
text-align: center;
background-image: url(../Images/menu.jpg);
background-repeat: repeat-x;
}

#menu ul{
list-style: none;
padding: 6px 0 0 0;
margin: 0;
}

#menu li{
display: inline;
margin: 0 0 0 0;
border-right: 1px solid #ffffff;
}

#menu li.geenstreep {
border-right: 0;
}

#menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
padding: 0 16px 0 15px;
}

#menu a:link, a:visited{
color: #ffffff;
}

#menu a:hover, a:active{
color: #ffffff;
}
 
@ Windowsfaq:
Wie gebruikt er nog ie7?
Klik om te vergroten...
Ik, zei de gek; tenminste om te testen. - En waarom? Omdat je niet tegen de bezoekers van je site kan zeggen "Update eerst je systeem eens."
Gebruiksvriendelijkheid = rekening houden met gevarieerd publiek, dus met verschillende browsers. En zeker ook met de één na laatste versie van elke browser. Dacht ik maar zo.

@ lady johnny:
Heb je ook een link naar een (test)pagina? (Uit de code hierboven valt het verschijnsel niet op te maken)

Met vriendelijke groet,
CSShunter
 
Pff wat is dat inderdaad voor antwoord... ik gebruik geen IE7, gebruik sowieso geen IE vanwege al rotzooi altijd en het foutief weergeven maar daar wil de grootste helft van Nederland nog niet aan, en als je een beetje website wilt hebben zul je daar dus aan moeten voldoen.

Welke andere code kan het in zitten?
Dit is het enigste wat met het menu te maken heeft.
 
Hoi lady johnny,
Even een testje gemaakt met je code, IE7 gooit de zaak inderdaad overhoop bij inzoomen ... en het is inderdaad iets met de padding: het ontbreken van een padding!
Voeg maar eens toe:
Code: 
#menu li {
    ...
    padding: 0;
    ...
    }
Verklaring;
  • Browsers gaan nogal verschillend om met margins en paddings bij list-items van een <ul> of <ol>.
  • Als je het standaard verticale bullet-lijstje gaat vervangen door een css-opgemaakt horizontaal menu zonder bulllets, dan moeten, naast het resetten van de <ul>, ook de margins en paddings van de <li>'s ofwel op nul gezet worden, ofwel een concreet ingevulde maat krijgen.
  • Dan doet zelfs IE het. :)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
csshunter zei:
@ Windowsfaq:

Ik, zei de gek; tenminste om te testen. - En waarom? Omdat je niet tegen de bezoekers van je site kan zeggen "Update eerst je systeem eens."
Gebruiksvriendelijkheid = rekening houden met gevarieerd publiek, dus met verschillende browsers. En zeker ook met de één na laatste versie van elke browser. Dacht ik maar zo.

Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Ja heb je gelijk in:(
Ik moet vriendelijk zijn, en niet tegen iedereen maar zeggen dit,sis en zo.:o
Ik bied daarom mijn excuuses even aan:o

Mvg Windowsfaq
 
Hoi Windowsfaq,
Da's ruiterlijk en hoffelijk! :thumb:

@ lady johnny:
Valt me nog op dat het menu een {width: 1080px;} heeft. Dat is precies 100px te breed om op een 1024*768px resolutie te passen. Met 980px breed hoeven bezoekers op die resolutie niet de link/rechts scrollbar onderaan te gebruiken.
Dat lijkt me wel zo prettig, want er zijn nog vrij veel mensen die op 1024*768px surfen.

Met vriendelijke groet,
CSShunter
 
Het punt is, met CSS kan het zijn dat een element ergens vandaan een andere eigenschap erft. En de HTML kan natuurlijk omringt zijn door meer HTML, waardoor er rare dingen gebeuren.


Het is dus wel handig als je a). de gehele source online zet, dus met de HTML, niet alleen de CSS - of b). een/de (voorbeeld) pagina met het verschijnsel online zet.

Het laatste is uiteraard geprefereerd, want dat scheelt ons weer tijd met de code in een documentje zetten.




:thumb:
 
Laatst bewerkt:
Dit is de complete html:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon"/>
<link href="Stylesheet/css_basic.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="robots" content="index, follow"/>
<meta name="revisit-after" content="31 days"/>
<meta name="copyright" content=""/>
<meta name="web_author" content=""/>
<title></title>
<!--[if lte IE 6]>

<style type="text/css">
#left {
margin-left: 3px;
}
 
#content {
width: 678px;
}
</style>
<![endif]--> 
</head>
 
<body>
<div id="container">
<div id="top">
<div class="zoekvenster">
<form action="zoeken.php" method="post">
<input class='opmaak1' type='text' name='zoeken' id='zoeken' />
<input class='opmaakbutton' type='button' name='submit' value='zoeken'>
</form>
</div>
</div>
<div id="header"></div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
<li><a href="#">Pagina 4</a></li>
<li class="geenstreep"><a href="#">Pagina 5</a></li>
</ul> </div>
<div id="middle">
<div id="left">
<div id="kalender">
<div class="kalendertitel"><a href="#"></a></div>
<div class="kalendertekst">
</div></div>
<div id="downloads">
<div class="downloadstitel"><a href="#"></a></div>
<div class="downloadstekst"></div></div>
<div id="buien">
<div class="buientitel"></div>
</div>
<div id="content">
<div class="contenttekst"></div></div>
<div id="right">
<div id="shop">
<div class="shoptitel"><a href="#"></a></div>
<div class="shoptekst"></div></div>
<div id="links">
<div class="linkstitel"><a href="#"></a></div>
<div class="linkstekst"></div></div></div>
</div>
<div id="footer">
<div class="footertekst"></div></div>
</div>
</body>
</html>

En dit de css, al moet daar nog de body boven, maar verder compleet:

Code: 
background-color: #ffffff;
background-image: url(../Images/bg.jpg);
background-repeat: repeat;
margin: 10px 0px 10px 0px;
padding: 0;
}
 
#container {
width: 1090px;
height: auto;
background-color: #ffffff;
left: 50%;
margin-left: -545px;
position: absolute;
border: 6px solid #f2f2f2;
}
 
#top {
width: 1080px;
height: 60px;
background-image: url(../Images/toplogo.jpg);
background-position: left;
background-repeat: no-repeat;
margin-left: 5px;
}
 
.zoekvenster {
padding-left: 800px;
padding-top: 20px;
float: left;
}
 
.opmaak1 {
border: 1px solid #d4d4d4;
border-top: 2px solid #d4d4d4;
border-left: 2px solid #d4d4d4;
font-family: Arial, Verdana;
font-size: 15px;
width: 150px;
padding-left: 2px;
margin-bottom: 3px;
}
 
.opmaakbutton {
width: 78px;
height: 23px;
background-image: url(../Images/zoeken.jpg);
border: 1px solid #ffffff;
font-family: Arial, Verdana;
font-size: 15px;
padding-left: 2px;
margin-bottom: 3px;
color: #ffffff;
}
 
#header {
width: 1080px;
height: 160px;
margin-left: 5px;
background-image: url(../Images/header.jpg);
background-repeat: no-repeat;
}
 
#menu {
width: 1080px;
height: 32px;
margin-left: 5px;
margin-top: 5px;
background-color: #8fbaf1;
text-align: center;
background-image: url(../Images/menu.jpg);
background-repeat: repeat-x;
}
 
#menu ul{
list-style: none;
padding: 6px 0 0 0;
margin: 0;
}
 
#menu li{
display: inline;
margin: 0 0 0 0;
padding: 0;
border-right: 1px solid #ffffff;
}
 
#menu li.geenstreep {
border-right: 0;
}
 
#menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
padding: 0 12px 0 12px;
color: #ffffff;
}
 
#menu a:link, a:visited{
color: #ffffff;
}
 
#menu a:hover, a:active{
color: #ffffff;
}
 
#middle {
width: 1090px;
height: auto;
margin-top: 15px;
}
 
#left {
width: 200px;
height: auto;
min-height: 500px;
float: left;
margin-left: 5px;
}
 
#kalender {
height: 330px;
background-color: #8fbaf1;
}
 
.kalendertekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
 
.kalendertekst a {
color: #ffffff;
}
 
.kalendertitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}
 
.kalendertitel a {
color: #ffffff;
text-decoration: none;
}
 
.kalendertitel a:hover {
color: #ffffff;
text-decoration: none;
}
 
#downloads {
height: 150px;
background-color: #8fbaf1;
margin-top: 15px;
}
 
.downloadstekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
 
.downloadstekst a {
color: #ffffff;
}
 
.downloadstitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}
 
.downloadstitel a {
color: #ffffff;
text-decoration: none;
}
 
.downloadstitel a:hover {
color: #ffffff;
text-decoration: none;
}
 
#buien {
height: 430px;
background-color: #8fbaf1;
margin-top: 15px;
margin-bottom: 20px;
}
 
.buientitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}
 
.buientitel a {
color: #ffffff;
text-decoration: none;
}
 
.buientitel a:hover {
color: #ffffff;
text-decoration: none;
}
 
#content {
width: 680px;
height: auto;
float: left;
}
 
.contenttekst {
color: #000000;
font-family: Verdana;
font-size: 14px;
padding: 15px;
padding-top: 0px;
}
 
.contenttekst a {
color: #000000;
}
 
#right {
width: 200px;
height: auto;
min-height: 500px;
float: left;
margin-right: 5px;
}
 
#shop {
height: 495px;
background-color: #8fbaf1;
}
 
.shoptekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
 
.shoptekst a {
color: #ffffff;
}
 
.shoptitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}
 
.shoptitel a {
color: #ffffff;
text-decoration: none;
}
 
.shoptitel a:hover {
color: #ffffff;
text-decoration: none;
}
 
#links {
height: 430px;
background-color: #8fbaf1;
margin-top: 15px;
margin-bottom: 20px;
}
 
.linkstekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
 
.linkstekst a {
color: #ffffff;
}
 
.linkstekst img {
border: none;
}
 
.linkstitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}
 
.linkstitel a {
color: #ffffff;
text-decoration: none;
}
 
.linkstitel a:hover {
color: #ffffff;
text-decoration: none;
}
 
#footer {
width: 1080px;
height: 30px;
clear: both;
margin-left: 5px;
margin-bottom: 20px;
background-color: #8fbaf1;
}
 
.footertekst {
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: center;
padding-top: 6px;
}

een online voorbeeld heb ik niet, maar in de screen is te zien wat het probleem is.
 
Hoi lady johnny,
Het heeft even geduurd, maar dan toch een suggestie!
Echter is het probleem helaas niet opgelost met de padding...
Klik om te vergroten...
Dat is merkwaardig, want in mijn proefje met IE7 leek het goed te gaan.
Maar ik merk nu dat er nog een paar merkwaardigheden in het spel zijn:
  • Als je de pagina in IE opent met een zoom-factor van 100%, dan gaat het goed.
  • Als je inzoomt op bv. 150% gaat het mis: de menu-items gaan door elkaar lopen.
  • Als je vervolgens een refresh geeft, komt het goed!
  • Maar als je in de goede stand naar een ander openstaand IE-tabblad gaat en dan weer terugkomt, is het spontaan weer fout gegaan!
IE zit toch vol verrassingen! :shocked:

Op de een of andere manier kan IE7 niet de link-breedte van een menu-item goed vaststellen en/of vasthouden. Dat kan je afdwingen door toe te voegen:
Code: 
#menu a {
    ...
    display: inline-block;
    ...
    }
Dit helpt zowaar, zelfs bij inzoomen op 400%. :)
O ja, midden in de html-code ontbrak de </div> van het einde van de <div id="left">. Maar je zal opgemerkt hebben dat de html-validator dat ook al opgemerkt had. ;)

Met vriendelijke groet,
CSShunter
 
Tnx!

Ik kan het zelf niet testen aangezien ik geen IE7 heb en IEtester laat dit probleem niet zien.
Als het getest is hoor je het!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan