Skip Navigation

Orientation of map on blog page

Travel Forums System Talk Orientation of map on blog page

  • 1
  • 2

Last Post

11. Posted by Sam I Am (Admin 5588 posts) 5y

Unfortunately IE doesn't follow the standards for browsers consistently, which can result in issues like this. There are hacks to try and work around it, but in my experience a lot of hair pulling and frustration is often the result (at least IE6 is only used by 3% or less these days... phew!).

In this case, I'm wondering if you might need to add !important to this width/height rule:

#travellerspoint_membermap_E6093D64-2219-AC68-17295A13862906EB {height:400px;width:250px;}


#travellerspoint_membermap_E6093D64-2219-AC68-17295A13862906EB {height:400px !important;width:250px !important;}
12. Posted by nzhamsta (Respected Member 93 posts) 5y

Nope. Still not working. Either IE8 is ignoring the !important tags or there is something in the CSS file that is overwriting it.


13. Posted by Sam I Am (Admin 5588 posts) 5y

Maybe try sticking display:block; in those two rules... it's really hard to test this properly from my mac, so a bit of guesswork here I'm afraid.

You could also put those rules at the very bottom of the stylesheet, just to make sure there isn't a rule after them that is overriding them. I don't think so, but might help!

14. Posted by nzhamsta (Respected Member 93 posts) 5y

No luck.
I have done a bit of playing and discovered that if the following line is changed

.map,.tp_map {width:600px;height:250px;display:block;margin:10px 0;}

(width should be 440px), when the page is generated, it draws a box 600 wide and then goes back to the original size of the map or to the size specified in the CSS file. This happens in all browsers.

So, does this mean there is something in your script that inserts the map into the page that says draw the map 440 x 250 (size of original insert) unless otherwise specified and IE is ignoring the instruction to change the size?

If this is totally wrong then please excuse my ignorance as I am not a programmer (just an accountant)

Thanks and regards,

15. Posted by Sam I Am (Admin 5588 posts) 5y

Hey Glynn,

Took me some time to get back to my normal desk with a PC next to me to test this out, but have a solution for you :)

For the vertical rules you have, you can actually get rid of that innermap rule and instead, for for example the Krakow entry, go with:

#travellerspoint_membermap_E6093D64-2219-AC68-17295A13862906EB {height:400px;width:250px;}

#travellerspoint_membermap_E6093D64-2219-AC68-17295A13862906EB .map {height:400px !important;width:250px !important;}

Basically, a canvas is drawn to the page called travellerspoint_membermap_E6093D64-2219-AC68-17295A13862906EB. Within that, a whole bunch of different code is located, amongst them an inner canvas with a class called map. That one has a hard coded value attached to it, which in IE is then overturning what you are originally setting. The !important rules on that second rule override those hard coded values.

Oh, in my testing, I stuck all these exceptions down at the very bottom of the stylesheet. It *should* work in the spot you have them, but otherwise try that.

Tested in Safari/Firefox and IE, so should be pretty solid!!

ps. obviously all of this is not ideal, and have already taken on board the comments regarding some better way of inserting maps!!

[ Edit: Fixing code. ]

16. Posted by nzhamsta (Respected Member 93 posts) 5y

It works perfectly in Opera, IE and Firefox.
I left the exceptions in the same place in my template, no issues.

Many thanks :) for all the work etc you guys have put into this issue. It is much appreciated.


17. Posted by Sam I Am (Admin 5588 posts) 5y

Excellent. It's good to have a workaround for this anyway, as the question might come up in the future :) By the way, you can of course set those widths/heights to whatever you like; there's no reason they have to be 400/250 etc. I figure you realize this, but just in case :)

Happy travels!

18. Posted by nzhamsta (Respected Member 93 posts) 5y


I have three maps done so far, 500 square, 500 x 400, and 400 x 250. Now that I know it works in all browsers, I will look at some of the other maps to see if they can be improved by tweaking the sizes.


  • 1
  • 2