...

View Full Version : IE compatible script validation



SiKni8
07-27-2011, 03:16 PM
I am trying to design a webpage but no matter how i design it, IE seems to show totally different design then firefox/chrome/safari.

Is there any website i can goto which will take my CSS/Script input and give me the IE version of it so it can work on all browsers without any issue?

Thanx

Kor
07-27-2011, 03:24 PM
You should code standard and, in case there are some differences, you must use a workaround. There is no such a tool. You must simply learn how to code in a standard html/CSS/JavaScript manner and learn the differences (which are not so many) between the browsers.

By the way: which IE? There are 3 versions in use: IE7,8, and 9. IE10 is on the way, and IE6 has to be ignored. IE7 and IE8 are not so different, and IE9 looks very close to FF and Chrome. Thus it remains, probably IE8 :)

SiKni8
07-27-2011, 03:34 PM
You should code standard and, in case there are some differences, you must use a workaround. There is no such a tool. You must simply learn how to code in a standard html/CSS/JavaScript manner and learn the differences (which are not so many) between the browsers.

By the way: which IE? There are 3 versions in use: IE7,8, and 9. IE10 is on the way, and IE6 has to be ignored. IE7 and IE8 are not so different, and IE9 looks very close to FF and Chrome. Thus it remains, probably IE8 :)

I am using verzion 7 and i have also FF and Chrome. and alot of the coding for example here (www.sikni8.com/swav/index.htm) i see one way in ff and one way in IE( notice how the menu extends out in IE but invisible). Kind of like that issues...

Thanx

Kor
07-27-2011, 04:02 PM
You should have not used a TABLE. You may use DIVs and CSS to float the elements.

Some HTML attributes you have used are deprecated (or even illegal under the type of Doctype you have used, aka: HTML5), like topMargin, bgColor, cellSpacing, cellPadding... You must use CSS all over for the layout.

CSS: before anything else, give your elements margins and padding 0, That will prevent a default margin/padding which some old browsers will automatically insert

The very first line of your CSS code should start with


*{
margin:0;
padding:0;
}

SiKni8
07-28-2011, 03:59 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Search API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAWZI-edpX436f58wv66oTtBQmpw_xrJbwHF8Sn7V56SEaQfZT5BQeBPHyIdyfQGkoBk1CByQfAXiE6w" type="text/javascript"></script>
<script type="text/javascript">
/*
* How to build a Google Map and bind a SearchControl to it and put markers
* on the map for each result we receive.
*/

// First, we have to load the APIs.
google.load('maps' , '2');
google.load('search' , '1');

// Global variables we will set in OnLoad
var map;
var searcher;
var initialLocation;

// Second, we set up our function, OnLoad
function OnLoad() {
// Get the content div and clear it's current contents.
var contentDiv = document.getElementById('content');
contentDiv.innerHTML = ''; // Clear any content currently in the Div

var tDiv = document.getElementById('textit');
tDiv.innerHTML = '';

// Next thing we have to do is build two divs to hold our stuff
var mapContainer = document.createElement('div'); // build the map div
mapContainer.style.height = '600px'; // set the map height
mapContainer.style.width = '850px'; // set the map width
mapContainer.style.border = '2px';

var controlContainer = document.createElement('div'); // build the control div
controlContainer.style.width = '450px'; // set the control width

// Now we have to add these divs to the content div in the document body
contentDiv.appendChild(mapContainer);
//contentDiv.appendChild(controlContainer); //not needed as the contents will be displayed elsewhere on the page

tDiv.appendChild(controlContainer); //add it to a different DIV of the BODY of HTML

// We're ready to build our map...
map = new google.maps.Map2(mapContainer);

// ...and add a couple of controls.
// map.addControl(new google.maps.LargeMapControl()); // Add a small map control
//map.addControl(new google.maps.MapTypeControl()); // Add the map type control


var customUI = map.getDefaultUI();
customUI.controls.scalecontrol = true;
map.setUI(customUI);


// We'll wait to the end to actually initialize the map
// So let's build the search control
var searchControl = new google.search.SearchControl();

// Initialize a LocalSearch instance
searcher = new google.search.LocalSearch(); // create the object
searcher.setCenterPoint(map); // bind the searcher to the map

// Create a SearcherOptions object to ensure we can see all results
var options = new google.search.SearcherOptions(); // create the object
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

// Add the searcher to the SearchControl
searchControl.addSearcher(searcher , options);

// And second, we need is a search complete callback!
searchControl.setSearchCompleteCallback(searcher , function() {
map.clearOverlays();
var results = searcher.results; // Grab the results array
// We loop through to get the points
for (var i = 0; i < results.length; i++) {
var result = results[i]; // Get the specific result
var markerLatLng = new google.maps.LatLng(parseFloat(result.lat),
parseFloat(result.lng));
var marker = new google.maps.Marker(markerLatLng); // Create the marker

// Bind information for the infoWindow aka the map marker popup
marker.bindInfoWindow(result.html.cloneNode(true));
result.marker = marker; // bind the marker to the result
map.addOverlay(marker); // add the marker to the map


var image = 'blue-pin.png';
var markerw = new google.maps.Marker({
draggable: true,
position: (40.56995,-74.006989),
map: map,
icon: image,
title: "Current Location"
});

}

// Store where the map should be centered
var center = searcher.resultViewport.center;

// Calculate what the zoom level should be
var ne = new google.maps.LatLng(searcher.resultViewport.ne.lat,
searcher.resultViewport.ne.lng);
var sw = new google.maps.LatLng(searcher.resultViewport.sw.lat,
searcher.resultViewport.sw.lng);


var bounds = new google.maps.LatLngBounds(sw, ne);
var zoom = map.getBoundsZoomLevel(bounds, new google.maps.Size(450, 450));

// Set the new center of the map
// parseFloat converts the lat/lng from a string to a float, which is what
// the LatLng constructor takes.
map.setCenter(new google.maps.LatLng(parseFloat(center.lat),
parseFloat(center.lng)),
zoom);
});


// Check for geolocation support
if (navigator.geolocation) {
// Use method getCurrentPosition to get coordinates
navigator.geolocation.getCurrentPosition(function (position) {
// Access them accordingly


alert(position.coords.latitude + ", " + position.coords.longitude);

});
}






// Draw the control
searchControl.draw(controlContainer);



// Set the map's center point and finish!
map.setCenter(new google.maps.LatLng(40.56995 , -74.006989), 16);



// Execute an initial search
searchControl.execute('restaurant');
}

google.setOnLoadCallback(OnLoad);
</script>

</head>


<body style="font-family: Arial;border: 0 none;">
<table border=0 cellPadding=0 cellSpacing=0 onLoad="">
<tr>
<td vAlign=top><div id="content">Loading...</div></td>
<td><div id="textit">Loading...</div></td>
</tr>

<tr>
<td>CURRENT LOCATION</td>
</tr>
</table>
</body>
</html>

Two things with this script...
1st I would like to map to auto center on the user's current location and drop a custom marker on it.
2nd I would like the search querie to find nearby restaurant, lets say, from the current location.

As you can see I can get the current location but how would i incorporate it in the script to function properly?

Thanx



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum