Hi I got an issue with my page where I have used Flex and height:x% to achieve a very botched but working responsive height for two divs within a container.
The problem I have is that it works fine in FF but not Chrome. (Assume IE, edge etc) doesn't either.
Here is what it looks like in FF: http://prntscr.com/a712g6 (this is what it should be)
Here it is in Chrome: http://prntscr.com/a712q4
Below is the code: (excuse the mess its a hacked up copy and paste of source code)
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
</div>
<div class="logged_container">
You are Logged in as <span style='font-weight:bold;'>Ryan</span> (<a href='logoff.php'>Log Out</a>)
</div>
<div class="navigation_container">
<a href="main.php">
<img src="img/test.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Home
</a>
</div>
<div class='content'>
<div class='contentTableView' style="flex: 1; flex-direction: column; min-height:100%; height: 100%; position: relative;">
<span class="contentHeader">Title</span>
<div id="map" class="map" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:20px; border:1px solid #0a639d;"></div>
<div id="controls" class="controls" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:10%; border:1px solid rgb(204, 204, 204); background-image: url('img/bms47.png');"></div>
</div>
</div>
<div class="footer">
Footer Text
</div>
</div>
</body>
</html>
Anyone got any suggestions?
EDIT: ATTACHED CSS
http://pastebin.com/59rcgQwM
EDIT2: Issue Example
jsfiddle.net/vctbszc2/3 – Adam Buchanan Smith
Related
I am trying to build a website and I am making a collection of images that I want to be in a row with a margin of around 20 pixels (the images are in a div that is repeated for however many images there are). When I run the code the images appear in an weird configuration in that they seem to be layered. When I add 'img' to the div class the images then appear in a column which is not what I want. I have created a very simple website example with three repeated images that I want to be in a row. In previous websites I have been able to make the images appear in a row (the way I want it to be), but now this simply will not work. I will provide my code. Any help would be appreciated :).
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Updated correct CSS:
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 50px;
}
.image img {
width:100%;
height: 100%; *addition made by myself*
UPDATE
When I run the edited code and add 6 images the images do not resize. Is there a fix to this issue?
UPDATE Adding height: 100%; seems to have solved the issue. I will update the question to layout all steps in solving the problem.
Just add .image img {width:100%;}
so that the images will cover their entire parent div and won't be overlapped
.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.image img {
width:100%;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
Hello check if is ok ?
.image img{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}
.heading{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>
<div class="heading">
<h1>Test</h1>
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>
</body>
</html>
My css isn't being applied to a specific img id element on page. I have spent about 30 minutes trying to figure this thing out to no avail. I have 2 other elements with the exact same html and css being applied correctly. Image in question: http://i.imgur.com/Lrtucyo.gif The other two images are just like that one as far as i can tell.
body{
font-family: 'Montserrat', sans-serif;
background: url(/img/body_bg.jpg);
color:#ddd;
font-weight: 700;
font size: 30px;
}
.container{
margin: 0 auto;
}
#blue{
height:8px;
background-color: #4eb1ba;
margin-bottom: 45px;
}
#img{
border-bottom: 2px solid #4eb1ba;
}
/*BOTTLE*/
}
#spray{
border: 1px solid #4eb1ba;
}
/*/BOTTLE*/
/*Vacuum*/
#vacuum{
border: 1px solid #4eb1ba;
margin-left: 400px;
margin-top: -130px;
}
/*Vacuum*/
/*MOP*/
#mop{
border: 1px solid #4eb1ba;
margin-left: 630px;
margin-top: -130px;
}
#portfolio{
margin-top:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Get In Touch</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row-fluid">
<h4 class="underline"><span>Recent images</span></h4>
<img src="img/clean-home1.jpg" width="960" height="540" alt="">
<div id="portfolio">
<div class="row-fluid">
<div class="span4">
<img src="img/bottle.gif" id="spray" width="180" height="130">
</div>
<div class="row-fluid">
<div class="span4">
<img src="img/vacuum.gif" id="vacuum" width="180" height="130"></img>
</div>
<div class="row-fluid">
<div class="span3">
<img src="img/mop.gif" id="mop" width="180" height="130" ></img>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You have a random closing brace before the #spray{} rule. Not sure if that is the problem, but maybe.
As I saw your codes, you don't have any element with id img in your HTML codes. I think you likely want to apply this CSS rule for all img elements, if so, replace your #img with img in your CSS style
Replace
#img {
border-bottom: 2px solid #4eb1ba;
}
with
img {
border-bottom: 2px solid #4eb1ba;
}
I would like to use a scrollbar on a div using the property overflow:auto and setting overflow:hidden on the body. It works well with Chrome but not with Firefox and IE.
Can anyone explain me why there is 2 different behavior with this code?
<html lang="en" class="fillScreen" dir="ltr"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="template4.css" type="text/css">
<style>
.fillScreen {
bottom:0px;
height:100%;
}
html, body {
margin: 0; padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body class="fillScreen">
<div class="fillScreen" style="display:table;width:100%">
<div class="fillScreen" style="display:table-row">
<div style="border: solid 2px red;overflow:auto;display:table-cell;overflow:auto" class="fillScreen" >
<div class="fillScreen" style="display:table;width:100%;overflow:auto">
<div class="fillScreen" style="border: solid 1px blue;" style="display:table-row">
<div class="fillScreen" style="display:table-cell">
<div class="fillScreen" style="position:relative">
<button width="142px" height="20px" style="position:absolute;top:99px;left:20px;">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It is possible to test it here http://jsfiddle.net/nMSvv/2/
Scrollbar apears in Chrome when resizing the window.
I add, that I absolutely need to display the button with absolute position and need to keep this structure of div
Thank you for any help
Solution is here : http://jsfiddle.net/nMSvv/3/
I needed to wrap the div where I want a scrollbar with :
<div class="fillScreen" style="position:relative;overflow:auto">
<div style="position:absolute;top:0px;left:0px">
</div>
</div>
i'm coding a website for some friends where i'm using ddsmoothmenu for dropdowns.. BUT now it there's a weird spacing between the header and top of the body, and it only appears on some pages.. It is very weird, and when checking it out through chromes developer options, i simple cannot find the reason for this spacing. BTW, i'm using 960 gs. The header gradient is body background image.
EDIT
I now know WHAT the problem is. Everything in the head tag gets moved into body, on the pages with weird spacing. I have no idea why or how.
No weird spacing, exactly as it should be.
http://i.imgur.com/5cL7W.jpg
Weird spacing!
http://i.imgur.com/7Gldl.png
Here is the rendered source of one of the pages without the error:
<!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>
<link rel="icon" type="image/png" href="img/favicon.ico" />
<title>Armilla - Forside</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=960">
<!--////////////////////
//Imports - JS and CSS//
/////////////////////-->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel='stylesheet' id='style-css' href='css/diapo.css' type='text/css' media='all'>
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu-v.css" />
<script type='text/javascript' src='js/jquery.min.js'></script>
<!--[if !IE]><!--><script type='text/javascript' src='js/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/diapo.js'></script>
<script type='text/javascript' src='js/ddsmoothmenu.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--///////
//Init JS//
////////-->
<script>
ddsmoothmenu.init({
mainmenuid: "menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
});
</script>
</head>
<body>
<div id="header" class="container_12">
<div id="logo" class="grid_5">
<a href="index.php">
<img src="img/logo.png" width="226" height="65"/>
</a>
</div>
<div id="nav" class="grid_7">
<div id="menu" class="ddsmoothmenu">
<ul>
<li id="prodli"><img src="img/produkter.png"/>
<ul style="z-index: 1;">
<li>Armb�nd</li><li>Overlevelsesudstyr</li> </ul>
</li>
<li><img src="img/armilla.png"/></li>
<li><img src="img/nyheder.png"/></li>
<li><a id="lasta" href="?p=contact"><img src="img/kontakt.png"/></a></li>
</ul>
<br style="clear: left" />
</div>
</div>
</div>
<section>
<div style="overflow:hidden; width:960px; margin: auto auto; padding:0 20px;">
<div class="pix_diapo">
<div data-thumb="img/thumbs/megamind_07.jpg">
<img src="img/slides/megamind_07.jpg">
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ccc; text-transform:uppercase">
Armilla
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
Verdensklasses overlevelsesudstyr.Tjek vores nye produkter ud
</div>
</div>
<div data-thumb="img/thumbs/wall-e.jpg" data-time="7000">
<img src="img/slides/wall-e.jpg">
<div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">
You can also get the same effect as the caption with:
</div>
<div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
A button
</div>
<div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
Or two buttons
</div>
<div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(img/demo/arrow_caption.png) no-repeat 230px 30px">
Or any other html element...<br>
and you can decide the transition time of any slide
</div>
</div>
<div data-thumb="img/thumbs/up-official-trailer-fake.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="img/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">
You can also display videos, but it requires a "fake image"... read the documentation please
</div>
</div>
</div><!-- #pix_diapo -->
</div>
</section>
<script>
$(function(){
$(".pix_diapo").diapo();
});
</script>
<div id="footer" class="container_12">
<div style="text-align:center; color:#333333;" id="copyright" class="grid_12">
<p>Copyright 2012 © - Armilla.dk - Alle rettigheder forbeholdt Armilla - Kontrolpanel - Log ud <br />Webdesign af DoWEB</p>
</div>
</div>
</body>
</html>
It might be an white-space issue, where your html, css looks good on paper (in chrome developer), but isn't interpreted as it should be. To detect, if this is really the case, I would uglify my html and strip all whitespace in the html problem area.
If it turns out to be true, here are various approaches to this topic, even though most of 'em have small drawbacks (long uglified html lines, unnecessary comments, uncommon line breaks, ..).
After converting my index.php to UTF-8 Without BOM the whitespace issue dissappeared. So i'm a happy camper now! :D
I found this post about the same problem appearing in Wordpress when using Notepad++.
http://wordpress.org/support/topic/head-scriptslinks-showing-up-inside-body-tag
So I'm having this piece of code that do horizontal scroll and I have a view helper that write videojs video element on to the php file. When I try to scrub the video, it will just play from the start again, the pause and fullscreen button works, but the volume adjust when clicked will mute the sound, which is kinda like the same behavior as the progress bar-going straight to zero. Why? It works if it's not in this horizontal scrolling element.
<?PHP
include("test/viewHelpers.php");?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src='http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js'></script>
<script src="js/video.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS">
<script type="text/javascript">VideoJS.setupAllWhenReady();</script>
<style>
#container{width: 640px; height:360px; overflow:hidden; border:5px solid yellow;}
#content{width: 2200px;background-color: blue;position:relative;left:0px;}
.section{background-color: lightblue; width:640px; float: left; }
</style>
<script type="text/javascript">
$(function(){
$("#container").scrollTo($('#2'), 4000);
}
);
</script>
<title>Videojs Test</title>
</head>
<body>
<div id="container">
<div id="content">
<div class="section" id="1" style="width: 620px; height: 360px; left:0px">section one</div>
<div class="section" id="2" style="background-color:red; width: 620px; height: 360px; left: 640px">
<?php echo view_video_helper("video1-1") ?>
</div>
<div class="section" id="3" style="width: 620px; height: 360px; left: 1280px; background-color:green;">section three</div>
</div>
</div>
</body>
</html>
Try the new version of video.js and see if it makes any difference.