Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Robert Harm | 01/14/12 at 2:22pm Edit

(5) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

• 
  Last edited:
  01/14/12
  2:28pm
  Luis Cordova says:

  for the first proble
  
  1. on several templates (like twenty eleven - see first map on http://30.mapsmarker.com/?p=4 for an example), the map width is smaller than the panel with, although panel and map div have the same size in pixel. If you look at this example: http://31.mapsmarker.com/?p=1 where I use another template, the map and panel width is exactly the same.
  
  basically the inner div is following the constraint imposed by the outer width
  
  however the header where titles and social icons reside is hard coded to be of a fixed width
  
  solution is either to relax that constraint on the div that encloses the icons and title by overriding the css there

  • 01/14/12 2:29pm
    
    Luis Cordova says:

    the second problem is similar, it all comes because of the fix hard constraint, the div will not expand and there is overflow

• 
  Last edited:
  01/14/12
  2:30pm
  Ivaylo Draganov says:

  Hello,
  
  1) The toolbar and map <div>s have the same width(640px), but there's a 5px padding on the toolbar <div>. That makes the width of the toolbar actually 650px (width + left & rigt padding).
  
  You should correct the script that generates those properties. Or you can use 'box-sizing: padding-box;" in the CSS, but that's not supported in IE 7 and below (and probably other old versions of browsers).

  • 01/14/12 2:36pm
    
    Ivaylo Draganov says:

    2) It's better to use positioning rather than floats if you want to stick the icons to the top right corner of the panel. Something like this:
    
    

    
    
    #panel_top_5941526a {
    
        position: relative; /* relatively position the toolbar panel */
    
    }
    
    
    
    /* Styles to use on the element that contains the icons (you should give it a class) */
    
    span {
    
        position: absolute;
    
        right: 5px;
    
        top: 5px;
    
    }
    
    

    
    
    These are purely CSS issues and they've little to do with WP itself. Maybe the template's CSS is somehow interfering with your CSS. Give your elements classes and inspect them with Firebug to see what's wrong.

• 
  Last edited:
  01/14/12
  3:18pm
  Fahd Murtaza says:

  So I think the best solution would be creating the unique IDs for every div container and generate the CSS based on that. A more strict approach towards XHTML node naming and respective CSS would solve the issue.
• 
  Last edited:
  01/14/12
  4:05pm
  Julio Potier says:

  Hello
  I also suggest to use CSS classes instead of inline STYLE.
• 
  Last edited:
  01/15/12
  4:12pm
  Jermaine Oppong says:

  Hello there,
  
  The first problem is due to the extra padding on the element as Ivaylo stated. The second issue is due to the fact that you are working with elements that have display:inline as a default css property, with the span wrapping the icons floated to the right.
  
  My advice to solve both problems is to remove the padding from the #panel_top_... wrapper and apply it to the contents instead. This means replacing the span tags in the panel with divs and setting the larger width+padding to the text and a smaller width to the icons. So something like this:
  
  

  
  
        <div class="map_panel" id="panel_top_8e6e162d">
  
               <div class="panel_desc">Panel Description should go here</div>
  
               <div class="panel_icons">panel icons</div>
  
        </div><!--map_panel div-->
  
  

  
  
  
  and in the css having:
  
  

  
  
  
  
  .map_panel{
  
          background: #efefef;
  
          border:1px solid #ccc;
  
          position:relative;
  
          width:640px;
  
  }
  
  
  
  .panel_desc{
  
         padding:5px;
  
         width: 510px;
  
  }
  
  
  
  .panel_icons{
  
         position:absolute;
  
         right:5px;
  
         top:5px;
  
  }
  
  
  
  
  
  

  
  
  Its also good to set the css styling for the maps in a seperate stylesheet to allow users to easily change the styling of the panel and map container to their liking.
  
  My next advice in this is a tweak suggestion on how the result is outputted onto the page. This will make it a bit easier in the future to make amendments and does not seperate the panel from the map itself:
  
  

  
  
  <div class="maps_marker" id="maps_marker_{A dynamically generated id for each instance}">
  
  
  
        <div class="map_panel" id="panel_top_8e6e162d">
  
               <div class="panel_desc">Panel Description should go here</div>
  
               <div class="panel_icons">panel icons</div>
  
        </div><!--maps_panel div-->
  
  
  
        <div class=" leaflet-container leaflet-fade-anim">
  
               Actual Map is outputted here 
  
        </div><!-- map_output -->
  
  
  
  </div><!--maps marker div to wrap panel and map together-->
  
  

  
  
  then in the css you can have:
  
  

  
  
  .maps_marker{
  
          width:640px;
  
  }
  
  .map_panel{
  
          background: #efefef;
  
          border:1px solid #ccc;
  
          position:relative;
  
  }
  
  
  
  .panel_desc{
  
         padding:5px;
  
         width: 510px;
  
  }
  
  
  
  .panel_icons{
  
         position:absolute;
  
         right:5px;
  
         top:5px;
  
  }
  
  

  
  
  Setting the divs wrapping the panel and the map together with a width will cause its immediate children to inherit that same width.
  
  Hope this helps.

This question has expired.

Julio Potier, Francisco Javier Carazo Gil, Robert Harm voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.