I am trying to build an interactive map using an imagemap and jquery. I have it completed and it works great in FireFox but IE7 is causing some issues.
You can take a look at it here:
http://www.thecolumbianchicago.com/map/
In IE7 the title of the rollover is not getting the width set properly. Also once you rollover the tall building icon in the center, the background of the title disappears. I'm guessing its a CSS issue but I can't figure it out.
Anyone got any ideas?
Thanks
I figured it out, it was the javascript. I guess IE doesn't like .attr('width') and was returning a zero. I changed the code to have the width put into the image as rel="width" and used .attr('rel') and its all good now.
Don't mess with html image maps. You can use vector based interactive maps with jVectorMap.
Related
I'm trying to get a centered image that spans the entire page, with a small text box overlay. You can see my attempt at www.cloudtute.com.
Unfortunately this doesn't work in all browsers and the form elements look weird in some browsers. E.g. trying it in internet explorer 9 it comes up tiled and the text box is black!
I was trying to go for a similar effect to the image on www.airbnb.com which works in all browsers - can anyone tell me where I'm going wrong please?
From what you've explained it shouldnt be too difficult. However www.cloudtute.com isnt opening for me, it comes up with not found, so I cant see your code. If you can add your current code or get the website working again I can help out.
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
I'm using a background image for a submit button that I've using for a search form, and am trying to align the submit button/background image it so that it's vertically centered within the search input bar.
Check out the JSFiddle with my code to get a better idea of what I mean:
http://jsfiddle.net/XVx5A/3/
It aligns perfectly for FF and Chrome, but for some reason is stuck above the input bar in IE, and I can't seem to figure out why. Any advice on what's going on here and how to make this work in IE?
Note: I was originally using the image itself to submit the form, but do not want to go that way because of the automatic x & y coordinates messing up the clean url structure.
Thanks in advance for your help.
Floating the button and adding a fixed height to the search field normalizes positioning. Updated: http://jsfiddle.net/XVx5A/21/
You could also make the submit transparent and include the search icon as the text field's background.
Try to remove height:20px from .submit_search_icon. At least on Mac it looks better in Chrome.
See http://www.arthwine.co.uk.
This used to work fine in Chrome and works fine in all other browsers (afaik). Now, for some reason, Chrome is hiding most of the left column (apart from the bear). If you look on a different browser, there is a panel with the branding and a menu in it under the bear.
I can't figure out at all why it's doing this. Any ideas?
The reason it breaks is because of the bear. Or rather, it is because of the way you relatively positions the image of the bear outside the bounds of every single one of it's parent elements except the body.
This makes chromes rendering engine choke on your layout somehow.
You can test this very easily by just deleting the image of the bear from the source code, and see how everything else suddenly pops into place.
I checked it in Chrome 9.0.597.98 and I had the same problem. The solution that I found, is to add position:absolute; for the #header.
I don't see anything wrong in Chrome. I see the menu and the branding.
Hey guys, I'm using GWT for a data-driven web application, and I'm having issues with a CellTable embedded in a TabLayoutPanel. As you can see from the screenshot, the scroll bar for the table does not appear inside the bounds of the TabLayoutPanel. (You can see just a couple pixels of it on the right.) If I mouse over the TabLayoutPanel in the inspector, it properly shows the boundary ending at that black border on the right.
For some reason I haven't been able to determine, the TabLayoutPanelContent object is extending outside the bounds of its parent, the TabLayoutPanel. Has anyone run into an issue like this before? Or does anyone see an issue in the HTML/CSS that might suggest a solution? I'm sure it's something minor, but it's frustratingly difficult to find.
TIA!
The trick to finding a solution always seems to be just asking the question. :)
I had apparently set the width of one-too-many widgets to 100%. (Between the TabLayoutPanel, ScrollPanel, CellTable, etc.) I just removed all the width constraints, then slowly added them as needed until the UI was as desired.