Is there a way to make a responsive table for email templates either using mjml or html? Is it overflow supported for email templates? - email

I want to know how to make a responsive table, and it's a large table. Is the property "overflow" supported for email provider services.
<mjml version="3.3.3">
<mj-head>
<mj-style>
.table-container {
overflow-x: auto;
white-space: nowrap;
}
</mj-style>
</mj-head>
<mj-body >
<mj-section>
<mj-column css-class="table-container">
<mj-table width="100%">
<tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
<th style="padding: 0 15px 0 0;">Year</th>
<th style="padding: 0 15px;">Language</th>
<th style="padding: 0 0 0 15px;">Inspired from</th>
<th style="padding: 0 15px 0 0;">Year</th>
<th style="padding: 0 15px;">Language</th>
<th style="padding: 0 0 0 15px;">Inspired from</th>
<th style="padding: 0 15px 0 0;">Year</th>
<th style="padding: 0 15px;">Language</th>
<th style="padding: 0 0 0 15px;">Inspired from</th>
</tr>
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
</tr>
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Scheme, Self</td>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Scheme, Self</td>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Scheme, Self</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mjml>
Or what is the better way to make responsive tables for emails? I tried the code above and I can't see the overflow for the table.

Related

Handle SVG sprite file with flutter_svg

I have SVG file on server side named sprite-icons.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-1" viewBox="0 0 826800 826800">
<path fill="#222222" d="M201379 197582l31452 0 0 432178 -31452 0 0 -432178zm122701 72034l33469 0 0 282159 -33469 0 0 -282159zm138450 74734l31666 0 0 135933 -31666 0 0 -135933zm131388 -147310l31503 0 0 432178 -31503 0 0 -432178z"/>
</symbol>
<symbol id="icon-2" viewBox="0 0 826800 826800">
<path fill="#aaaaaa" d="M201379 197582l31452 0 0 432178 -31452 0 0 -432178zm122701 72034l33469 0 0 282159 -33469 0 0 -282159zm138450 74734l31666 0 0 135933 -31666 0 0 -135933zm131388 -147310l31503 0 0 432178 -31503 0 0 -432178z"/>
</symbol>
</svg>
I have url to get it, but when I try do it with flutter_svg this way:
SvgPicture.network('https://some-domain.com/img/sprite-icons.svg')
// or
SvgPicture.network('https://some-domain.com/img/sprite-icons.svg#icon-1')
I'm getting an error:
StateError (Bad state: SVG did not specify dimensions
The SVG library looks for a `viewBox` or `width` and `height` attribute to determine the viewport boundary of the SVG. Note that these attributes, as with all SVG attributes, are case sensitive.
Is it possible to get such SVG sprite file and render included svgs (icon-1 and icon-2) with flutter_svg? Or any other way? Thanks.

leaflet map does not centre correct

Hopefully somebody can help me to centre correct. I'm not sure were the problem comes from, because it seems that the problem only exist on the PC screen and on my mobile screen it is correct.
After I resize the size of the browser window the markers are centred correct. But how to do that automatic?
The problem is shown since I updated from leaflet 0.7 to 1.0.3
On the map are shown several markers and polylines. At the end I try to fit the markers with:
map.fitBounds(myBounds,{maxZoom:10});
map.invalidateSize();
myBounds are the bounds of the markers.
var myBounds = pline2.getBounds();
To test I made this pline between all added markers:
var marker = L.marker(".$event->getLatLonJSArray().", { icon: myIcon, title: '".$title."'}).addTo(map);
pline2.addLatLng(".$event->getLatLonJSArray().");
The map is not centred to the bounds, but the centre is more north from the markers. If zoomed in to much the markers are even out of the viewbox.
If I do invalidateSize() before fitBounds the picture look as underneath. Also than it's corrected afted I resize the browserwindow.
Who can help me with the correct code for centring the map?
Thanks for reaction!
The complete taken from the browser development tools:
<script>
var MapData = 'Map data © OpenStreetMap contributors';
var Imagenary = ' | Imagery © Mapbox';
var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: MapData,
maxZoom: 18
});
var mapbox = L.tileLayer('//{s}.tiles.mapbox.com/v3/oddityoverseer13.ino7n4nl/{z}/{x}/ {y}.png',
{
attribution: MapData + Imagenary,
maxZoom: 18
});
var map = L.map('osm-map'); //.fitWorld().setZoom(10);
osm.addTo(map);
var baseLayers = {
'Mapbox': mapbox,
'OpenStreetMap': osm
};
L.control.layers(baseLayers).addTo(map);
var pline2 = L.polyline([], {color: "black"});var polyline = L.polyline([], {color: 'red', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.16201,4.50147], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 8 augustus 1650 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">8 augustus 1650</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.16201,4.50147]);
pline2.addLatLng([52.16201,4.50147]);
polyline.addTo(map);
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="red" fill="red"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-resi', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.1624538,4.5015904], { icon: myIcon, title: ' hij zelf: Paulus Dircksz Planjer (–) | Woonplaats: 28 juni 1669 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label"><i class="icon-selected"></i> hij zelf: </span><span class="NAME" dir="auto" translate="no">Paulus Dircksz <span class="SURN">Planjer</span></span> (<span title=""></span>–<span title=""></span>)<div class="fact_RESI"><span class="label">Woonplaats:</span> <span class="field" dir="auto"><span class="date">28 juni 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.1624538,4.5015904]);
pline2.addLatLng([52.1624538,4.5015904]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'blue', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'green', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'purple', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'orange', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkred', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'salmon', opacity:'0.6'});
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'beige', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="beige" fill="beige"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Dochter: Dina Paulusdr Planjer (1661–) | Gedoopt: 6 februari 1661 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Dochter: </span><span class="NAME" dir="auto" translate="no">Dina <span class="SURN">Paulusdr Planjer</span></span> (<span title="6 februari 1661">1661</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">6 februari 1661</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkblue', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkblue" fill="darkblue"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Jacobus Paulusz Planjer (1662–) | Gedoopt: 12 maart 1662 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Jacobus <span class="SURN">Paulusz Planjer</span></span> (<span title="12 maart 1662">1662</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">12 maart 1662</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkgreen', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkgreen" fill="darkgreen"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1664–) | Gedoopt: 23 maart 1664 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span> (<span title="23 maart 1664">1664</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">23 maart 1664</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'cadetblue', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="cadetblue" fill="cadetblue"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Paulus Planjer (1666–) | Gedoopt: 7 februari 1666 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Paulus <span class="SURN">Planjer</span></span> (<span title="7 februari 1666">1666</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">7 februari 1666</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
var polyline = L.polyline([], {color: 'darkslateblue', opacity:'0.6'});
var myHtml = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" width="25" height="50"><path class="svg-icon-path" d="M 0.5 13 C 0.5 25 12.5 20 12.5 49.5 C 12.5 20 24.5 25 24.5 12.5 A 6.25 6.25 0 0 0 0.5 12.5 M 2.5 12.5 A 10 10 0 0 1 22.5 12.5 A 10 10 0 0 1 2.5 12.5 Z" stroke-width="1" stroke="darkslateblue" fill="darkslateblue"></path></svg>';
var myIcon = L.divIcon({className: 'my-div-icon icon-birt', iconSize: [25,50], iconAnchor: [12.5,50], popupAnchor: [0,-50], html: myHtml });
var marker = L.marker([52.15890,4.49268], { icon: myIcon, title: 'Zoon: Johannes Planjer (1669–) | Gedoopt: 14 april 1669 — Leiden'}).addTo(map);
marker.bindPopup('<span class="label">Zoon: </span><span class="NAME" dir="auto" translate="no">Johannes <span class="SURN">Planjer</span></span> (<span title="14 april 1669">1669</span>–<span title=""></span>)<div class="fact_CHR"><span class="label">Gedoopt:</span> <span class="field" dir="auto"><span class="date">14 april 1669</span> — <span title="Leiden, Zuid-Holland, Nederland" dir="auto">Leiden</span></span></div>');
polyline.addLatLng([52.15890,4.49268]);
pline2.addLatLng([52.15890,4.49268]);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
polyline.addTo(map);
pline2.addTo(map);var myBounds2 = pline2.getBounds();map.fitBounds(myBounds2,{maxZoom:10});
map.invalidateSize();
</script>

Could not reproduce your issue outside of your framework (Webtrees.net?):
http://playground-leaflet.rhcloud.com/huto/1/edit?html,output
What may happen is that your map container size is adjusted several times before and after your code runs.
The fact that everything works fine when you resize your browser window is indeed a very good indicator that Leaflet could not retrieve the correct map container size, and you were probably right trying to execute map.invalidateSize(). However your map container still changes size before and after that, since changing your map view does not results in expected view.
A blind workaround could be to execute the size invalidation and map view change after some delay, hoping that your framework settles down your map container size in the meantime.
setTimeout(function () {
map.invalidateSize();
map.fitBounds(myBounds2, {
maxZoom: 10
});
}, 500); // Adjust the value (in ms)
Of course the proper resolution would be to make sure if the issue comes indeed from map container size being changed, then how to know once the size reaches its final state, and execute the above code at that moment.
If this does not solve your issue, even when using a long delay (like a few seconds), then the issue might be different.
BTW: your new screenshot shows some sort of tabs at the top. In that case, make sure you run invalidateSize after your tab is revealed, and change again the map view after that.
See: Data-toggle tab does not download Leaflet map

"sectionIndex" only returns headlines in the first content element

if i set "sectionIndex = true", in the menu only the headlines of the first backend element are shown. But i need all headlines of this page.
This is the code of the dropdownmenu:
2 = TMENU
2 {
wrap = <ul class="dropdown-menu" role="menu">|</ul>
noBlur = 1
expAll = 0
sectionIndex = true
NO = 1
NO.allWrap >
NO.wrapItemAndSub = <li>|</li>
CUR = 1
CUR < .NO
CUR.wrapItemAndSub = <li class="active current">|</li>
ACT = 1
ACT < .NO
ACT.wrapItemAndSub = <li class="active">|</li>
IFUSB < .1.IFSUB
CURIFSUB < .1.CURIFSUB
ACTIFSUB < .1.ACTIFSUB
SPC = 1
SPC.doNotLinkIt = 1
SPC.doNotShowLink = 1
SPC.allWrap = <li class="divider"></li>
}
can anybody help me?
Thanks!

If any have the same problem:
i have found the answer. You have to add this column:
sectionIndex.useColPos = -1

How to disable built-in code box when using Syntaxhighlighter3?

I'm using Dokuwiki and want to get rid built-in code box (boxes with grey outline) when using Syntaxhighlighter3.
Appreciate if anyone know how to do this.

Add these lines to the css file (in your case shCore.css)
box-shadow: 0 0 0 0 !important;
The file sxh3\styles\shCore.css ( when the above line is inserted at line 28 ) would like as follows:
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
box-shadow: 0 0 0 0 !important; /* <-- this line */
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;

Typoscript change menu parameter

I want to generate a menu which changes by a parameter "menu". All menu items have the same pid, therefore the parameter overrideId is set.
So the problem is, the active state doesn't change because I don't change the page. You can see the current script in action via innovisions.artec-berlin.de. It's the menu on the left side.
For some reason the typoscript worked fine in 4.5.2 LTS but not in 4.6.3. Any suggestions or ideas?
lib.menu_main {
# Level 1
1 = TMENU
1.noBlur = 1
1.overrideId = 95
1.expAll = 1
1.wrap = <ul id="outer">|</ul>
1.NO = 1
1.NO.additionalParams.stdWrap.override.insertData = 1
1.NO.additionalParams.stdWrap.override = &menu={field:uid}
1.NO.ATagBeforeWrap = 1
1.NO.insertData = 1
1.NO.linkWrap = <img src="fileadmin/templates/images/arrow_menu.gif" alt="Arrow" title="Arrow" />
1.NO.wrapItemAndSub.insertData = 1
1.NO.wrapItemAndSub = <li id="x1 menu_{field:uid}" class="first>|</li> |*| <li id="xx1 menu_{field:uid}">|</li> |*| <li id="xxx1 menu_{field:uid}" class="last">|</li>
1.NO.ATagTitle.field = subtitle // title
1.ACT = 1
1.ACT.additionalParams.stdWrap.override.insertData = 1
1.ACT.additionalParams.stdWrap.override = &menu={field:uid}
1.ACT.ATagBeforeWrap = 1
1.ACT.linkWrap = <img src="fileadmin/templates/images/arrow_menu.gif" alt="Arrow" title="Arrow" />
1.ACT.wrapItemAndSub.insertData = 1
1.ACT.wrapItemAndSub = <li id="x2 menu_{field:uid}" class="first_active">|</li> |*| <li id="xx2 menu_{field:uid}" class="active">|</li> |*| <li id="xxx2 menu_{field:uid}" class="last">|</li>
1.ACT.ATagTitle.field = subtitle // title
1.CUR = 1
1.CUR.additionalParams.stdWrap.override.insertData = 1
1.CUR.additionalParams.stdWrap.override = &menu={field:uid}
1.CUR.ATagBeforeWrap = 1
1.CUR.linkWrap = <img src="fileadmin/templates/images/arrow_menu.gif" alt="Arrow" title="Arrow" />
1.CUR.wrapItemAndSub.insertData = 1
1.CUR.wrapItemAndSub = <li id="x3 menu_{field:uid}" class="first_active">|</li> |*| <li id="xx3 menu_{field:uid}" class="active">|</li> |*| <li id="xxx3 menu_{field:uid}" class="last_active">|</li>
1.CUR.ATagTitle.field = subtitle // title
# Level 2
2 = TMENU
2.noBlur = 1
2.overrideId = 95
2.expAll = 1
2.wrap = <ul id="inner">|</ul>
2.NO = 1
2.NO.additionalParams.stdWrap.override.insertData = 1
2.NO.additionalParams.stdWrap.override = &menu={field:uid}
2.NO.wrapItemAndSub.insertData = 1
2.NO.wrapItemAndSub = <li id="1 menu_{field:uid}" class="first">|</li> |*| <li id="11 menu_{field:uid}">|</li> |*| <li id="111 menu_{field:uid}" class="last">|</li>
2.NO.ATagTitle.field = subtitle // title
2.ACT = 1
2.ACT.additionalParams.stdWrap.override.insertData = 1
2.ACT.additionalParams.stdWrap.override = &menu={field:uid}
2.ACT.wrapItemAndSub.insertData = 1
2.ACT.wrapItemAndSub = <li id="2 menu_{register:count_HMENU_MENUOBJ}" class="first">|</li> |*| <li id="22 menu_{field:uid}" class="active">|</li> |*| <li id="222 menu_{field:uid}" class="last">|</li>
2.ACT.ATagTitle.field = subtitle // title
2.CUR = 1
2.CUR.additionalParams.stdWrap.override.insertData = 1
2.CUR.additionalParams.stdWrap.override = &menu={field:uid}
2.CUR.wrapItemAndSub.insertData = 1
2.CUR.wrapItemAndSub = <li id="3 menu_{field:uid}" class="first">|</li> |*| <li id="33 menu_{field:uid}" class="active">|</li> |*| <li id="333 menu_{field:uid}" class="last">|</li>
2.CUR.ATagTitle.field = subtitle // title
}