Here's my problem. It looks perfect in Firefox, Safari, IE8, but in IE7 and IE8 comparability mode, it adds about 4000px of width to the div.team elements nested within the list item. the problem goes away if i remove the span.score elements.
The image attached shows the score in the first box in white number text. The top image is the way it's supposed to look. The bottom is IE7.
I've been trying to figure this out for hours. I even tried making the list a bunch of divs in case it was a weird IE7 list item bug, but I got the exact same results.
Here's my html:
<ul class="selected" data-league="ncaaf">
<li>
<div class="time">THU 12:30PM</div>
<div class="teams">
<div class="team">AUB (21) <span class="score">10</span></div>
<div class="team">MSST <span class="score">22</span></div>
</div>
</li>
...
Here's my CSS:
.boxList ul {
float:left;
margin:0 0 0 0;
heigth:40px;
width:5000px;
clear:left;
display:none;
}
.boxList ul.selected {
display:block;
}
.boxList li {
float:left;
height:40px;
padding:0 5px;
min-width:56px;
background:url(../images/scoreSchedBoxTile.png) repeat-x;
border:1px solid #000;
list-style-type:none;
margin:0;
font-size:9px;
line-height:13px;
font-weight:bold;
cursor:pointer;
position:relative;
}
.boxList li .time {
text-align:center;
}
.boxList li .teams {
}
.boxList li .team {
text-align:left;
color:#000;
clear:left;
line-height:13px;
height:13px;
}
.boxList li .score {
font-weight:bold;
text-align:right;
color:#fff;
float:right;
display:block;
}
try using:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The width on your divs is set to 100%, so the div is stretching to 100% width and filling all available horizontal space. You can fix this by applying a fixed width to your divs.
Related
So I was wondering If there was a way to put a page counter in Onsen,
by that I mean the little three dots that you at the bottom of your iphone when scrolling through pages
Im using something similar to this ->
http://codepen.io/negibouze/pen/jEvOYz
enter code here
So i want it that the three dots float at the bottom of my screen to indicate that the user can swipe left or right, and dots change as I scroll, so if Im on the second page, the second dot is bigger than the rest
If you're using <ons-carousel> as in the template, just add an id to the carousel and add an postchange event listener (on the initialization of the page where the carousel is) where you can change the sizes of the dots.
Also change the content of the <ons-carousel-cover> tag to a list containing images of dots or something similar.
Example Javascript:
<script>
ons.bootstrap();
document.addEventListener("init",function(event){
if(event.target="#id_of_ons_page_containing_carousel"){
$('#id_of_carousel').on("postchange", function(){
var index=document.querySelector('#id_of_carousel').getActiveIndex();
$('#dot0').height(10);
$('#dot1').height(10);
$('#dot2').height(10);
$('#dot'+index).height(15);
});
}
});
</script>
In this case the <ons-carousel-cover> has the following content:
<ons-carousel-cover><div class="cover-label center">
<ul>
<li><div>
<img id="dot0" height="15" src="White_dot.png" alt="" />
</div></li>
<li><div>
<img id="dot1" height="10" src="White_dot.png" alt="" />
</div></li>
<li><div>
<img id="dot2" height="10" src="White_dot.png" alt="" />
</div></li>
</ul>
</div></ons-carousel-cover>
In order for the dots to appear in one line add the following css:
ul {
list-style: none;
padding-left: 0;
}
ul li{
display: inline;
min-height: 40px;
}
ul li div{
display: table-cell;
vertical-align: middle;
height: 40px;
line-height: 40px;
}
I started a question about a bootstrap leaflet map not displaying on mobile devices How can I fix bootstrap leaflet map mobile display?
Since then I have used a simple mapbox template for a map and with invalidateSize() as outlined here https://www.mapbox.com/help/why-map-cropped-hidden-shown/
But still no luck getting the map to display on a mobile phone.
Can anyone assist me with the proper implementation of invalidateSize()?
Thanks
Barry
There is a single div element:
<div id='map' class='blue'></div>
and this is the script:
<script>
L.mapbox.accessToken = 'mytoken';
var map = L.map('map').setView([10.5063,-61.4079], 10);
map.attributionControl.setPrefix('© Copyright 2015. hellO!');
L.control.locate().addTo(map);
L.control.layers(
{'Streets': L.mapbox.tileLayer('url').addTo(map)},
{
'Drive Times': L.mapbox.tileLayer('url'),
'Outlets': L.mapbox.tileLayer('url')
}
).addTo(map);
//attempt to force resize on mobile devices
$('map').show();
map.invalidateSize();
this is all the css:
<style>
.menu-ui {background:#fff; position:absolute; bottom:10px;right:10px; left:10px; z-index:1; border-radius:3px; width:auto; height:inherit; border:1px solid rgba(0,0,0,0.4);}
.menu-ui a { font-size:11px; color:#404040; display: inline-block; margin:0;padding:0; padding:10px; text-decoration:none; border-right: 2pt inset; border-right-color:0.5px solid rgba(0,0,0,0.25); text-align: left;}
.menu-ui a:first-child { border-radius:3px 3px 0 0; }
.menu-ui a:last-child { border:none; border-radius:0 0 3px 3px; }
.menu-ui a:hover { background:#f8f8f8; color:#404040; }
.menu-ui a.active { background:#3887BE; color:#FFF; }
.menu-ui a.active:hover { background:#3074a4; }
.menu-ui a.inactive { background:#FFF; color:#3887BE; }
.leaflet-control-locate {border: 1px solid rgba(0,0,0,0.4);}
.leaflet-control-locate a {background-color: #fff;background-position: -3px, -2px;}
.leaflet-control-locate.active a {background-position: -33px -2px;}
.leaflet-popup-content { margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px;}
.leaflet-popup-content-wrapper {border-radius: 2px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
.leaflet-control-layers label { font-weight: normal; margin-bottom: 0px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
</style>
What does the styling look like on $('map')? I see your inline CSS, but is there anything else on it? Try giving it a size to be sure everything else is working first.
Also, if you are using any kind of CSS animation to resize the map container, you need to wait until after the animation is done, e.g.:
window.setTimeout(function() {
map.invalidateSize();
}, 1000);
Why not start out with the most basic map you can get and go from there. First check if the code posted below works, then change it to your token en mapid, test again, add the layercontrol, test again etc. Add one feature at a time and keep testing, you'll find out where it goes wrong then easily. That's at the moment hard to guess without your full code and a proper testcase on Plunker or JSfiddle or somewhere else where we could test it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40, -74.50], 9);
</script>
</body>
</html>
Taken from: https://www.mapbox.com/mapbox.js/example/v1.0.0/
the maps now work.
the issue was http/https. two things had to be changed.
1) the method of calling the tiles and associated php script initially, i used tileserver.php to call
'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'
now i'm using mbtiles-server.php to call
'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")
note: php script had to be in the same folder/directory as the mbtiles file. also, replace text in [] with your own
2) leaflet css/js was used only, no mapbox as the api uses a secure key
much thanks again #iH8 for the excellent work!
I am having a very strange layout issue with list-items generated using ng-repeat.
Plunker here
If you look at the view, you will see that the li in green (not generated using ng-repeat) goes to the next line because of the unexpected space. Also, if you change the width of li to 33%, you will see that the last li (Add User) is not aligned correctly.
I can work around this with some css tricks, but I want to understand why this is happening and if there is any way to avoid this. Has anyone encountered this before and figured out why this is happening?
Adding code below only because plunker link needs to be accompanied with some code
.users * {
box-sizing: border-box;
}
.users ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.users ul li {
width: 49%;
margin: 5px 1% 0 0;
padding: 0;
display: inline-block;
}
.users ul li.user {
background: yellow;
}
.users ul li.add-user {
background: lightgreen;
}
It's because you have a blank space (created by the carriage return) beetween the closing </li> and the <li class="add-user">
Write your html like this and the last li will be displayed correctly :
...
<li class="user" data-ng-repeat="user in vm.users track by $index">
<div>{{ user.name }}</div>
</li><li class="add-user">
<div>
<a>Add Child</a>
</div>
</li>
...
I am trying to align two divs horizontally. My list in the 2nd div is horizontally aligned, but the two divs fail to align horizontally as inline-blocks. Any help would be greatly appreciated.
Here is the CSS and HTML code:
CSS
#wrapper {
margin:0 auto;
width:100%;
position:relative;
}
.navit {
position:relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
display:inline;
}
.container-logo {
display:inline-block;
}
.container-user {
display:inline-block;
}
#user-nav-container ul li {
display:inline;
}
#user-nav-container ul li a {
background-color:#000000;
color:#FFF;
font-size:14px;
}
#user-nav-container ul {
list-style-type:none;
background-color:#000000;
}
HTML
<html>
<body>
<div id="wrapper">
<header id="top">
<div id="navbar" class="navit">
<div id="logo-container" class="container-logo"><a href="http://www.site.com/" id="logo">
<h1>ServiceMyResume.com</h1>
</a></div>
<div id="user-nav-container" class="container-user">
<ul>
<li>Site 1</li>
<li>Site 2</li>
</ul>
</div>
</div>
</header>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/8TfzJ/
Get rid of:
#user-nav-container ul li {
display:inline;
}
This is what is causing your nav elements to be horizontal instead of vertical.
http://jsfiddle.net/8TfzJ/1/
Update
To vertiacaly align the two elements add vertial-align top to them, see: http://jsfiddle.net/8TfzJ/2/.
Note in the fiddle I've added a border so you can see the elements are vertially aligned. You may need to adjust margins and padding of the contained elements to fully achieve what you are looking for. Use Firebug for Firefox to help you here. You can inpect an experiment with the CSS in the borwser.
In a modern browser you should see:
See this article for some inf on the drawbacks of inline-block and how to over come them:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, you shouldn't put block elements e.g. h1 inside inline elements e.g. a. It should be the other way around. Try validating it here: http://validator.w3.org/#validate_by_input+with_options
I know it is not as inline-blocks, but you you mean something like this JSFiddle?
#navbar:after
{
display: table;
content: "";
clear: both;
}
#logo-container,
#user-nav-container
{
float: left;
}
sorry I know similar questions have been asked but I still can't work it out. I want the images in the body to be centered but only when the aspect ratio means that there is white space on the right hand side, I have tried using margin: 0 auto but to no avail.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="landscape">
<img class="topslide" src="images/background/topslide.jpg"/>
<img class="middleslide" src="images/background/middleslide.jpg"/>
<img class="bottomslide" src="images/background/bottomslide.jpg"/>
</div>
<div id="portrait">
<img class="topslide" src="images/background/topslideland.jpg"/>
<img class="middleslide" src="images/background/middleslideland.jpg"/>
<img class="bottomslide" src="images/background/bottomslideland.jpg"/>
</div>
</body>
And here is my css:
html{
margin:0 auto;
width:100%;
}
body{
margin:0px auto;
height: 100%;
width: 100%;
background: url(../image/background/background.jpg) ;
}
#media screen and (orientation:landscape) {
#landscape {display:block;}
#portrait {display:none;}
}
#media screen and (orientation:portrait) {
#landscape {display:none;}
#portrait {display:block;}
}
#landscape{
margin: 0 auto;
}
#portrait{
margin: 0 auto;
}
img.topslide{
display:block;
max-width:100vw;
height:33.3vh;
}
img.middleslide{
display:block;
max-width:100vw;
height:33.3vh;
}
img.bottomslide{
display:block;
max-width:100vw;
height:33.3vh;
}
I'll be grateful for any help, thanks.
It seems like you misunderstood what margin: 0 auto does. It doesn't center the contents of an element; it centers the element itself.
Give your #landscape and #portrait their own width, or apply margin: 0 auto to the images. Either you'll center the images or their containers. Or both, should you find it necessary.
An alternative approach to center the images would be to display your images as inline-block and apply text-align: center to their parents.