IE weergeeft button verkeerd

**Maurizio Giordano** · 04-01-2013, 14:55

Beste Sitedealers,

In alle Internet Explorer versies wordt een button anders dan bedoeld(verkeerd) weergeven, in alle andere browsers word het wel zoals bedoeld vertoond.

Zie de bijlage 1 hoe het in internet explorer word weergeven, en bijlage 2 hoe het normaal hoort te zijn.

HTML:

Code:

<div class="homeBox"><div class="title"><h3>GROTE LETTERS: kleine letters komen hier.</h3> <a href="http://wegivmgoogle.com/"><input type="submit" value="meer informatie" class="button"></a></div></div>

CSS:

Code:

/* ### home box ### */
			.homeBox { width: 657px; overflow: hidden; }
			.homeBox .title { background: url('public/themes/default_theme/images/heading_bg.png') no-repeat 0 bottom;  width: 657px; padding-bottom: 40px; margin-bottom: 40px; overflow: hidden; }
			.homeBox .title h3 { float: left; color: #764c29; font-size: 18px; }
			.homeBox .title a { color: #25aae1; font-size: 13px; font-weight: bold; float: right; margin-right: 56px; text-decoration: none; padding-top: 5px; display: block;  }
			.homeBox input.button { border: 0; background: url('public/themes/default_theme/images/button2.png') no-repeat; width: 139px; height: 28px; cursor: pointer; margin: -20px 0 -40px 0px; color: #fff; font-size: 13px; font-weight: bold;}
			.homeBox .title a:hover { text-decoration: underline; }
			.homeBox .text { float: left; width: 297px; margin-left: 6px; }
			.homeBox .text p { color: #4b535d; line-height: 21px; font-size: 13px; padding-bottom: 18px; }
			.homeBox .photo { float: left; } 
			.homeBox .photo img { margin-bottom: 5px; }
			
			.homeBox .photo2 { float: left; } 
			.homeBox .photo2 img { margin-top: -65px; margin-bottom: 22px; margin-left: 30px; }

Iemand enig idee wat ik verkeerd heb gebruikt in het CSS bestand, iets wat IE niet ondersteunt?

Alvast bedankt voor de reacties.

Gr.

Maurizio

**Job van Kaathoven** · 08-01-2013, 14:23

Het handigste is als u een live versie geeft van de website zodat mensen bijv. via firebug uw probleem kunnen debuggen.

Waarschijnlijk gaat het om een stukje extra code toevoegen zodat de pagina goed wordt gegenereerd in IE. Namelijk elke browser reageert anders op de css.

EDIT:
Je kan ook een aparte css aanmaken voor de IE browsers, waarop je bijv. de margin anders kan instellen.

Voorbeeld (stop dit tussen de <head></head>):

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/master.css" />
<![endif]--

**Maurizio Giordano** · 08-01-2013, 16:11

Hallo Job,

Bedankt voor je reactie. Als ik nu met de margin speel veranderd er vrij weinig..

hier de online versie: http://goo.gl/oaXGn

Origineel gepost door Job van Kaathoven

Het handigste is als u een live versie geeft van de website zodat mensen bijv. via firebug uw probleem kunnen debuggen.

Waarschijnlijk gaat het om een stukje extra code toevoegen zodat de pagina goed wordt gegenereerd in IE. Namelijk elke browser reageert anders op de css.

EDIT:
Je kan ook een aparte css aanmaken voor de IE browsers, waarop je bijv. de margin anders kan instellen.

Voorbeeld (stop dit tussen de <head></head>):

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/master.css" />
<![endif]--

**Job van Kaathoven** · 08-01-2013, 17:31

Hallo Maurizio,

Ik heb het even gedebugged.
Als je dit toevoegt/aanpast op de .homeBox input.button in css moet het werken (bij mij tenminste):

margin: -7px 0 -40px;
float: left;

Origineel gepost door Maurizio Giordano