Menu item height in Internet Explorer - menu

Why are the menu items of my site in Internet Explorer 11 so high?
I've built a Joomla 3.4.x site with Bootstrap 3.4.x.
Here's the URL: https://www.chjc.nl
There seems to be something wrong with the menu in Internet Explorer (11). In Firefox Opera and Chrome all seems OK (I haven't got MS Edge), the height is what it should be, in IE the menu items are a lot higher.
Secondly: I see list-style circles in front of the menu items in IE.
Can anyone explain what is wrong?
Also: when I change some CSS in the Inspector in IE, something may change and when I then change the CSS file, IE doesn't do what it was doing when I changed the CSS in the Inspector... This may be a totally unrelated bug.
Thanx
Thom
Thomsterdam Web Design

If you change something in your Inspector in IE, it is not changing the file on your webserver. You should open the CSS file in your IDE a.k.a. web editor and save it and upload it to your website.
You should make your <ul> and <ol> have the style list-style:none;
If you make your <a> in the dropdown <li> inline-block instead of display:block your menu will look the same in all the browsers.

Related

How to download .svg file from this page?

I need to download the "Municipalities in Bosnia and Herzegovina.svg" (map) file from this page, but I have no idea how to download it, i.e. to find a link to the image on the page. I found sodipodi:docname="Municipalities in Bosnia and Herzegovina.svg" in the source code, but that still doesn't help me. Could someone link to the svg file and perhaps explain how they deduced where the file is stored?
Assuming you have the rights to use the map. Make sure you do.
The SVG is embedded into the code of the page. You need to cut and paste it from the page source.
The following instructions are for Chrome. Other browsers will be similar.
Mouse over the light grey area of the map.
Right-click, then select "Inspect" from the menu
The browser web tools pane should open with the <svg> element selected.
Ctrl-C to copy
Paste into your favourite text editor.
"Save Page As"
Chrome(right click)
Firefox (menu/Alt or Ctrl + S), then choose the "just SVG" option in the dropdown menu.
Internet Explorer (get Firefox or Chrome, its about time!)
An easy way to download the SVG is using a browser extension. For example, on the Chrome browser there is the SVG Export extension which allows you to view & download the SVGs on a given page. Of course, always make sure that you have the rights/permissions to download the SVGs.

Safari 9 Not Showing SVG Pinned Tab Icon

I created a new pinned-tab icon for Safari 9 on El Capitan as documented by Apple here but I can't seem to get Safari to actually show it when I pin my tab.
Here's the line in my header:
<link rel="mask-icon" href="https://towatchlist.com/img/twl.svg" color="red">
Safari does show the image just fine when I follow the link to the SVG file, but the pinned tab icon still shows the auto-generated letter image even after reloads and pin/unpin etc.
I tried opening up GitHub's SVG (which is working) and copying the general markup there but that didn't fix things either. I also poked through the Safari console briefly but didn't see it even attempting to land the SVG file.
Any suggestions on how to even debug this or ideas on what is going wrong?
Looks like Safari is aggressively caching (even the absence of) these icons. Found the answer over on Super User:
Delete the contents of the following folder:
~/Library/Safari/Template Icons
And then restart Safari.

mouseover text appears on all thumbs

When I mouse over a thumbnail in Tumblr Archive, thumb goes dark and text appears over it. But something has changed in my settings and ALL thumbs appear like this. I use Win XP and the latest browser is IE8. I don't get this with Firefox or another PC.
The same thing happened to me when I updated to IE 10. It is a compatibility issue. Go to "tools" and change your "compatibility view" and it will change it back to the normal view (i.e. the thumbnails will show until you mouse over them). Have one of the archive pages open, and change it, it should update automatically. If it doesn't fool around with the settings until it changes. You can change the "compatibility view" for "tumblr" only by changing the compatibility view for that site only.

Edit button does not show up in Internet Explorer

I am using an MVC 3 razor grid with version 2011.2.712.340 of the Telerik extensions.
I have an Edit command button in my html for the grid. The edit button shows up in Chrome & Firefox, but not Internet Explorer with the same exact code base.
Would someone be able to tell me what I need to do in order to get it to display in IE?
Actually, in additon to the Button not showing up, the data for the record is shifted over starting in the Command column....
Also, this only happens in IE9. If i put the browser in IE9 compatability mode or IE8 or IE7, the page renders fine.
What do I need to do for it to render properly using IE9?
It might be related to Hidden Columns in Telerik, have a look at this post for the workaround:
http://www.macaalay.com/2011/09/29/telerik-mvc-grid-workaround-for-not-rendering-properly-in-internet-explorer/

can I prevent firebug lite div from stacking on top of the glimpse div?

Firebug lite displays a div tag in the bottom right of the window when included on a page. The new tool Glimpse uses the same method to display a div for it's activation as well. My problem is that the glimpse div appears under the firebug div in z-order.
Is there a simple clever way to solve this?
You can change Firebug Lite options to not display that little icon:
https://getfirebug.com/firebug-lite.js#showIconWhenHidden=false
There are different ways to set options. Read more here:
http://getfirebug.com/firebuglite#Options
You could add a little JavaScript on your page that grabs either the Glimpse or FireBug Light div (if present) and changes the placement or zIndex.

Resources