I have a page that is generated by ajax/jquery at http://chainery.comoj.com/test.html. That page is the html generated by http://chainery.comoj.com#anklets. The problem is the product image is not being displayed. I think my problem lies in the css as neither the ajax page nor the html page show the image to the left of the product description. The link and image appear to be there in explorer's dom but just not showing. Everything does show in FF and safari. Also IE is not displaying any errors, that I can see.
Thank you for any tips or solutions,
Todd
This is a pretty unique issue, but I think I know what the cause is.
If you look at the generated source on your page, the img tag that you're having issues with reads exactly like this:
<img class="itempic" src="images/products/anklets/thumbnails/SSA-40_thumb.jpg" alt="Ravina - Ravina - A hana-gusari anklet" title="Click image for larger view" height="" width="">
If you look at that you'll notice that the height and width attributes are both set to an empty string (""). I'm guessing that Firefox is generously ignoring those attributes and IE is cruelly applying them. Meaning that in IE the height and width of your image are 0, since that's the closest numerical value that IE can derive from "".
Try changing whatever it is in your script that creates that tag to either set a height and width that is appropriate, or to not add those attributes at all.
Related
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
I am using the facebook Like Box API (http://developers.facebook.com/docs/reference/plugins/like-box/). I set the height in the supplied code generation boxes but it always reverts to the standard height. I try editing the code directly eg:
<div class="fb-like-box" data-href="https://www.facebook.com/me" data-width="870"
data-height="1000"
data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false"></div>
But this also does nothing to change it.
I have tried both the iframe and HTML5 versions of this to no avail.
I have also tried adding some inline CSS eg: style="height: 1000px;". Also no luck there.
Width, for whatever reason, seems fine.
Can anyone suggest a way to fix this? Thanks!
height - the height of the plugin in pixels. The default height varies
based on number of faces to display, and whether the stream is
displayed. With the stream displayed, and 10 faces the default height
is 556px. With no faces, and no stream the default height is 63px.
From your link.
The height of the element inside the IFRAME was changing as per the height value you put in the Facebook code until a few days ago. Something seems to have changed at Facebook. I have two sites that are effected. Both were displaying the like box at the height I declared until very recently.
The same thing is happening to me as well after working for the past 12+ Months. I tried recreating the code using several different options and it seams to be a code bug within the Facebook Application itself. Wondering if anyone there knows of the issue and if we can expect it to be fixed soon. My site: http://peachtreebennett.com/
Apparently, you can no longer change the height. As some have stated, in the past, changing the data-height in their provided code would change the height of the iframe as well as the content inside it. This no longer happens.
Even the generator on Facebook's dev site has a height input field, but changing it does nothing. Try it for yourself here:
https://developers.facebook.com/docs/reference/plugins/like-box/
I've got myself multiple a tags floating on a page.
They have been styled in a unique way to center an image horizontally inside it, using a span and css. The a tag itself has fixed width and height.
I thought this was basic stuff, and my theme was causing the issue, but I've created a stripped down jsFiddle and I'm still getting the same problem when running the jsFiddle in IE 7.
The a tags are all click-able in every browser apart from IE7, why is this happening?
Can anyone explain? Thanks.
http://jsfiddle.net/motocomdigital/Qk9tu/6/ - Test click-able state in IE7, works fine everywhere else.
Don't worry about IE 6 - I'm not coding for this anymore.
On IE, a link element (<a></a>) with an empty attribute href doesn't display a link-cursor (hand).
Either put a # in your href attributes or add a cursor:pointer on a.home-module
It's the spans inside the a that cause the trouble...
You can achieve what you are trying to do with just CSS, but it requires a slightly different layout in your HTML and some extra CSS.
JSFiddle - http://jsfiddle.net/8E8um/2/
Note
In a.home-module I have added a transparent image. This is because IE7 will not assign an "empty" parameter (due to the negative text-indent) to the top level and would therefore still leave the link unclickable.
you should assign "#" to href attribute.
Try this: http://jsfiddle.net/Qk9tu/5/
I am having a problem with the visibility of my LIKE BUTTON social plugin.
the problem only occurs on IE (it works just fine in Chrome & Firefox), and only to the type of "box_count".
I tried multiple ways to implement the plugin (iframe, fb:like etc...) and the result in IE is the same (as the picture demonstrates in the following link):
print screen of the messed-up FB LIKE-BUTTON
The problem is ONLY while i'm toggling a div (in a "talkbacks" area), while to plugin is inside a DIV with "Display:NONE" (before the display changes to "display:block" by clicking on another link).
I think the property "display:none" effects the plugin on IE somehow, altough the display changes after toggling the div.
You can't have a div with an ID that starts with a number - it's invalid.
Try and use the HTML version:
<div class="fb-like" data-href="http://www.example.com" data-send="true" data-layout="box_count" data-width="70" data-show-faces="true" data-font="arial"></div>
Make sure you don't have any CSS styles that alter the width of the DIV - as Anagio said - use the developer tools on chrome/firefox to inspect the div element that has shrunk. Also look for any javascript errors.
If you can post the actual URL, people will be able to offer more help
I have a web page that includes an iframe as well a DHTML calendar widget. The page displays correctly as well as the content inside the iframe. The problem is when I activate the calendar which is positioned close enough to the iframe that some of the calendar is hidden by the iframe.
I have tried to manipulate the positioning of the iframe by using both javascript and CSS (Zindex, z-index) but the iframe always appears as the top most layer on the page obscurring any parent DHTML content that gets rendered in the same area as the iframe. I also changed the css of the DHTML calendar to values > 0 and wrapped the widget scriplet in a div/span with a high z-index value but no luck.
The z-index of an iframe is handled in a weird way by IE. If you can get rid of it, I'd recommend you do and just embeded the content in a regular Div.
If you don't have other choices than do it like this, keep in mind that the z-index of elements like and will be infinite in IE6. So the way to stack that is to use iframes with higher zindexes, so that it will be infinity vs infinity+1.
An example of this is vs stacking. Both have infinite z-index, but you can stack them. Checkout Stu Nicholls code, that could be helpful.
That's pretty bad thought, my fix would be to avoid having other fields in this area.
Google for "IE z-index bug" for a variety of examples and solutions to similar problems. The html specification states that z-index should be absolute, but in IE it can be determined for an element if a parent element is positioned. In extreme circumstances, I've had to trace back up the DOM tree from the element that's causing problems and set the z-index attribute on whatever parent element has position, not on the element that is being obscured (and should rightfully have its z-index set). IE Developer toolbar can help for dynamic debugging if it's really a mess, just start setting the z-index properties up the tree until you find the one that makes it looks right.
You can definitely cover the iFrame with a div.
The thing is you can't use z-index unless you use position:relative, or position:absolute, or position: fixed on the calandar div.
What you want to do is change the "position" CSS property of the calandar to be "relative". If your iFrame has the normal static positioning (meaning you didn't add any special positioning to it, this will work).
If your iFrame has "absolute" positioning, you might need to do "position:absolute" on the calandar.
See link: http://resopollution.com/test/test.html
(works in all modern browsers including IE6)
I just realized that the problem seems to be related to the MSXML and how IE transforms XML documents. The XML has an XSLT stylesheet association which the browser uses to transform the XML document. The output of the transformation is an HTML document. I didn't think it was import to disclose that I my HTTP response was XML since the HTML is what is rendered in the end, but it does matter.
When the source of the IFRAME is an HTML document everything works fine. The DHTML is not covered by the IFRAME. But when MSXML is used to transform the IFRAME content this is when the problem occurs. Below are some sample files that illustrate the problem.
For the DHTML compoenent I am using the spiffycalendar widget but I would imagine any DHTML element would produce the same results.
PARENT.HTML
IFRAME DHTML CONFLICT EXAMPLE
var pickupdate=new ctlSpiffyCalendarBox("pickupdate", "mainF", "PICKUP_DATE","btnDate1","",1);
</script>
PARENT WINDOW
FIELD
FIELD
FIELDpickupdate.writeControl();
FIELD
FIELD
FIELD
Save Changes
IFRAME.HTML
IFRAME.XSL
]>
TEST XML DOC
IFRAME CONTENT