Results 1 to 3 of 3

Thread: Table cells are not filled in correctly.

  1. #1
    Join Date
    Aug 2014

    Table cells are not filled in correctly.

    The HTML below almost works. But in order to see the "status" div I had to use height=95% which produced the pink at the top and really does not make sense.

    Also, the container panes do not fill to the bottom of the cell. In order to see their bottom I added the 70% but that's not the right way to do it either.

    I'd sure like to know the correct way to fix this code!

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <title>Bing Map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
        <script type="text/javascript">
            var map = null;
            var directionsManager;
            var panes = new Array();
            function Initialize() {
                var mapOptions = {
                    credentials: "key here ",
                    center: new Microsoft.Maps.Location(43.101329, -75.230907),
                    mapTypeId: Microsoft.Maps.MapTypeId.road
                map = new Microsoft.Maps.Map(document.getElementById("divMap"), mapOptions);
                setupPanes("container1", "tab1");
            function setupPanes(containerId, defaultTabId) {
                panes[containerId] = new Array();
                var maxHeight = 0;
                var maxWidth = 0;
                var container = document.getElementById(containerId);
                var paneContainer = container.getElementsByTagName("div")[0];
                var paneList = paneContainer.childNodes;
                for (var i = 0; i < paneList.length; i++) {
                    var pane = paneList[i];
                    if (pane.nodeType != 1) continue;
                    panes[containerId][pane.id] = pane;
                    pane.style.display = "none";
            function showPane(paneId, activeTab) {
                for (var con in panes) {
                    activeTab.className = "tab-active";
                    if (panes[con][paneId] != null) {
                        var pane = document.getElementById(paneId);
                        pane.style.display = "block";
                        var container = document.getElementById(con);
                        var tabs = container.getElementsByTagName("ul")[0];
                        var tabList = tabs.getElementsByTagName("a")
                        for (var i = 0; i < tabList.length; i++) {
                            var tab = tabList[i];
                            if (tab != activeTab) tab.className = "tab-disabled";
                        for (var i in panes[con]) {
                            var pane = panes[con][i];
                            if (pane == undefined) continue;
                            if (pane.id == paneId) continue;
                            pane.style.display = "none"
                return false;
            function setVisibility(id, visibility) {
                document.getElementById(id).style.display = visibility;
            function ShowDrivingRouteFromTxt() {
                document.getElementById("status").innerHTML = "Display driving route"
            function AddWayPoint(add) {
                if (document.getElementById(add).value) {
                    var text = document.getElementById(add).value;
                    var waypoint = new Microsoft.Maps.Directions.Waypoint({
                        address: text
            function createDrivingRoute(mode) {
                if (!directionsManager) {
                    directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
                    avoidTraffic: true,
                    routeMode: mode,
                    routeOptimization: Microsoft.Maps.Directions.RouteOptimization.shortestDistance
                    itineraryContainer: document.getElementById('directionsItinerary')
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            .tabs {
                width: 300px;
                margin: 0px;
                padding: 0px;
                .tabs li {
                    margin: 0px;
                    padding: 0px;
                .tabs a:hover {
                    margin: 0px;
                    text-decoration: none;
                .tabs a.tab-active {
                    margin: 0px;
                    padding: 0px;
                    background-color: White;
                .tabs a {
                    font-weight: bold;
                    margin: 0px;
                    padding: 0px;
                    color: Black;
            .tab-container {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                border: blue solid 2px;
                background-color: lightcyan;
            .tab-panes {
                margin: 0px;
                padding: 0px;
                height: 70%;
                width: 322px;
                position: relative;
                background-color: lightcyan;
                overflow: auto;
            td.container > div {
                width: 100%;
                height: 100%;
                overflow: hidden;
            td.container {
                height: 20px;
    <body style="background-color:red;" onload="Initialize();">
        <table style="margin:0; padding:0; height:100%; width:100%; ">
            <tr style="margin:0; padding:0; height:100%; width:100% ">
                <td id="Explorer" style="background-color:yellow;margin:0; padding:0; height:100%;width:330px; ">
                    <div class="tab-container" id="container1">
                        <ul class="tabs">
                            <li><a href="#" onclick="return showPane('pane1', this)" id="tab1">Tab 1</a></li>
                            <li><a href="#" onclick="return showPane('pane2', this)">Tab 2</a></li>
                            <li><a href="#" onclick="return showPane('pane3', this)">Tab 3</a></li>
                            <li><a href="#" onclick="return showPane('pane4', this)">Tab 4</a></li>
                            <li><a href="#" onclick="return showPane('pane5', this)">TRAVEL DIRECTIONS</a></li>
                            <li><a href="#" onclick="return showPane('pane6', this)">Tab 6</a></li>
                            <li><a href="#" onclick="return showPane('pane7', this)">Tab 7</a></li>
                        <br />
                        <div class="tab-panes">
                            <div id="pane1">
                                PANE 1
                            <div id="pane2">
                                PANE 2
                            <div id="pane3">
                                PANE 3
                            <div id="pane4">
                                PANE 4
                            <div id="pane5">
                                <div style="height: 25px; ">
                                    TRAVEL DIRECTIONS
                                <div style="height: 100%;  ">
                                    <input id="txtTravelDirections0" style="width: 298px" type="text" value="1 main st, Chicago,ill" />
                                    <br />
                                    <input id="txtTravelDirections1" style="width: 298px" type="text" value="1 e erie st, Chicago,ill" />
                                    <br />
                                    <input class="ButtonAction" type="button" value="Show Driving Route" style="width: 300px" onclick="ShowDrivingRouteFromTxt();" />
                                    <br />
                                    <div id='directionsItinerary' style="background-color:lightcyan;position: relative; ">
                            <div id="pane6">
                                PANE 6
                            <div id="pane7">
                                PANE 7
                <td style="background-color:pink;  height:100%;    ">
                    <div id='divOutterMap' style="background-color:green; top:0px; height:95%; width:100%;  ">
                        <div id='divMap' style=" height: 100%;  width:100%; position: relative;">
                        <div id="status" style=" background-color:gray;   height: 25px;  width:100%">
    Last edited by jedaisoul; 08-28-2014 at 01:14 AM. Reason: code tags added

  2. #2
    Join Date
    Aug 2014
    I should have said that I normally display (a much bigger file) using vs2013 and a webBrowser control.

    But I get the same if I simply open the html file in vs2013.

    Also,I click TRAVEL DIRECTIONS and then Show Driving Route.

  3. #3
    Join Date
    Mar 2007
    This is more of a CSS problem than a JavaScript problem, try asking in the CSS forums for help.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Recent Articles