Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE compatible script validation

    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

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Last edited by Kor; 07-27-2011 at 04:26 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    SiKni8 (07-27-2011)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    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

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Code:
    *{
    margin:0;
    padding:0;
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <!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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •