Why, same code not working in diff browsers?

HTML & CSS
1

Hi all,
I am using the css to rotate an image.


<style type="text/css">
	div.rotated180 {
    /* CSS3 then proprietary code */
    rotation: 180deg;
	/* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
	/* for ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
</style>
and i used this css in div like this;

<div id="imgid2div" class='rotated180'>

It is working fine in all browsers.

But when i used it in this page;
Design Cable

Here, in this page;
Select first and second connector as;
N-female–>75–>crimp–>straight connector
and observe the change.
Second connector is not rotating,why?
In mozilla, the css is working fine. but not in IE and chrome…

Can you help me regarding this?

Thanking you…

2

I can’t test in webkit, but you could apply the rotation to the actual image instead of rotating the div that contains it. It’s possible that your heavy table layout is causing you problems with it.

3

Thanking you for your reply.

I am using the onchange function to get the selected image name, and select the image and identifying the div and displaying it, by getting the div id.

like this;


function getCity(strURL) {

		var req = getXMLHTTP();

		if (req) {

			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {
						document.getElementById('imgiddiv').innerHTML=req.responseText;
					} else {
						alert("There was a problem while using XMLHTTP:\
" + req.statusText);
					}
				}
			}
			req.open("GET", strURL, true);
			req.send(null);
		}

	}

Is there any other why to get the image url and display it based on the selection of select box item…?

4

What this has to do with anything?

I’m suggesting this:


div.rotated180 [b]img[/b] {
    -moz-transform: rotate(180deg);
}

instead of this


div.rotated180 {
    -moz-transform: rotate(180deg);
}
5

Earlier, in Mozilla it is working fine…But not in chrome angle changes +90 instead of 180 and in IE remains same(angle 0)…
After i make the changes also, in mozilla it is working fine…
and in chrome the angle changes -90 instead of 180.

6

Well, first off, a thing I’ve missed: you have the DTD commented, which makes IE go in quirks mode.

Second, maybe this is what is causing you problems:


$('#imgid2div').rotate({angle:90})

EDIT: It seems to me you need to decide: jQuery rotate or CSS3 rotate. It seems you need to stick with jQuery, since the functionality implies Javascript be enabled.

7

Thank you noonnope.

That is the problem, Earlier i added that one, but forgot to remove it.

I solved this problem…

Again Thanks…

8

You’re welcome.

You still have Opera to cover:


-o-transform: rotate(180deg);
9

Ya, i tried and solved in opera also…
Thank you…
But after showing the hidden items based on the selection of previous one,
the div is expanding(top and bottom), why?
how to overcome this, and fix this…

10

div is the parent for the elements, so it will adjust its size to accomodate for the child elements box models. Unless the child elements are taken out from the normal flow, in which case, unless otherwise specified, the parent element will calculate and adjust its size accounting only elements that are in the normal flow, plus its own box model sizes.

If you want a fixed height for the div, you should specify this, using the height related CSS properties, and probably make the overflow hidden. It’s possible that by doing so, some part of the content will overflow and be… hidden, so you need to calculate carefully.