login  Naam:   Wachtwoord: 
Registreer je!
 Forum

background-size IE

Offline shamrock - 11/12/2010 15:00
Avatar van shamrockLid Hallo,

Zoals gewoonlijk wijkt er weer een browser af.

Ik wil graag van deze afbeelding: http://www2.sha...nt/vak.png
een groot vak maken in html en css om in te kunnen typen.

Dit werkt ook: http://www2.shamrock-maastricht.nl/test.php

Dit werkt in Google Chrome, Mozilla Firefox, Opera, maar niet in IE  

Dit is mijn css code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2. .content-lb { background: url('images/content/vak.png') no-repeat left top; }
  3. .content-b { height: 30px; background: url('images/content/vak.png'); background-position: -100px 0px; background-repeat: repeat-x; -moz-background-size: 180% 204px; background-size: 180% 204px; }
  4. .content-rb { background: url('images/content/vak.png') no-repeat right top; }
  5.  
  6. .content-l { width: 25px; background: url('images/content/vak.png') left; background-repeat: repeat-x; -moz-background-size: 204px 20000px; background-size: 204px 20000px; }
  7. .content-m { height: 30px; background: url('images/content/vak.png'); background-position: -50px -3200px; background-repeat: repeat-x; -moz-background-size: 180% 20000px; background-size: 180% 20000px; }
  8. .content-r { width: 25px; background: url('images/content/vak.png') right; background-repeat: repeat-x; -moz-background-size: 204px 20000px; background-size: 204px 20000px; }
  9.  
  10. .content-lo { background: url('images/content/vak.png') no-repeat left bottom; }
  11. .content-ro { background: url('images/content/vak.png') no-repeat right bottom; }
  12. .content-o { height: 24px; background: url('images/content/vak.png'); background-position: -100px -180px; background-repeat: repeat-x; -moz-background-size: 180% 204px; background-size: 180% 204px;}
  13.  
  14. .content-m1 {height: 30px; background: url('images/content/vak.png'); background-position: -50px -3200px; background-repeat: repeat-x; -moz-background-size: 180% 20000px; background-size: 180% 20000px; }
  15. </style>


html:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <table width='100%' border='0' cellspacing='0' cellpadding='0'>
  2.   <tr>
  3.     <td class='content-lb' align='right'>&nbsp;</td>
  4.     <td class='content-b' align='right'>
  5.         <table width='100%' border='0' cellspacing='5' cellpadding='0'>
  6.           <tr>
  7.             <td><font style='size: 4; font-weight: bold;'>'.$titel.'</td>
  8.           </tr>
  9.       </table>
  10.     </td>
  11.     <td class='content-rb' align='right'>&nbsp;</td>
  12.   </tr>
  13.   <tr>
  14.     <td colspan='3'>
  15.         <table width='100%' border='0' cellspacing='0' cellpadding='0'>
  16.           <tr>
  17.             <td class='content-l'>&nbsp;</td>
  18.             <td class='content-m'><p><span class="content-m1"><font color='#FFFFFF'>
  19.  
  20.             '. $insert .'<BR>
  21.             '. $insert .'<BR>
  22.             '. $insert .'<BR>
  23.             '. $insert .'<BR>
  24.             '. $insert .'<BR>
  25.             '. $insert .'<BR>
  26.             '. $insert .'<BR>
  27.             '. $insert .'<BR>
  28.             '. $insert .'<BR>
  29.             '. $insert .'<BR>
  30.             '. $insert .'<BR>
  31.             '. $insert .'<BR>
  32.             '. $insert .'<BR>
  33.             '. $insert .'<BR>
  34.             '. $insert .'<BR>
  35.             '. $insert .'<BR>
  36.             '. $insert .'<BR>
  37.             '. $insert .'<BR>
  38.             '. $insert .'<BR>
  39.             '. $insert .'<BR>
  40.             '. $insert .'<BR>
  41.             '. $insert .'<BR>
  42.             '. $insert .'<BR>
  43.             '. $insert .'<BR>
  44.             '. $insert .'<BR>
  45.  
  46.             </font></span></p>
  47.             <p>&nbsp;</p></td>
  48.             <td class='content-r'>&nbsp;</td>
  49.           </tr>
  50.         </table>
  51. 	</td>
  52.   </tr>
  53.   <tr>
  54.     <td class='content-lo' >&nbsp;</td>
  55.     <td class='content-o' >&nbsp;</td>
  56.     <td class='content-ro' >&nbsp;</td>
  57.   </tr>


Ik heb al gezocht maar kan niets vinden (alleen dat het niet werkt, maar geen oplossing)...


Weet iemand misschien hoe ik dit ook in IE goed krijg?

Vriendelijk bedankt

2 antwoorden

Gesponsorde links
Offline WouterJ - 11/12/2010 15:16
Avatar van WouterJ HTML gevorderde Background-size is een nieuwe functie in CSS3. Dit wordt helaas nog niet door IE ondersteund. Je kan hele grote js scripten inladen waarmee dit wel werkt op IE, maar raad ik af.

Het feit dat je -moz- ervoor moet zetten geeft aan dat Firefox het ook nog in de proeffase heeft staan en dus zal het daar ook niet altijd goed in werken.

Volgens mij zijn er ook kleine javascriptjes waarmee je je afbeelding kan vergroten.
Offline shamrock - 11/12/2010 15:45 (laatste wijziging 11/12/2010 15:53)
Avatar van shamrock Lid hmm ok

Is er in css een manier om een deel van een afbeelding te repeaten?

dus dat ik echt het midden van het vak selecteer?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.186s