CSS layout min-height and flexbox not support on IE 11

CSS layout min-height and flexbox not support on IE 11 - html

I've asked this once here: Content DIV minheight not working in IE 11 and footer is too low
but the solution is not ok because the left-side and right-side content cannot set width 70% : 30%
I use CSS minheight on div-content but it's not working in Internet Explorer version 11 (but other browser is fine.) IE-11 can set height but it will not auto-vertical stretch when the div has excess text. So I need to use min-height.
Screenshots:
IE: https://s21.postimg.org/p31mpj4zb/11111.png
Chrome: https://s18.postimg.org/mjdo260ft/22222.png
html,
body {
margin: 0px;
padding: 0px;
}
body {
background: #cceeff;
font-family: "verdana";
}
#wrapper {
margin: auto;
padding: 0px;
width: 75%;
}
.toptext {
margin-top: 1vh;
margin-bottom: 1vh;
}
.toptext span a {
padding: 3px;
color: #000;
text-decoration: none;
background: lightblue;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 18vh;
float: left;
background: #99d6ff;
}
#header h1 {
margin: 0px;
padding: 0px;
/*border-bottom:1px solid #eee;*/
font-size: 20px;
padding-bottom: 10px;
}
#nav {
margin: 0px;
padding: 0px;
width: 100%;
float: left;
background: #80ffe5;
}
#nav ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ol li {
display: block;
padding: 6px 10px;
float: left;
position: relative;
}
#nav ol a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
#nav ol a:hover {
background: #f2f2f2;
}
#nav ol ol {
position: absolute;
top: 35px;
left: 0px;
display: none;
background: #80ffe5;
}
#nav ol ol li {
border-bottom: 1px;
}
#content {
float: left;
margin-top: 2vh;
padding: 0px;
width: 100%;
display: flex;
min-height: 70vh;
word-break: break-all;
}
#right-side {
float: left;
margin-left: 2vh;
width: 30%;
border: solid 1px grey;
background: white;
}
#right-side ol {
list-style: none;
}
#left-side {
float: left;
width: 70%;
border: solid 1px grey;
background: white;
}
#footer {
float: left;
margin-top: 2vh;
padding: 2vh;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #99d6ff;
}
.searchbox {
background: #9999ff;
margin: 10px;
margin-top: 20px;
padding: 5px;
border-radius: 5px;
}
.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 230;
position: relative;
}
.search-bar .searchbutton {
position: absolute;
top: 23%;
right: 5px;
}
.sfield {
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><p>Header</p></h1>
</div>
<div id="nav">
<ol>
<li>Home
</li>
<li>About us
<ol>
<li>ประวัติ
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Product
<ol>
<li>xxxxx
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Contact us
</li>
</ol>
</div>
<div id="content">
<div id="left-side">
aaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open( 'search');?>
<h4 style="text-align:center;"> ค้นหาสินค้า </h4>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>

OK It's something like bug.
so I add min-height to left-side and right-side too.(child div) and it work -_-"

Related

How can i place 2 divs next to eachother

I try to put 2 divs next to eachother but somehow it places them under eachother.
I have looked it up on this forum and copied the css code for it but it still wont work, i think it has something to do with my php code i use in it.
<html>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<p><img src="img/handboeklogo.png"></p>
<ul>
<li>Home</li>
<li>Checklist
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
</ul>
</li>
<li>Handboek
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<li>Classificatielijst<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<form class='logout' method='POST' action=''>
<button type='submit' name='logoutSubmit'>Logout</button>
</form>
</nav>
</header>
<br><br>
<div id='maindiv'><div id='first'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='commentSubmit'> Comment </button>
</form></div>
<div id='second'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='Generalcommentsubmit'> Comment </button>
</form></div></div>
</body>
</html>
CSS code:
body {
background-color: #edf0f2;
}
textarea {
display: inline-block;
width: 630px;
height: 120px;
background-color: #fff;
border-color: #5bb112;
margin-top: 10px;
margin-left: 15px;
position: relative;
resize: none;
}
.Changelog {
margin-left: 15px;
width: 800px;
}
.logout {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 680px;
}
.login {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 330px;
}
/*
button {
width: 100px;
height: 30px;
background-color: #5bb112;
border: none;
color: #e2e2e2;
font-family: arial;
font-weight: 400;
cursor: pointer;
margin-bottom: 19px;
margin-left: 15px;
margin-top: 3px;
}
.comment-box {
width: 630px;
padding-top: 5px;
margin-bottom: 4px;
background-color: #fff;
border-radius: 1px;
position: absolute;
border: 1px solid #5bb112;
margin-top: 8px;
align-content: left;
}
.comment-box p {
font-family: arial;
font-size: 14px;
line-height: 16px;
color: #282828;
font-weight: 100;
margin-bottom: 10px;
margin-left: 5px;
}
.edit-form {
position: absolute;
top: 3px;
right: 3px;
}
.edit-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.edit-form button:hover {
opacity: 1;
}
.delete-form {
position: absolute;
top: 3px;
right: 58px;
}
.delete-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.delete-form button:hover {
opacity: 1;
}*/
* {
margin: 0;
padding: 0;
}
header nav {
width: 100%;
height: 80px;
background-color: #343131;
}
header nav p {
font-family: arial;
color: #b3b3b3;
font-size: 24px;
line-height: 55px;
float: left;
padding: 10px 20px;
}
header nav ul {
float: left;
z-index: 2;
}
header nav ul li {
float: left;
list-style: none;
position: relative;
margin-top: 15px;
margin-right: auto;
margin-left: 30px;
}
header nav ul li a {
display: block;
font-family: arial;
color: #b3b3b3;
font-size: 20px;
padding: 21px 14px;
text-decoration: none;
}
header nav ul li ul {
display: none;
position: absolute;
background-color: #343131;
border-radius: 0px 0px 4px 4px;
padding: 8px;
}
header nav ul li:hover ul {
display: block;
}
header nav ul li ul li {
width: 180px;
border-radius: 4px;
}
header nav ul li ul li a {
padding: 9px 14px;
}
header nav ul li ul li a:hover {
background-color: #343131;
}
header nav p img {
width: 210px;
height: 55px;
margin-top: 5px;
margin-bottom: 5px;
}
header nav ul li a:hover {opacity: 1}
header nav ul li a {
background-color: #343131;
border: none;
color: white;
opacity: 0.6;
transition: 0.3s;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 10px;
margin-bottom: 3px;
}
/*-------Changelog---------*/
#maindiv {
display: flex;
width: auto;
border: 1px solid black;
overflow: hidden;
}
#first {
width: auto;
float:left;
}
#second {
float: left;
}
I would like to place the divs next to eachother so i get 2 comment sections next to eachother.

To place 2 divs near eachother wrap them in another div and set display to 'flex'
<div id="maindiv'>
<div id='first'>
//content here
</div>
<div id='second'>
//content here
</div>
</div>
in css
#maindiv {
display: flex;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
#first {
width: 300px;
}
#second {
}

From your current code I could just guess that problem is with display, try this
#maindiv {
display: inline-block;
width: 500px;
border: 1px solid black;
overflow: hidden;
}

You can use display:inline-block as div element display is set to block by default
.parent {
background: red;
height: 50px;
width: 50px;
margin: 10px;
display: inline-block
}
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>

#first, #second, #maindiv{
display: inline-block;
}
#maindiv {
width: 500px;
}
#first {
width: 300px;
}
<div id='maindiv'>
<div id='first'>first</div>
<div id='second'>second</div>
</div>

How to place content below a position absolute item

I'm not sure how to ask this questions but I will try my best to explain what I'm trying to accomplish.I have a banner on my homepage and inside this banner I have a div that is overlapping it.
Now, by overlapping this item over the banner It creates a problem where all other content on my homepage is going behind this overlapped item.. Example: my footer (which is marked in red) is going behind this overlapped item and I want to stop this from happening, I want all contents to go below it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #444;
font-size: 13px;
background-color: #fafafa;
font-family: Arial, sans-serif;
}
.container {
height: auto;
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
secion {
width: 100%;
height: auto;
background-color: #fff;
}
header {
width: 100%;
height: 168px;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16);
}
.top-nav {
width: 100%;
height: 42px;
background-color: white;
}
.top-nav ul {
float: left;
line-height: 42px;
list-style-type: none;
}
.top-nav ul li {
display: inline-block;
}
.top-nav ul li a, a:visited {
color: #444;
padding: 42px 12px;
text-decoration: none;
}
.top-nav ul li a:hover {
background-color: #fafafa;
}
.center-console {
width: 100%;
height: 80px;
background-color: #f4f4f4;
}
header nav {
width: 100%;
height: 46px;
background-color: #fff;
}
header nav ul {
float: left;
line-height: 46px;
list-style-type: none;
}
header nav ul li {
margin: 0;
display: inline-block;
}
header nav ul li a, a:visited {
color: #444;
padding: 46px 12px;
text-decoration: none;
color: rgba(0,0,0,.54);
}
header nav ul li a:hover {
color: #15c;
background-color: #fff;
box-shadow: 0 4px 8px 0 #dcdcdc;
}
.logo {
float: left;
width: 200px;
height: 50px;
margin-top: 15px;
background-color: #fff;
}
.center-console form {
float: right;
width: 400px;
height: 40px;
padding: 0 15px;
margin-top: 20px;
border-radius: 3px;
background-color: #fff;
}
.search-icon-small {
width: 18px;
height: 19px;
float: right;
margin-top: 11px;
background-repeat: no-repeat;
background-image: url("../images/search-icon-small.png");
}
header form input[type=text] {
border: 0;
width: 342px;
height: 40px;
outline: none;
background-color: #fff;
}
.shopping-cart {
width: 38px;
height: 32px;
float: right;
margin-top: 7px;
font-size: 25px;
background-repeat: no-repeat;
background-image: url("../images/shopping-cart.png");
background-position:bottom;
}
.item-count {
color: #fff;
width: 18px;
height: 18px;
float: right;
font-size: 10px;
line-height: 19px;
font-weight: bold;
border-radius: 50%;
text-align: center;
background-color: #4683ea;
}
/*** Homepage ***/
.banner {
width: 100%;
height: 480px;
background-color: #4387fd;
}
.banner form {
width: 880px;
height: 50px;
margin: 0 auto;
padding: 0 15px;
margin-top: 228px;
border-radius: 3px;
background-color: #fff;
}
.search-icon {
width: 30px;
height: 30px;
float: right;
margin-top: 10px;
background-repeat: no-repeat;
background-image: url("../images/search-icon.png");
}
.banner form input[type=text] {
border: 0;
width: 805px;
height: 50px;
outline: none;
background-color: #fff;
}
.featured-items {
width: 1200px;
height: 358px;
padding: 21px;
margin-top: 100px;
border-radius: 6px;
position: absolute;
overflow: hidden;
background-color: #fff;
}
.featured-items ul {
list-style-type: none;
}
.featured-items ul li {
float: left;
width: 214px;
height: 214px;
margin-right: 22px;
background-color: #f5f5f5;
}
.featured-items ul li:last-child {
margin: 0;
float: right;
}
footer {
width: 100%;
height: 400px;
margin-top: 80px;
overflow: hidden;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>BasicOffer</title>
<link rel="stylesheet" type="text/css"href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="top-nav">
<div class="container">
<ul>
<li>Selling</li>
<li>Help</li>
</ul>
<ul style="float:right;">
<li>Account</li>
</ul>
</div>
</nav>
<div class="center-console">
<div class="container">
<div class="logo"></div>
<form>
<input type="text" placeholder="Search..">
<div class="search-icon-small"></div>
</form>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>Health & Beauty</li>
<li>Household Supplies</li>
<li>Baby & Toddler</li>
<li>Home & Garden</li>
<li>Electronics</li>
<li>Pet Supplies</li>
</ul>
<div class="shopping-cart">
<div class="item-count">11</div>
</div>
</div>
</nav>
</header>
<div class="banner">
<div class="container">
<form>
<input type="text" placeholder="What are you looking for?">
<div class="search-icon"></div>
</form>
<div class="featured-items">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<footer>This will be the footer</footer>
</body>
</html>
Design:
Thanks,
Richard.

Instead of using absolute position. you can try
margin-top: -150px;
position: relative;
working example

It's unclear why absolute positioning is needed in this example, but I recommend you look into using position: relative for the content block that follows the banner.
Relative positioning behaves mostly like the default (static) when it comes to layout flow, but it supports the z-index layering like absolute positioning. (Considering using relative position also on the banner if you don't really need it to be absolutely positioned.)

Content DIV minheight not working in IE 11 and footer is too low

I build simple template web from scratch. I use css minheight on div-content but it's not working in Internet Explorer version 11 (but other browser is fine.) and footer is too low. How should I do to make it work correctly with IE browser?
screenshots:
IE: https://s21.postimg.org/p31mpj4zb/11111.png
Chrome: https://s18.postimg.org/mjdo260ft/22222.png
html,
body {
margin: 0px;
padding: 0px;
}
body {
background: #cceeff;
font-family: "verdana";
}
#wrapper {
margin: auto;
padding: 0px;
width: 75%;
}
.toptext {
margin-top: 1vh;
margin-bottom: 1vh;
}
.toptext span a {
padding: 3px;
color: #000;
text-decoration: none;
background: lightblue;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 18vh;
float: left;
background: #99d6ff;
}
#header h1 {
margin: 0px;
padding: 0px;
/*border-bottom:1px solid #eee;*/
font-size: 20px;
padding-bottom: 10px;
}
#nav {
margin: 0px;
padding: 0px;
width: 100%;
float: left;
background: #80ffe5;
}
#nav ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ol li {
display: block;
padding: 6px 10px;
float: left;
position: relative;
}
#nav ol a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
#nav ol a:hover {
background: #f2f2f2;
}
#nav ol ol {
position: absolute;
top: 35px;
left: 0px;
display: none;
background: #80ffe5;
}
#nav ol ol li {
border-bottom: 1px;
}
#content {
float: left;
margin-top: 2vh;
padding: 0px;
width: 100%;
display: flex;
min-height: 70vh;
word-break: break-all;
}
#right-side {
float: left;
margin-left: 2vh;
width: 30%;
border: solid 1px grey;
background: white;
}
#right-side ol {
list-style: none;
}
#left-side {
float: left;
width: 70%;
border: solid 1px grey;
background: white;
}
#footer {
float: left;
margin-top: 2vh;
padding: 2vh;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #99d6ff;
}
.searchbox {
background: #9999ff;
margin: 10px;
margin-top: 20px;
padding: 5px;
border-radius: 5px;
}
.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 230;
position: relative;
}
.search-bar .searchbutton {
position: absolute;
top: 23%;
right: 5px;
}
.sfield {
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><p>Header</p></h1>
</div>
<div id="nav">
<ol>
<li>Home
</li>
<li>About us
<ol>
<li>ประวัติ
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Product
<ol>
<li>xxxxx
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Contact us
</li>
</ol>
</div>
<div id="content">
<div id="left-side">
aaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open( 'search');?>
<h4 style="text-align:center;"> ค้นหาสินค้า </h4>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>

Use modified css
html,
body {
margin: 0px;
padding: 0px;
}
body {
background: #cceeff;
font-family: "verdana";
}
*{overflow:auto;}
#wrapper {
margin: auto;
padding: 0px;
width: 75%;
}
.toptext {
margin-top: 1vh;
margin-bottom: 1vh;
}
.toptext span a {
padding: 3px;
color: #000;
text-decoration: none;
background: lightblue;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 18vh;
float: left;
background: #99d6ff;
}
#header h1 {
margin: 0px;
padding: 0px;
/*border-bottom:1px solid #eee;*/
font-size: 20px;
padding-bottom: 10px;
}
#nav {
margin: 0px;
padding: 0px;
height: 4vh;
width: 100%;
float: left;
background: #80ffe5;
}
#nav ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ol li {
display: block;
padding: 6px 10px;
float: left;
position: relative;
}
#nav ol a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
#nav ol a:hover {
background: #f2f2f2;
}
#nav ol ol {
position: absolute;
top: 35px;
left: 0px;
display: none;
background: #80ffe5;
}
#nav ol ol li {
border-bottom: 1px;
}
#content {
float: left;
margin-top: 2vh;
padding: 0px;
width: 100%;
display: flex;
height: 65vh;
word-break: break-all;
}
#right-side {
float: left;
margin-left: 2vh;
width: 30%;
border: solid 1px grey;
background: white;
}
#right-side ol {
list-style: none;
}
#left-side {
float: left;
width: 70%;
border: solid 1px grey;
background: white;
}
#footer {
float: left;
margin-top: 2vh;
padding: 2vh;
height: 9vh;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #99d6ff;
}
.searchbox {
background: #9999ff;
margin: 10px;
margin-top: 20px;
padding: 5px;
border-radius: 5px;
}
.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 230;
position: relative;
}
.search-bar .searchbutton {
position: absolute;
top: 23%;
right: 5px;
}
.sfield {
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><p>Header</p></h1>
</div>
<div id="nav">
<ol>
<li>Home
</li>
<li>About us
<ol>
<li>???????
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Product
<ol>
<li>xxxxx
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Contact us
</li>
</ol>
</div>
<div id="content">
<div id="left-side">
aaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open( 'search');?>
<h4 style="text-align:center;"> ??????????? </h4>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>

Link controls not working

I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>

You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}

you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}

Remove top and bottom body margins

In order to practise CSS I've decided to create Google-like page. My problem is no matter what I do, there's always that little extra space on top and on bottom of body even though body has margins and padding of 0. HTML tag for some reason works well with the same styles.
HTML code:
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>
CSS code:
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}

The anwser is simple. add margin:0px; to your #topBar ul. Here you have a working fiddle

This is a simple way you just put margin padding on top see the code.
*{
padding: 0px;
margin: 0px;
}
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>

What you see is the padding of the <ul> in the topbar. This happens because many HTML elements have their own default style. Also, these defaults are browser specific, which doesn't really help you if you want to create a layout that is pixel-precise against multiple browsers.
What I mostly to is simply reset all paddings and margins of all elements:
* {
margin: 0;
padding: 0;
}
Some will say that the above technique leads to heavier load of the rendering engine but I never had any issue by doing this. Anyway, you can find a lot of 'CSS reset' scripts that are more selective and are faster. Search other questions on SO tagged css-reset and also check this Q/A
Some popular CSS-reset sources:
http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

CSS layout min-height and flexbox not support on IE 11 - html

OK It's something like bug. so I add min-height to left-side and right-side too.(child div) and it work -_-"

Related

How can i place 2 divs next to eachother

How to place content below a position absolute item

Content DIV minheight not working in IE 11 and footer is too low

Link controls not working

Remove top and bottom body margins

Categories

Resources