probleemje met Internet Explorer

**MichielMvS** · 01-06-2008, 12:23

Hallo,

Ik probeer een website te basen maar hij komt er niet goed uit te zien in internet explorer 6.

ik heb voor het gemakt de boxen met 3 verschillende kleuren aan gegeven. Dit is de site waar ik het over heb: http://royalwebstudios.com/michiel/portfolio_lex/

Zoals je kunt zien zitten de boxen bij IE op een andere positie. Hoe zou ik di t kunnen oplossen?

HTML:

Code:

<!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>PortHolio.net</title>
<!--[if lt IE 7]>
<link href="main_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="main.css" rel="stylesheet" type="text/css" />


</head>
<body>

<div id="container">
    <div id="logo"><a href="#logo">logo</a></div>
    <div id="mail"><a href="#me@laxmulier.nl">me@laxmulier.nl</a></div>
    <div id="gmail"><a href="#laxmulier@gmail.com">laxmulier@gmail.com</a></div>
</div>

</body>
</html>

CSS:

Code:

a{text-decoration:none;}
body{margin:0; padding:0; font-family:Tahoma; background:url(img/bg_tyle.png) repeat-x; font-family:Tahoma;}

#container {width:1000px; height:666px; margin:0 auto; background-image:url(img/bg.png);}
#logo {    float:left; margin-left:155px; left:155px; margin-top:40px; background-color:#FF0000;}
#logo a{text-indent:-9000px; display:block; width:186px; height:71px;}

#mail { float:right; width:130px; height:33px; margin-right:120px; margin-top:14px; background-color: #00FF00;}
#mail a{ color:#FFFFFF; font-size:11px; font-weight:normal; padding-top:9px; position:absolute; padding-left:43px; display: block;width:85px; height:24px;}

#gmail { float:right; width:150px; height:33px; margin-right:12px; margin-top:14px; background-color:#FFFF00;}
#gmail a{color:#FFFFFF; font-size:11px; font-weight:normal; padding-top:9px; position:absolute; padding-left:40px; display: block; width:110px; height:24px;}

main_ie.css en main.css zijn op dit moment hetzelfde.

alvast bedankt voor de hulp,

Michiel MvS

**gast2960** · 01-06-2008, 13:09

Voor zo'n 'simpel' lay-out kan het bijna niet zo zijn dat je een IE css nodig hebt ;)

Even naar de css gekeken:

a{text-decoration:none;}
body{margin:0; padding:0; font-family:Tahoma; background:url(img/bg_tyle.png) repeat-x; font-family:Tahoma;}

#container {width:1000px; height:666px; margin:0 auto; background-image:url(img/bg.png);}
- width:1000px moet width:990px worden aangezien het anders niet in IE past. (in IE krijg je nu een scrollbar beneden te zien)
#logo { float:left; margin-left:155px; left:155px; margin-top:40px; background-color:#FF0000;}
- Wanneer je in IE6 een margin aan de zelfde kant geeft als de float, dan verdubbelt de margin. (IE6 leest nu dus margin-left:310px). Daarbij: left:155px werkt alleen als je position:absolute hebt meegegeven, nu staat het er nutteloos.
#logo a{text-indent:-9000px; display:block; width:186px; height:71px;}

#mail { float:right; width:130px; height:33px; margin-right:120px; margin-top:14px; background-color: #00FF00;}
- Hier het zelfde geval. float:right;dus margin-right verdubbelt in IE.
#mail a{ color:#FFFFFF; font-size:11px; font-weight:normal; padding-top:9px; position:absolute; padding-left:43px; display: block;width:85px; height:24px;}

#gmail { float:right; width:150px; height:33px; margin-right:12px; margin-top:14px; background-color:#FFFF00;}
- Hier het zelfde geval. float:right;dus margin-right verdubbelt in IE.
#gmail a{color:#FFFFFF; font-size:11px; font-weight:normal; padding-top:9px; position:absolute; padding-left:40px; display: block; width:110px; height:24px;}

De oplossing voor het margin probleem kan je oplossen door padding te gebruiken. Dan meot je wel met je achtergrond er rekening mee houden.

Gr. Gijsbert

**MichielMvS** · 01-06-2008, 14:32

Origineel gepost door gast2960

Voor zo'n 'simpel' lay-out kan het bijna niet zo zijn dat je een IE css nodig hebt ;)

Even naar de css gekeken:

De oplossing voor het margin probleem kan je oplossen door padding te gebruiken. Dan meot je wel met je achtergrond er rekening mee houden.

Gr. Gijsbert

is het niet alsnog makkelijker om er een xtra css voor IE bij te doen? of is dat alleen maar extra werk?

Ik heb nu dit:

HTML:

Code:

<!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>PortHolio.net</title>

<!--[if lt IE 7]>
<link href="main_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]>
<link href="main.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>

<div id="container">
    <div id="logo"><a href="#logo">logo</a></div>
    <div id="mail"><a href="#me@laxmulier.nl">me@laxmulier.nl</a></div>
    <div id="gmail"><a href="#laxmulier@gmail.com">laxmulier@gmail.com</a></div>
</div>

</body>
</html>

en mijn main_ie.css

Code:

a{text-decoration:none;}
body{margin:0; padding:0; font-family:Tahoma; background:url(img/bg_tyle.png) repeat-x; font-family:Tahoma;}

#container {width:1000px; height:666px; margin:0 auto; background-image:url(img/bg.png);}
#logo {    float:left; margin-left:77px;margin-top:40px; background-color:#FF0000;}
#logo a{text-indent:-9000px; display:block; width:186px; height:71px;}

#mail { float:right; width:130px; height:33px; margin-right:60px; margin-top:14px; background-color: #00FF00;}
#mail a{ color:#FFFFFF; font-size:11px; font-weight:normal; padding-top:9px; position:absolute; padding-left:43px; display: block;width:85px; height:24px;}

#gmail { float:right; width:150px; height:33px; margin-right:6px; margin-top:14px; background-color:#FFFF00;}
#gmail a{color:#FFFFFF; font-size:11px; font-weight:normal; padding-top:9px; position:absolute; padding-left:40px; display: block; width:110px; height:24px;}

is dit de goede oplossing?

ps. ik krijg geen bar onderin bij ie?

**gast2960** · 01-06-2008, 19:24

ook niet wanneer je er een verticale scrollbar bij hebt staan? Sizer (resize programmatje voor webbrowsers) laat mij bij een 1000pixel breedde pagina altijd een horizontale scrollbar zien. Tenminste, alleen wanneer er ook een verticale scrollbar is ;)

Dat is idd de verbeterde css. Met deze css ziet het er in IE en FF al het goed is precies hetzelfde eruit. Een extra IE css zal alleen maar voor langere laadtijden zorgen (hoewel dat maar heel weinig zal schelen).

Gr. Gijsbert

**MichielMvS** · 01-06-2008, 20:48

ik krijg nu problemen met het laden van verschillende css bestanden, ik had hem laten checken met:

Code:

<!--[if lt IE 7]>
<link href="main_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]>
<link href="main.css" rel="stylesheet" type="text/css" />
<![endif]-->

Maar dan laat hij helemaal niets zien, hoe zou ik dat moeten oplossen?

De bar komt bij mij niet omdat ik een andere resolutie heb.

Michielmvs

**gast2960** · 01-06-2008, 21:13

Dat zou voldoende moeten zijn, als het ook voor IE7 geldt moet je de 6 weglaten.
Maar je kan de aparte IE css ook gewoon weglaten en hem als main css gebruiken ;)

**MichielMvS** · 02-06-2008, 09:25

ja maar is dan staan de boxen weer niet goed in firefox?

Code:

<!--[if IE 6]>
<link href="main_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="main.css" rel="stylesheet" type="text/css" />

werkt bij mij nog niet, het lijkt erop dat hij beide css's door elkaar heen gebruikt als ik in IE 6 open.

**gast2960** · 02-06-2008, 09:34

Origineel gepost door Michiel MvS

ja maar is dan staan de boxen weer niet goed in firefox?

Code:

<!--[if IE 6]>
<link href="main_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="main.css" rel="stylesheet" type="text/css" />

werkt bij mij nog niet, het lijkt erop dat hij beide css's door elkaar heen gebruikt als ik in IE 6 open.

En als je de IE6 css al laatste plaatst?

dus:

Code:

<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="main_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Anders zou ik het ook niet weten ;)

**MichielMvS** · 02-06-2008, 11:32

werkt :)

heel erg bedankt voor al je hulp!

**gast2960** · 02-06-2008, 12:45

Origineel gepost door Michiel MvS

werkt :)

heel erg bedankt voor al je hulp!

No problem ;)

**D Schaap** · 02-06-2008, 15:22

Problemen met positionering(cross browser) moet je nooit oplossen dmv een aparte stylesheet. Positionering is op de pixel precies te fixen in alle browsers zonder enge workarounds..

**MichielMvS** · 03-06-2008, 16:25

wat moet ik dan gaan gebruiken ipv margin aangezien dat verkeerd wordt gelezen in IE?

**gast2960** · 03-06-2008, 17:16

Origineel gepost door Michiel MvS

wat moet ik dan gaan gebruiken ipv margin aangezien dat verkeerd wordt gelezen in IE?

Padding :p
Meestal geeft dat geen problemen in Firefox of in andere webbrowsers.

**MichielMvS** · 04-06-2008, 10:33

Daar ben ik weer! Ik ben wel een stuk verder, ben bezig met afronden (hoop ik)

dit is wat ik nu heb:http://royalwebstudios.com/michiel/portfolio_lex2/

Het probleem is dat ik in IE6 de linker knop niet kan zien.. erg vervelend.

Wat ik me ook af vroeg is of je de stippellijntjes van het clickvlak weg kan halen bij firefox, althans dat hij niet over de hele site loopt als je erop clickt, bijvoorbeeld als je naar rechts drukt krijg je een stippelbox naar de linkerkant.

CSS:
http://royalwebstudios.com/michiel/p..._lex2/main.css

MvG.
Michiel MvS

**gast2960** · 04-06-2008, 14:53

Daar had ik op een van m'n eerste websites een oplossing voor gevonden,
heb even de backup 'van zolder' afgehaald ;)

onfocus="this.blur()"

Dat stukje moet je aan elke url toevoegen waarbij je zo'n rand krijgt.
Als het goed is is het probleem dan opgelost ;)

Gr. Gijsbert

probleemje met Internet Explorer