Browser zoom in changes my li width - css

When I zoom in from 100% to 90% or less, my li width changes from 229px to a larger value. Does anyone knows how to avoid.
It happens with Chrome and Firefox. IE9 - IE11 are fine
Your help or suggestion is appreciated.
<div class="product_section">
<ul class="list_product">
<li>
<a href="#">
<div class="product_frame" style="background-image: url(http://image.haier.com/pk/nv/consumer/refrigerator/tfnf/201208/P020121130740687231395.png);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd<br />dfdffd</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
<div class="product_name">
<p>dfddfdfd<br />dfdffd</p>
</div>
</a>
</li>
</ul>
</div>
.product_section {
display: inline-block;
margin: 15px;
width: 725px;
}
.product_frame {
display: inline-block;
margin: 0;
padding: 0;
width: 229px;
height: 229px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.product_name {
display: table;
vertical-align: middle;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
}
.product_name p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding: 10px;
}
ul.list_product {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
ul.list_product li {
display: inline-block;
margin: 8px;
width: 229px;
height: 329px;
float: left;
border: 1px solid #eeeeee;
border-radius: 5px;
position: relative;
}
ul.list_product li:nth-child(3n - 2) {
margin-left: 0;
}
ul.list_product li:nth-child(3n) {
margin-right: 0;
}
https://jsfiddle.net/pocnjpf9/1/
/ UPDATE /
After finished reading a previous post: Zoom changes the design layout
I have noticed that it's most likely caused by the border.
By applying box-sizing: border-box to the li fixes the problem.

Adding the following code of CSS will solve your problem.
*, *:before, *:after {
box-sizing: border-box;
}
Demo: https://jsfiddle.net/pocnjpf9/2/

Related

css flex - make gap between divs

When in a landscape mode, I need to separate/make a gap (around 10-20px) between the two columns without using a border or anything like that. I tried everything and it still doesn't work, what am i missing? I tried putting margins, but it doesn't help, what's the best way to solve this?
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
Just add something like gap: 5px to your container with flex layout
Thanks to #AbsoluteBeginner this feature is supported not everywhere. See here: https://caniuse.com/flexbox-gap
Add margin-right to the element if you want to stick to flexbox.
Otherwise - try out css grid, super easy with grid-gap to add the gap you need.
https://www.w3schools.com/css/css_grid.asp
You can add this CSS rule:
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
It adds a right marging to every odd .item-info (or more precisely: to every .item-info inside every odd direct child element of the .container element)
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>

Placing elemenents with css?

I want to place image floated left, next to image, floated left one under another would be Authro, Date and Category, than, after this other elements will be floated on right side...
Like this...
https://i.imgur.com/tcKwalP.png
This is what I have so far...
https://jsfiddle.net/fbn9r3y4/
This is html...
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<span class="entry-author">
Ester
</span>
<span class="entry-date">September 3, 2019</span>
<span class="entry-category-single">
Music
</span>
<span class="meta-right">
<span class="entry-views"><span class="view-count">998</span> Views</span>
<span class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em>Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</span>
</span>
</div>
This is css...
.entry-meta {
font-family: Arial, sans-serif;
display: block;
align-items: center;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image {
display: block;
float: left;
}
.entry-author {
display: block;
float: left;
width: 200px;
}
.entry-date {
display: block;
float: left;
width: 200px;
clear: left;
}
.entry-category-single {
display: block;
float: left;
width: 200px;
clear: left;
}
.meta-right {
margin: 0 10px 0 0;
margin-left: auto;
order: 2;
float: right;
}
.entry-like {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
.entry-views {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
I changed up your markup a little bit and added a wrapping meta-left around the content of the left side. I also simplified your CSS. There were several CSS properties that were invalid or not necessary.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-meta::after {
content: '';
clear: both;
display: block;
}
.meta-left {
float: left;
}
.meta-right {
float: right;
margin: 0 10px 0 0;
}
.entry-image {
float: left;
}
.meta-info {
float: left;
margin-left: 10px;
}
.entry-like {
min-width: 32px;
line-height: 1;
}
.entry-views {
min-width: 32px;
line-height: 1;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
Here's a version using display: flex that's even simpler. Same markup.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.meta-left {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.meta-info {
margin-left: 10px;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
Esteros. Please check this link
https://codepen.io/juricon/pen/QWLOZea
HTML:
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<ul class="left-float-list">
<ol>
<a href="" title="" rel="author">
Ester
</a>
</ol>
<ol>
September 3, 2019
</ol>
<ol>
<a href="">
Music
</a>
</ol>
</ul>
<ul class="right-float-list">
<li class="items-reverse">
<span class="entry-views">
<!--do not miss nesting rules <tag><tag1></tag1</tag> -->
998
</span>
<span class="view-count">
Views
</span>
</li>
<li>
<span class="entry-like">
<span class="sl-wrapper"> <!--do not miss nesting rules <tag><tag1></tag1</tag> Also, you don't have in CSS classes like .sl-wrapper .sl-button, .sl-count, sl-loader -->
<a href="" class="sl-button">
<span class="sl-count">
500<em>Likes</em>
</span>
<!-- it is a bad idea to use <em> with not cursive text in one <span>. Use CSS to style your text -->
</a>
<span class="sl-loader">
</span>
</span>
</span>
</li>
<li>
Whatever
</li>
</ul>
CSS:
*{ /*clear styles*/
margin:0;
padding:0;
/*clear styles*/
}
.entry-meta {
font-family: Arial, sans-serif;
display: block;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image{
float: left;
}
.left-float-list{
float: left;
width: 200px;
list-style:none;
background: green;
margin-left:.4em;
}
.right-float-list{
float: right;
list-style:none;
background: red;
margin-right:1em;
}
.entry-views, .entry-like {
min-width: 32px;
line-height: 1;
}
Esteros, here you will find a great web development free course https://www.freecodecamp.org/ and
https://www.w3schools.com/html/default.asp.
It will help you a lot. Good luck!
P.S.: Use Flexbox instead of "float" and you won't regret.

How to remove the Large White space at the bottom of my webpage?

I have this problem of having a huge white space at the bottom of my web page. I tried for many hours to fix the problem but I can't seem to find where I have gone wrong. Can anybody please help me with the problem? I have attached my code samples below...
Here's my code sample. (HTML)
<!DOCTYPE html>
<html>
<head>
<title>Web Page Exercise 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="UpperHeader"></div>
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div><p style="width: 100px;color: white;">Home</p></div>
</li>
<li>
<div><p style="width: 120px;color: white;">About Us</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Membership</p></div>
</li>
<li>
<div><p style="width: 100px;color: white">Search</p></div>
</li>
<li>
<div><p style="width: 150px;color: white">New Arrivals</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Staff</p></div>
</li>
</ul>
</div>
</div>
<div class="BackgroundPicture"></div>
<h3 style="position: relative;top: -610px; left: 10px;">Categories</h3>
<div class="SideNavagationBar1">
<UL TYPE="none">
<LI>OPAC Search</LI>
<LI>New Arrivals</LI>
<LI>How to Become a Member</LI>
<LI>Central Bank of Sri Lanka</LI>
<LI>e-Repository</LI>
<LI>Dictionary</LI>
<LI>Library Policies</LI>
<LI>University of Moratuwa</LI>
</UL>
</div>
<h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI><div style="text-decoration: none;">Access the available databases</div></LI>
<LI>Databases</LI>
<LI><div style="text-decoration: none;">Getting start with Research?</div></LI>
<LI>Research Papers</LI>
<LI><div style="text-decoration: none;">What is done already?</div></LI>
<LI>Thesis Dissertion</LI>
<LI><div style="text-decoration: none;">Help!!!</div></LI>
<LI>Library Guide</LI>
<LI><div style="text-decoration: none;">Turnitin</div></LI>
<LI>Turnitin</LI>
</UL>
</div>
</body>
</html>
And here's my CSS sample for the above HTML
.UpperHeader{
background-color: #808080;
width: 100%;
height: 160px;
}
.SliitLogo{
position: relative;
top: -150px;
left: 5px;
margin-right: 10px;
}
.Login{
position: absolute;
float: right;
right: 100px;
top: 40px;
font-size: 10px;
}
.Register{
position: absolute;
float: right;
right: 30px;
top: 40px;
font-size: 10px;
}
.SliitLibrary{
position: relative;
float:right;
right: 20px;
top: -200px;
color: white;
font-family: Lifetime;
}
#Space{
display:inline-block;
margin-left: 10px;
}
#UpperNavigationBar{
background-color: #333333;
position: relative;
top: -140px;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li{
display:block;
float:left;
position:relative;
top: -7px;
left: -20px;
color: white;
}
.SideNavagationBar1{
position: relative;
top: -600px;
font-size: 14px;
}
.SideNavagationBar1 li>a{
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2{
position: relative;
margin-left: 0;
top: -600px;
font-size: 14px;
border: 2px solid red;
}
.SideNavagationBar2 li>a{
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
.BackgroundPicture{
position: relative;
bottom: 0;
top: -130px;
background-color: #d3d3d3;
width: 100%;
min-height: 80vh;
}
The problem is I see a huge white space below the the web page. A huge one. Can anybody please help me???
.UpperHeader{
background-color: #808080;
width: 100%;
height: 160px;
}
.SliitLogo{
position: relative;
top: -150px;
left: 5px;
margin-right: 10px;
}
.Login{
position: absolute;
float: right;
right: 100px;
top: 40px;
font-size: 10px;
}
.Register{
position: absolute;
float: right;
right: 30px;
top: 40px;
font-size: 10px;
}
.SliitLibrary{
position: relative;
float:right;
right: 20px;
top: -200px;
color: white;
font-family: Lifetime;
}
#Space{
display:inline-block;
margin-left: 10px;
}
#UpperNavigationBar{
background-color: #333333;
position: relative;
top: -140px;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li{
display:block;
float:left;
position:relative;
top: -7px;
left: -20px;
color: white;
}
.SideNavagationBar1{
position: relative;
top: -600px;
font-size: 14px;
}
.SideNavagationBar1 li>a{
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2{
position: relative;
margin-left: 0;
top: -600px;
font-size: 14px;
border: 2px solid red;
}
.SideNavagationBar2 li>a{
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
.BackgroundPicture{
position: relative;
bottom: 0;
top: -130px;
background-color: #d3d3d3;
width: 100%;
min-height: 80vh;
}
<!-- IT No: IT17157124 -->
<!-- ID No: 952314017V -->
<!-- Name: Jananth Banuka Jayarathna -->
<!DOCTYPE html>
<html>
<head>
<title>Web Page Exercise 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="UpperHeader"></div>
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div><p style="width: 100px;color: white;">Home</p></div>
</li>
<li>
<div><p style="width: 120px;color: white;">About Us</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Membership</p></div>
</li>
<li>
<div><p style="width: 100px;color: white">Search</p></div>
</li>
<li>
<div><p style="width: 150px;color: white">New Arrivals</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Staff</p></div>
</li>
</ul>
</div>
</div>
<div class="BackgroundPicture"></div>
<h3 style="position: relative;top: -610px; left: 10px;">Categories</h3>
<div class="SideNavagationBar1">
<UL TYPE="none">
<LI>OPAC Search</LI>
<LI>New Arrivals</LI>
<LI>How to Become a Member</LI>
<LI>Central Bank of Sri Lanka</LI>
<LI>e-Repository</LI>
<LI>Dictionary</LI>
<LI>Library Policies</LI>
<LI>University of Moratuwa</LI>
</UL>
</div>
<h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI><div style="text-decoration: none;">Access the available databases</div></LI>
<LI>Databases</LI>
<LI><div style="text-decoration: none;">Getting start with Research?</div></LI>
<LI>Research Papers</LI>
<LI><div style="text-decoration: none;">What is done already?</div></LI>
<LI>Thesis Dissertion</LI>
<LI><div style="text-decoration: none;">Help!!!</div></LI>
<LI>Library Guide</LI>
<LI><div style="text-decoration: none;">Turnitin</div></LI>
<LI>Turnitin</LI>
</UL>
</div>
</body>
</html>
You should
avoid relative positioning if you really don't need it. Because relatively positioned elements occupy the same space as if they would be statically positioned (by default).
place elements in needed containers.
Demo:
body {
background-color: #d3d3d3;
margin: 0;
}
.UpperHeader {
background-color: #808080;
height: 160px;
padding-top: 20px;
padding-bottom: 20px;
}
.SliitLogo {
margin-right: 10px;
}
.Login {
float: right;
font-size: 10px;
}
.Register {
float: right;
font-size: 10px;
}
.SliitLibrary {
color: white;
font-family: Lifetime;
}
#Space {
display: inline-block;
margin-left: 10px;
}
#UpperNavigationBar {
background-color: #333333;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li {
display: block;
float: left;
color: white;
}
.SideNavagationBar1 {
font-size: 14px;
}
.SideNavagationBar1 li>a {
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2 {
border: 2px solid red;
}
.SideNavagationBar2 li>a {
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
<div class="UpperHeader">
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 100px;color: white;">Home</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 120px;color: white;">About Us</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 145px;color: white">Membership</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 100px;color: white">Search</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 150px;color: white">New Arrivals</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 145px;color: white">Staff</p>
</a>
</div>
</li>
</ul>
</div>
</div>
<h3>Categories</h3>
<div class="SideNavagationBar1">
<div>OPAC Search</div>
<div>New Arrivals</div>
<div>How to Become a Member</div>
<div>Central Bank of Sri Lanka</div>
<div>e-Repository</div>
<div>Dictionary</div>
<div>Library Policies</div>
<div>University of Moratuwa</div>
<h3>E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI>
<div style="text-decoration: none;color: black;">Find the Journals</div>
</LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI>
<div style="text-decoration: none;">Access the available databases</div>
</LI>
<LI>Databases</LI>
<LI>
<div style="text-decoration: none;">Getting start with Research?</div>
</LI>
<LI>Research Papers</LI>
<LI>
<div style="text-decoration: none;">What is done already?</div>
</LI>
<LI>Thesis Dissertion</LI>
<LI>
<div style="text-decoration: none;">Help!!!</div>
</LI>
<LI>Library Guide</LI>
<LI>
<div style="text-decoration: none;">Turnitin</div>
</LI>
<LI>Turnitin</LI>
</UL>
</div>
Don't know if it helps, but when you use some relative positioning, keep in mind that the original place of the DOM element keeps.
In your CSS you have many element that have relative position with negative values, so, white space is the "ghost" of the orignal places of these elements.

Internet Explorer - CSS style is applied only after refresh

I'm quite new in web development. I encoutered a problem which is present only in the Internet Explorer - the CSS style of Main Menu is applied after refresh(just F5, not CTRL-F5). I used MVC .NET to make backend of site. I have no idea how to solve this problem.
The web site with this problem is:
http://jakubkowalczykart.com/
Thank you in advance.
#Edit: Cope snippet which reproduces problem. While opening in Chrome or Firefox it looks good, but in IE it doesn't
Style:
.main_menu {
min-height: 40px;
z-index: 10;
height: 8vh;
position: fixed;
top: 0;
width: 100%;
opacity: 0.90;
background: black;
}
.menu_image {
height:100%;
}
.menu_list {
margin: 0 auto;
height: 70%;
list-style-type: none;
overflow: hidden;
}
.menu_container {
display: flex;
align-items: center;
height: 100%;
}
.menu_list {
margin-right: 3vw ;
height: 70%;
list-style-type: none;
overflow: hidden;
}
.menu_list li {
height: 100%;
float: left;
}
Html:
<html>
<head>
</head>
<body id="body">
<div class="main_menu" id="main_menu">
<div class="logo">
<div id="logo_img" ></div>
</div>
<div class="menu_container">
<ul class="menu_list">
<li>
<a href="#">
<img id="first_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallportfoliobutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="second_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallshopbutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="third_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallaboutbutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="fourth_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallcontactbutton.png" />
</a>
</li>
</ul>
</div>
<div class="main_container" id="main_container">
</div>
<div class="footer">
</div>
</body>
</html>

CSS extend background

.page {
background: none;
width: 1000px;
margin: 0 auto;
text-align: left;
padding: 0px 0px 0px 0px;
}
.header-container {
background-image: url("http://patolino.com/img/fundo-top.jpg");
width: 100%;
height: 133px;
}
.header{
padding:0px 0px 0px 0px;
width: 1000px;
position: fixed;
}
.header .logo { float:left;
margin-top:15px;
width: 30%;
}
.header h1.logo {
float:left;
width: 30%;
padding: 0;
}
.nav-container {background: url(http://www.patolino.com/img/bg-menu.jpg) repeat;
width: 1000px;
height: 43px;
left: 0;
padding: 0px 0px 0px 0px;
}
.header .welcome-msg {
}
.header .form-search {
top-margin: 15px;
}
.header .links {
}
div.slidercontrolwr {
top: 30px;
}
.quick-access{
height: 133px;
}
http://imageshack.us/photo/my-images/46/screenshot20130209at818.png/
http://img145.imageshack.us/img145/3022/screenshot20130209at817.png
But basically:
<div class="page">
<div class="header-container">
<div class="header">
<h1 class="logo"><strong>Carol Baby</strong><img src="http://carolbaby.com.br/skin/frontend/base/default/logo.png" alt="Carol Baby"></h1>
<div class="quick-access">
<p class="welcome-msg">Seja bem vindo! </p>
<form id="search_mini_form" action="http://carolbaby.com.br/catalogsearch/result/" method="get">
<div class="form-search">
<label for="search">Buscar:</label>
<input id="search" type="text" name="q" value="" class="input-text" autocomplete="off">
<button type="submit" title="Buscar" class="button"><span><span>Buscar</span></span></button>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Procure na loja inteira aqui...');
searchForm.initAutocomplete('http://carolbaby.com.br/catalogsearch/ajax/suggest/', 'search_autocomplete');
//]]>
</script>
</div>
</form>
<ul class="links">
<li class="first">Minha Conta</li>
<li>Minha Lista de Desejos</li>
<li>Meu Carrinho</li>
<li>Fechar Compra</li>
<li class=" last">Entrar</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul id="nav">
<li class="level0 nav-1 level-top first">
<a href="http://carolbaby.com.br/bercos.html" class="level-top">
<span>Berços</span>
</a>
</li><li class="level0 nav-2 level-top">
<a href="http://carolbaby.com.br/roupeiros.html" class="level-top">
<span>Roupeiros</span>
</a>
</li><li class="level0 nav-3 level-top">
<a href="http://carolbaby.com.br/comodas.html" class="level-top">
<span>Cômodas</span>
</a>
</li><li class="level0 nav-4 level-top">
<a href="http://carolbaby.com.br/linhas-completas.html" class="level-top">
<span>Dormitórios Completos</span>
</a>
</li><li class="level0 nav-5 level-top last">
<a href="http://carolbaby.com.br/kits-para-bercos.html" class="level-top">
<span>Kits para Berços</span>
</a>
</li> </ul>
</div>
What I need:
Extend the background fundo-top.jpg and extend bg-menu.jpg to the white sides (left and right) that shows up in sample image [2] borders
I solved it with CSS, working with positions relative and absolute, besides pay attention on divs and sub divs coding.

Resources