Archief - CSS: IE-bug ?

Sibi · 13 jan 2007

Ik heb net een site in elkaar gebokst m.b.v. CSS en XHTML.

Looks good in Firefox, looks bad in IE --> ik werk met een div als container, en in die container heb ik vanonder een footer gedefiniëerd. In die footer heb ik als laatste een image geplaatst dat een soort "fading-out" streepje zal worden. 't Is echter de bedoeling dat na die image zowel de footer als de container gesloten worden, met als effect 't streepje als visuele afsluiter van de container.
Dat ziet er goed uit in opera en firefox, maar IE plaatst na die image nog een extra regel, die dan uiteraard opgevuld wordt met de backgroundcolor van de footer. En ja, dat ziet er dus niet uit.

Weet iemand een trucje om dit weg te krijgen ?

Merci !

Sibi · 13 jan 2007

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.christinebernaert.be :: home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
    <div class="container">
        <div class="header">
			 <a class="none" href="index.html" target="_self">
			 	 <img class="noborder" src="banner.png" alt="Banner" height="90" width="728"></img>
			 </a>
        </div>
            <div class="menu">Menu.
            </div>
            <div class="content">
			</div>
			<div class="footer">Footer.<br>
				 <img class="noborder" src="bg2.png"/>
            </div>
    </div>

</body>
</html>

Sibi · 13 jan 2007

Code:

body {
background-color: #4D4D4D;
text-align: center;
margin: 0;
width: 100%;
height: 100%;
}
html {
height: 100%;
}

.container {
text-align: left; 
margin: 0 auto; 
width: 738px;
margin-top:15px; 
background-image: url(bg.png);
background-repeat: repeat-y;
border: solid 0px black;
}

.header {
background-color: #000000;
height:100px;
padding-top:4px;
text-align: center;
border-bottom: solid 0px black;
border: solid 0px black;
}

.menu {
float: left; 
width: 120px;
padding-top:4px;
padding-left:8px;
border: solid 0px black;
}

.content {
padding: 20px 18px 8px 140px; 
border-bottom: solid 1px black;
}

.footer {
background-color: #D7FAFE;
clear: both;
margin-left: 5px;
margin-right: 5px;
border: solid 0px black;
}

a.none:link {
text-decoration: none;

}
a.none:visited {
text-decoration: none;
}
a.none:hover {
text-decoration: none;
}
a.none:active {
text-decoration: none;
}

img.noborder {  
border-style: none;
}

Sibi · 13 jan 2007

Oh ja, mijn CSS-kennis stelt zeer weinig voor.
Meer dan de w3s-tutorial volgen en alles 's uitproberen heb ik nog niet gedaan.

BuZz.LiGhTYeAr · 13 jan 2007

ge kunt beginnen met alle div's van zowel height als width waardes te voorzien

Sibi · 13 jan 2007

Is gebeurd.

Website is ook al geupload: http://users.skynet.be/bk259658/cb.be/index.html .
IE plaatst gewoon overal een extra regel, heb ik de indruk.

Sibi · 13 jan 2007

http://users.skynet.be/bk259658/cb.be/index.html

En dan doet IE nog moeilijk over mijn verticale drop-down-menu's.
Van als ik in een li-element uit de tekst én in mijn content-div ga, gaat 't menu weg.

Firefox en Opera werken wel perfect, dus daar kan je zien hoe 't er ook in IE zou moeten uitzien.

yannick · 13 jan 2007

Ik heb da probleem ook me die divs

.

Als ik een news item maak (die automatisch groter wordt), gebruik ik 3 divs (header,newsdeel,footer), in firefox plakken die mooi aan elkaar, in ie zit er een lelijke spatie tussen (en het lijkt alsof hij een deel dubbel doet).

Ik ben dus genoodzaakt om men site enkel voor firefox te maken

(via javascript scriptje)

mvg

Sibi · 14 jan 2007

http://users.skynet.be/bk259658/cb.be/index.html

Voilà, nu heb ik in alle browsers een lay-out die ik OK vind.
De lay-out is ongeveer hetzelfde gebleven, enkel intern heb ik het hele ding wat overhoop gedraaid.
Nu is 't wel FF dat een paar pixels tussen twee div's laat, maar da's geen ramp.

Enkel 't menu'ke nog, iemand een idee om dat in IE te laten werken ?

Squall-sX- · 14 jan 2007

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.christinebernaert.be :: home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
    <div class="container">
        <div class="header">
			 <a class="none" href="index.html" target="_self">
			 	 <img class="noborder" src="banner.png" alt="Banner" height="90" width="728"></img>
			 </a>
        </div>
            <div class="menu">Menu.
            </div>
            <div class="content">
			</div>
			<div class="footer">Footer.<br>
				 <img class="noborder" src="bg2.png"/></div>
    </div>

</body>
</html>

Wij hebben dit ook al een paar keer voorgehad, en dit lijkt het probleem op te lossen bij ons. Gewoon de sluittag van je containing element juist na het img-element zetten.

Bram · 14 jan 2007

uw drop down menu doet me een beetje denken aan die spellekes waarbij ge u cursor door een doolhof moet bewegen zonder de randen te raken. van bij het minste of het geringste klapt em weer toe, en da is ronduit ergerlijk.

Sibi · 14 jan 2007

SveltestSword zei:
uw drop down menu doet me een beetje denken aan die spellekes waarbij ge u cursor door een doolhof moet bewegen zonder de randen te raken. van bij het minste of het geringste klapt em weer toe, en da is ronduit ergerlijk.

Weet ik... 'k probeer er een oplossing voor te zoeken.

En anders toch in flash proberen, maar daar heb ik nog geen ervaring mee.
Of anders gewoon géén drop-downmenu, maar da's een nogal luie oplossing, vind ik.

Sibi · 14 jan 2007

Ik heb een simpel Flash-menuutje in elkaar gestoken. 'k Ben er al bij al best tevreden van.
Ook dat regeltje in FF en Opera heb ik weggekregen door met de padding te spelen. Waarom dat dat de oplossing was, weet ik echter niet.

http://users.skynet.be/bk259658/cb.be/01/index.html

Nog twee bugjes: in IE wordt de content 1 of 2 pixels hoger geplaatst dan 't menuutje. In FF en Opera staan ze op al gelijk niveau, zoals ik 't wil. Ik denk dat ik dat nog eens tegengekomen ben, maar ook toen had ik het niet opgelost gekregen.
In FF en Opera doet de eerste link in de tweede paragraaf vreemd. IE doet 't zoals ik 't wil, margin-padding-probleem ? Maar daar zou 't toch niet aan mogen liggen, of denk ik verkeerd ?

Rvl · 14 jan 2007

Flash menu is zeker af te raden hier. Waarom:
1. Ten eerste is dit menu even goed te maken met html / css
2. Stel dat de gebruikers van je website geen flash hebben kunnen ze niet navigeren door je site.

conclusie: smijt dat flash menuke maar in de prullenbak (recycle bin indien engelstalige windows, indien ander os weet ik het niet van buiten)

Sibi · 14 jan 2007

https://www.beyondgaming.be/forums

Ik had ze eerst in css gemaakt, maar IE deed moeilijk. En die menuutjes sprongen direct weg als je je muis ook maar 1 milliseconde uit 't menuutje haalde. 'k Dacht met Flash zo twee vliegen in één klap te slaan.

Sibi · 14 jan 2007

http://users.skynet.be/bk259658/cb.be/02/index.html

Dit is met css gedaan... speel maar wat met 't roll-out-menuutje onder Test3.
Je zal zien dat dat zeer ambetant werkt.

-edit-
Met die css zie ik nu wel dat 't belemmeren van die link in de 2e paragraaf te wijten is aan 't flash-menuutje.

Sibi · 16 jan 2007

Pff, 'k kom er verre zot van ! :cry:

'k Heb al 't een en 't ander uitgeprobeerd, dingen die ik op 't internet vond, maar 't leverde niks op.
Mss toch maar gewoon wat buttons i.p.v. een uitklapbaar menuutje gebruiken. Al vind ik dat zo een "laffe" oplossing.

KoenDK · 16 jan 2007

euhm
<a class="none" href="index.html" target="_self">
<img class="noborder" src="banner.png" alt="Banner" height="90" width="728">
</img>
</a>

is geen xHtml

dit wel :
<a class="none" href="index.html" target="_self">
<img class="noborder" src="banner.png" alt="Banner" height="90" width="728" />
</a>

(let op de spatie want ik zie dat je die wat verder niet plaatst)

om uw break na uw header te vermijden in IE
denk ik
dat je het kan oplossen zo :

PHP:

<a class="none" href="index.html" target="_self"><img class="noborder" src="banner.png" alt="Banner" height="90" width="728" /></a>

zet alles dus op 1 lijn
heb dit probleem ooit zo opgelost

KoenDK · 16 jan 2007

en die class = noborder

zou ik toch anders doen hoor

zet gewoon in uw css

img {
border:none;
}

Quilombo · 16 jan 2007

KoenDK zei:
euhm
<a class="none" href="index.html" target="_self">
<img class="noborder" src="banner.png" alt="Banner" height="90" width="728">
</img>
</a>

is geen xHtml

dit wel :
<a class="none" href="index.html" target="_self">
<img class="noborder" src="banner.png" alt="Banner" height="90" width="728" />
</a>

(let op de spatie want ik zie dat je die wat verder niet plaatst)

om uw break na uw header te vermijden in IE
denk ik
dat je het kan oplossen zo :

PHP:

<a class="none" href="index.html" target="_self"><img class="noborder" src="banner.png" alt="Banner" height="90" width="728" /></a>

zet alles dus op 1 lijn
heb dit probleem ooit zo opgelost

wat jij zegt is bij mijn weten ook geen xhtml (target bestaat niet in xhtml afaik).

en dat tweede is ook maar een vreemde oplossing :wtf:

Archief - CSS: IE-bug ?

Sibi

Legacy Member

Sibi

Legacy Member

Sibi

Legacy Member

Sibi

Legacy Member

BuZz.LiGhTYeAr

Legacy Member

Sibi

Legacy Member

Sibi

Legacy Member

yannick

Legacy Member

Sibi

Legacy Member

Squall-sX-

Legacy Member

Bram

Legacy Member

Sibi

Legacy Member

Sibi

Legacy Member

Rvl

Legacy Member

Sibi

Legacy Member

Sibi

Legacy Member

Sibi

Legacy Member

KoenDK

Legacy Member

KoenDK

Legacy Member

Quilombo

Legacy Member