This CSS arrow works fine in chrome but breaks in IE. What's the best way to figure out how to make it work in IE9?
<html>
<head>
<style>
.nav {
padding: 0;
width: 115px;
}
.box {
width: 100px;
height: 50px;
background-color: green;
float: left;
padding: 0;
}
.arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid green;
float: right;
padding: 0;
}
</style>
</head>
<body>
<div>
<div class="nav">
<div class="box"></div>
<div class="arrow-right"></div>
</div>
</body>
</html>
Maybe because you don't have a DOCTYPE and IE renders it in quirks mode.
<!DOCTYPE html>
Related
This question already has answers here:
inline-block element with no text renders differently
(4 answers)
Closed 6 years ago.
<html>
<head>
<style>
.nav
{
height: 45px;
}
.btn-return
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
.btn-menu
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nav">
return
</div>
</body>
</html>
<html>
<head>
<style>
.nav
{
height: 45px;
}
.btn-return
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
.btn-menu
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nav">
return
problem
</div>
</body>
</html>
the html code is all same except there are some characters between . I want to kown why the result is not same when there are some characters
between .it's so stranger!,i think for a long time ,but i can't find the reason.
do you want to display buttons in one row?
try this to Put buttons in one row
<html>
<head>
<style>
.nav
{
height: 45px;
}
.btn-return
{
display: inline;
width: 43px;
height: 100%;
border: 1px solid red;
}
.btn-menu
{
display: inline;
width: 43px;
height: 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nav">
return
</div>
</body>
</html>
Simple code.jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<div class="navTitle">1</div>
<div class="subNav subNav1">test1</div>
<div class="subNav subNav2">test2</div>
<div class="subNav subNav3">test3</div>
<div class="subNav subNav4">test4</div>
</div>
</div>
<div class="container">
</div>
<div class="left">
<div class="leftEles leftEle1"></div>
<div class="leftEles leftEle2"></div>
<div class="leftEles leftEle3"></div>
<div class="leftEles leftEle4"></div>
<div class="leftEles leftEle5"></div>
</div>
<div class="footer">
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
And CSS.
body{
overflow: hidden;
font-size: 20px;
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 50px;
background-color: #0092C7;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 50px;
width: 200px;
bottom: 0;
border-right: 1px solid #C0C0C0;
}
.container{
position: absolute;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
}
.leftEles{
width: 100%;
height: 50px;
background-color: #F4F3DE;
border-bottom: 1px solid #C0C0C0;
cursor: pointer;
}
.leftEles:hover{
opacity: 0.7;
}
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
}
.navTitle{
border-left: 1px solid #C0C0C0;
}
.subNav{
border-bottom: 1px solid #C0C0C0;
background-color: rgba(0,146,199,0.7);
cursor: pointer;
}
.subNav:hover{
color: #FFFFFF;
}
I'm curious why the hover and cursor effect on .subNav won't work!
Simple and silly question. Help me, many thx!
Your effect was not working because of .container is overlapping .header
Use z-index css on .header:
z-index: 2;
Complete css of .header
.header{
width: 100%;
height: 50px;
z-index:2;
background-color: #0092C7;
position: relative;
}
UPDATED DEMO
.container is positioned over navigation, has higher natural z-index (in code is after navigation).
To place navigation over container, set to navigation position: relative (only positioned elements (excluding position: static;) works with z-index) and higher z-index than 1.
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
position: relative;
z-index: 2
}
http://jsfiddle.net/4b2d0fyv/3/
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap
I'm in the process of teaching myself HTML again (the last time I did this stuff, people were still using tables) and running into some issues. I'm trying to figure out why the div known as "inset" is not showing up. Inside the pink box should be a black box but that isn't showing up. What's missing?
Below are the HTML file and CSS.
HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Project banner -->
<div id="projectbanner"> Banner
</div>
<!-- Project data -->
<div id="projectdata">Data</div>
<!-- Summary section -->
<div id="summary">Some stuff</div>
<!-- Project body -->
<div id="projectbody">
<div id="inset">More stuff</div>
</div>
<!-- Footer -->
<div id="footer">This is the Footer</div>
</div>
<!-- End Wrapper -->
</body>
</html>
css
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 1050px;
}
#projectbanner {
color: #333;
background: #E7E7E7;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 750px;
height: 310px;
float: left;
}
#projectdata {
color: #333;
background: #888888;
margin: 0px 0px 0px 0px;
width: 300px;
height: 510px;
float: right;
}
#summary {
color: #333;
background: #666666;
margin: 0px 0px 0px 0px;
width: 750px;
height: 200px;
float: left;
}
#projectbody {
width: 1050px;
color: #333;
border: 0px solid #ccc;
background: #F2BBE6;
margin: 0px 0px 0px 0px;
height: 850px;
}
#inset {
width: 800px;
color: #fff;
border: 0px solid #ccc;
background: #000000;
margin: 0px 0px 0px 0px;
height: 350px;
}
#footer {
color: #333;
width: 1050px;
border: 0px solid #ccc;
background: #BDBB8C;
margin: 0px 0px 0px 0px;
padding: 0px;
}
You are floating the earlier elements in the page flow. When you float an element, it doesn't add height to its containing element, that's why the #projectbody div ends up behind the earlier div's on the page. You can fix it by adding clear: both to the #projectbody div.
#projectbody {
width: 1050px;
color: #333;
border: 0px solid #ccc;
background: #F2BBE6;
margin: 0px 0px 0px 0px;
height: 850px;
clear: both;
}
Here's a jsFiddle
Take the projectbody div above the summery. float works near the element before it.
<div id="projectbody">
<div id="inset">
More stuff
</div>
</div>
<!-- Summary section -->
<div id="summary">
Some stuff
</div>
See example
I have a container div and 2 div's that should be the same height. #Sidebar div goes on the left where as #Content div should be to the right
whenever I add something to Sidebar it pushes down the content Div and am kind of stumped
<!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"><!-- InstanceBegin template="/Templates/2009_07.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>View Applicants</title>
<style type ="text/css">
li
{
display:inline;
background-color: #c5e8cf;
}
a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}
a.side { border-bottom: 2px solid black;
background-color: #e3e7ec;
}
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
display:inline-block;
font-size: 20px;
background-color: #e3e7ec;
border-bottom: 2px solid black;
padding-bottom: 20px;
}
label.side:hover { background-color: #dde504;}
div#header {
position: float;
background-image: url("../images/header.jpg");
background-repeat: no-repeat;
border-bottom: solid 1px #999999;
height: 97px;
Width: 1000px;
margin-left: 114px;
margin-top: 10px;
background-size: 100%;
}
div#menu {
position: float;
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-left: 115px;
padding-top:5px;
background-color: #e3f6ea;
}
#menu-content {
margin: auto;
width:100%;
background-color: #c5e8cf;
}
div#container{
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
}
div#footer { position: relative;
border: solid 2px #999999;
width: 996px;
height: 50px;
background-color: #FFFFFF;
margin-left: 115px;
}
#body { background-color: #6b86a3;}
</style>
</head>
<body id = "body" >
<div id="header"> </div>
<div id = "menu">
<div id="menu-content">
<ul>
<li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>
<li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>
</li>
<li><a class="menu" href="../images/header.jpg">View Applicants</a></li>
</ul>
</div>
</div>
<div id="container" >
<div id="sidebar">
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
</div>
<div id="content">
</div>
</div>
<div id ="footer"> </div>
</body>
</html>
slightly new to css. Thank you
This would be more common of what you want to achieve:
CSS
#container {
border: solid 1px #999999;
border-top: none;
width: 998px;
margin-top: 3px;
margin-left: 115px;
}
#sidebar {
float: left;
width: 131px;
border: 2px solid #999999;
}
#content {
float: left;
width: 131px;
border-left: 1px solid #999999;
}
.floatClear {
clear: both;
}
HTML
<html>
<head>
<title>Page</title>
</head>
<body>
<div id="container">
<div id="sidebar">
Text
</div>
<div id="content">
Text
</div>
<div class="floatClear"></div>
</div>
</body>
</html>
What practically happens here is you line up two left floating <div>'s and use a float: clear; to rule out that block-type <div>'s wrap to a newline. They will only wrap upon each other if both their widths (including padding/margin/border(left/right)) will be a bigger sum than the #container it's width.
By adding more margin-left to the #content CSS you can put it anywhere you want, as long as there is space to contain it together with the #sidebar div.
Little Extra
To avoid the classical styling where padding/border make the width of your <div> even wider, you can use the newer box-sizing feature, where all padding and border width will be pushed to the inside, instead of making the box bigger than you specified in your CSS stylesheet:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
Demo Fiddle
float: top; is wrong;
float can be only left or right;
add float:right; to your sidebar and float:left; to your container
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
float:right;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
float:left;
}
Learn Css
The max-height CSS Property should do the job.
set the max-height for both #Sidebar and #Content with equal value.
and you can add the overflow:scroll if you are expecting any of them to grow height than the max-height.