The code at the link below displays fine in Google Chrome and IE9. It displays terrible in IE8. Any ideas for how to make it display correctly in IE8? I would like to keep it as a 3-column layout with a fixed middle column and the sides fluid/liquid/flexible and also fill the vertical space to 100% full height of the web browser.
http://jsfiddle.net/STVinMP/eZ7Nb/
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title here</title>
<style type="text/css">
.header {
display: table;
width: 100%;
height:100%;
text-align:center;
}
.header > div {
display: table-cell;
vertical-align:top;
}
.col {
width:20%;
}
#rightcol {
width:10%;
background-image:url('http://quetico.info/images/topo.png');
}
#leftcol {
width:10%;
background-image:url('http://quetico.info/left.jpg');
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
#midcol {
background:#d0eadd;
/* ffff8b; */
padding-top:55px;
}
</style>
</head>
<body>
<div class="header container">
<div id="leftcol" title="portage photo by Hans Solo"></div>
<div id="midcol" class="col col-2">
<div id="divLeftInd">some text here</div><!-- ######## end of divLeftInd ##### -->
</div><!-- ####### END OF DIV FOR midcol -->
<div id="rightcol"></div>
</div><!-- ####### END OF DIV FOR header container -->
</body>
</html>
i think that background-size not supported in ie 8
You can try with sizingMethod attribute of filter property as proposed in this answer
If I am clear on what your goal is I think this will work.
<html>
<body style="margin:0px; padding:0px;">
<div style="height:100%; width:100%; margin:0px; padding:0px; background-color:#333;">
<div style="width:80%; min-width:960px; margin-left:auto; margin-right:auto; background-color:#fff" height:100%;>
<p>info here</p>
</div>
</div>
</body>
</html>
Related
I made a simple page using html and ccs only, it contains two colored div blocks which isn't rendered on a page: there should be yellow and green div's appear on a page, but instead blank page.
I checked for an errors - browser shows no errors.
HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>
CSS:
.field {
background-color:yellow;
}
.key {
background-color: green;
}
They both in the same folder, name of files containing html and css are index.html and styles.css.
Add some padding or content
.field {
background-color:yellow;
padding:20px;
}
.key {
background-color: green;
padding:20px;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Keyboard Test</title>
</head>
<body>
<div class="field">test</div>
<div class="key" id="a key">test</div>
</body>
</html>
the divs are empty so their computed height is 0.
Use a min-height or add a character like a
Because they're empty.
<div class="field">text</div>
<div class="key" id="a key">text</div>
put something in them and youll see them
The divs are empty, ie they have no children and have no height assigned. If you add content to the divs, such as images or text or give them some sort of height property, you will see them.
You don`t have any dimensions.
Add them like this:
.field {
background-color:yellow;
height: 50px;
}
.key {
background-color: green;
height: 50px;
}
Div is a block element and when you use it it expect some content from you.
You can make the divs visible in following ways:
div{
min-height:27px;
}
.heights-a{
background-color:green;
}
.heights-b{
background-color:yellow;
}
.space-div{
background-color:orange;
}
.content-div{
background-color:white;
position:relative;
text-align:center;
}
.chakar{
border-radius:50%;
border:1px solid blue;
width:25px;
height:24px;
position:absolute;
left:44%;
top:0%
}
<!-- Using Space-->
<div class="space-div"> </div>
<!-- Using Content-->
<div class="content-div">
<div class="chakar">
</div>
</div>
<!-- Using Height-->
<div class="heights-a"></div>
<div class="content-div"> INDIA!!!</div>
I'm a new HTML5 coder. Please see the sceenshot below showing my issue
You can see the blue color drawed inside the circle in this picture.
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Tab Animation</title>
<link rel="stylesheet" href="index.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div style="width:100%; height:100%;">
<div style="width:100%; height:93%; background-color:gray">
<!--
<div style="width:100%; height:100%; background-color:orange"> </div>
<div style="width:100%; height:100%; background-color:blueviolet"> </div>
<div style="width:100%; height:100%; background-color:yellow"> </div>
-->
</div>
<div style="width:100%; height:7%; background-color:slateblue">
<div class="tabButton">
<div><p>Tab 1</p></div>
</div>
<div class="tabButton">
<div><p>Tab 2</p></div>
</div>
<div class="tabButton">
<div><p>Tab 3</p></div>
</div>
</div>
</div>
</body>
</html>
CSS file
body{
margin: 0;
padding: 0;
height: 100%;
}
body .tabButton {
width:33.33%;
height:100%;
background-color:pink;
float: left;
display:table;
}
body .tabButton div {
display:table-cell;
vertical-align: middle;
}
body .tabButton div p {
text-align:center;
width:100%;
}
How to solve this? Make sure clean tab size.
You actually specified yourself that the content is not to use 100% of the available with:
body .tabButton {
width:33.33%;
3 * 33.33% is 99.99%, which is not 100%. Try changing that to 33.34% and you will see that the gap is gone. See this jsfiddle to try it out yourself...
Salam (means Hello) :)
I'm trying to implement a 3 column layout for my web page using display:table & display:table-cell. It works fine in firefox and chrome, and I know that this feature should be supported in IE 9, but all I achieved so far is no more than this screenshot:
how can I get this to work in IE 8+ ?
here is my complete code:
(JS Fiddle available)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
margin:0;
padding:0;
}
.container{
display:table;
width:100%;
border-collapse:separate;
}
.col{
display:table-cell;
}
.side-1{
width:200px;
background: #efefef;
}
.side-2{
width:200px;
background: #f8f8f8;
}
.content{
}
#header,#footer{
height:40px;
background: #e4f3fd;
}
</style>
</head>
<body>
<div id="header">header</div>
<div class="container">
<div class="col side-1">
sidebar 1
<br>.<br>.<br>.
</div>
<div class="col side-2">
sidebar 2
<br>.<br>.<br>.
</div>
<div class="col content">
content
<br>.<br>.<br>.
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The problem is that IE doesn't render the page as it's latest version, adding a X-UA-Compatible meta tag lets us to choose which version of IE should render the page, setting it to the latest (edge) version solves the problem:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I am trying to create a photo gallery grid layout using floats (3 per row), the image thumbnails seem that they align nicely in Firefox and IE across the wrapper but on Chrome there's a 1 pixel margin to the right, is there any way to fix this behavior?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrap{
width:900px;
background:red;
margin:0 auto;
overflow:hidden;
}
.wrap div{
float:left;
width:295px;
height:200px;
background:#333;
margin-bottom:5px;
margin-right:0.469em;
overflow:hidden;
}
.wrap div:nth-child(3n+3){ /* wont work in IE8 */
margin-right:0;
}
.clear:before, .clear:after{ content:""; display:table; }
.clear:after{ clear:both; }
</style>
</head>
<body>
<div class="wrap clear">
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
</div>
</body>
</html>
Does not occur in latest version of Chrome (currently 23.0.1271.64 m - Windows), was possibly a rounding bug.
Sorry if I can't explain with code, I'm newbie with CSS. How can I do this?:
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIV issue</title>
</head>
<body>
<div id="div1">
<img src="image-800x216.gif" />
</div>
<div id="div2">
<img src="image-567x43.gif" />
</div>
</body>
</html>
Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?
http://jsfiddle.net/XTkA2/30/
#div1 {
position: absolute;
top: 38%;
right: 1em;
width: 62%;
max-width: 50em;
outline:#999 solid 1px;
}
#div2 {
position: absolute;
bottom: 0.63em;
right: 1em;
width: 46%;
max-width: 35.44em;
outline:#999 solid 1px;
}
I've added outline for you to make divs visible. You may delete them.
Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?
If you want to align elements in page, try this:
/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
float: left;
margin: 0 auto;
}
/* One images at right, another at left */
div.div1
{
float: left;
}
div.div2
{
float: right;
}
Page bottom alignment is not possible...i guess.
Put you can use margin-top css property to do the trick.
Hope it helps.
After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIVs alignment issue</title>
<style type="text/css">
#div1 {
width:62%;
min-width:16em;
max-width:50em;
right:1em;
top:38%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
#div2 {
width:46%;
min-width:10em;
max-width:35.44em;
right:1em;
bottom:6%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
.stretch {
width:100%;
height:auto;
min-width:10em;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://placekitten.com/800/216" class="stretch" />
</div>
<div id="div2">
<img src="http://placekitten.com/567/43" class="stretch" />
</div>
</body>
</html>
By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.
You can check the result here. (Thanks to ted)