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>
Related
I have an element on the page with horizontally scrolled content, scrollbar across the top.
This is working in FF/Chrome, and partially working in Safari.
The issue in Safari is the scroll bar is present & functional, but not visible. In the jsfiddle in Safari you can click and scroll across the top, even though no scrollbar shows.
jsfiddle
.testOne {
transform: rotateX(180deg);
overflow-x: scroll;
scrollbar-color: #ffde00 #f7f7f7;
}
.testOne::-webkit-scrollbar {
height: 20px;
}
.testOne::-webkit-scrollbar-thumb {
background-color: #ffde00;
}
.testTwo {
transform: rotateX(180deg);
width: 100%;
display: flex;
visibility: visible;
}
.item {
padding-right: 10px;
list-style: none;
}
<ul class="testContainer">
<span class="testOne">
<span class="testTwo">
<li class="item">
<img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
</li>
<li class="item">
<img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
</li>
<li class="item">
<img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
</li>
</span>
</span>
</ul>
Hoping someone has run into this and can advise a way to show the scrollbar.
When you have transforms on direct child elements it's having the issue. Try moving the transform up one level to the .testContainer element.
.testContainer {
width: 100%;
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
position: relative;
overflow-x: hidden;
transform: rotateX(180deg);
}
.testOne {
overflow-x: scroll;
}
.testOne::-webkit-scrollbar {
height: 20px;
}
.testOne::-webkit-scrollbar-thumb {
background-color: #ffde00;
}
.testTwo {
transform: rotateX(180deg);
width: 100%;
display: flex;
visibility: visible;
}
.item {
padding-right: 10px;
list-style: none;
}
<ul class="testContainer">
<span class="testOne">
<span class="testTwo">
<li class="item">
<img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
</li>
<li class="item">
<img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
</li>
<li class="item">
<img src='http://dummyimage.com/255x255/f0f0f0/000000' alt='' title=''/>
</li>
</span>
</span>
</ul>
I'm trying to create a header hero but my problem is that my background image goes on all my contents. Actually it has lower z-index than content but I don't know why doesn't it go on background.
.header
{
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground
{
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,.header ul li
{
width: 2vw;
float: right;
}
.header .container
{
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
</ul>
</div>
</div>
Only a positioned element can use z-index. According to MDN:
The z-index property specifies the z-order of a positioned (that is, one with any position other than static) element and
its descendants.
The .container doesn't have a position, so the z-index: 2 is ignored. Add position: relative to it:
.header .container {
position: relative;
z-index: 2;
}
.header {
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
.header .container {
position: relative;
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>
You can also use a negative z-index: -1 on the element you want to push back:
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header {
position: relative;
width: 100vw;
background-color: blue;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>
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/
Why does the latest Firefox browser render Bootstrap thumbnails differently than Google Chrome? I stuck with getting all thumbnails equal height but can't figure out how.
Setting the max-width attribute to none fixes the height, but lets the image overflow its parent container. Can you tell me why and how to fix so that it appears in all Browsers like it appears in Google Chrome?
Here is my fiddle.
EDIT: added screenshots (right-click -> 'open in new tab' to see fullsize)
Chrome: max-width = 100% (default) - fitting nicely
Chrome: max-width = none - overflowing parent
Firefox: max-width = 100% (default) - downscaled by BS
Firefox: max-width = none - overflowing parent
If your images height is fixed to 240px, than one of the solutions is to wrap them in absolute positioned span and use this css:
.thumbnails {
margin: 0 0 10px 0;
padding: 0;
}
.thumbnail {
position: relative;
height: 250px;
}
.thumbnail span {
margin: 0 auto;
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
overflow: hidden;
}
.thumbnail span img {
margin: 0 auto;
display: block;
}
Check it in this Fiddle, or run the snippet below:
.thumbnails {
margin: 0 0 10px 0;
padding: 0;
}
.thumbnail {
position: relative;
height: 250px;
}
.thumbnail span {
margin: 0 auto;
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
overflow: hidden;
}
.thumbnail span img {
margin: 0 auto;
display: block;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<div id="slideshow">
<div>
<div>
<div data-index="1">
<ul class="thumbnails list-unstyled">
<li class="slide col-xs-4">
<a href="#" class="thumbnail" title="This is ok">
<span>
<img src="http://i.imgur.com/DONm5Ih.jpg" class="shot landscape" width="auto" height="auto" alt="image" />
</span>
</a>
</li>
<li class="slide col-xs-4">
<a href="#" class="thumbnail" title="This is ok">
<span>
<img src="http://i.imgur.com/TFEAQTJ.jpg" class="shot portrait" width="auto" height="auto" alt="image" />
</span>
</a>
</li>
<li class="slide col-xs-4">
<a href="#" class="thumbnail" title="This is ok">
<span>
<img src="http://i.imgur.com/WZbs0wI.jpg" class="shot landscape" width="auto" height="auto" alt="image" />
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to add my clickable company logo to the header, which will redirect them to homepage. I tried this, but it makes the whole header clickable.
<div id="header">
<a style="display:block" href="profile.php" >
<label>
<img src="images/logo.png" height="50x" width="180px" />
</label>
</a>
</div>
I have added the CSS associated with it:
div#header a
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
Use CSS.
Don't use INLINE CSS STYLE. Instead create css file and paste code and include it in page.
<style type="text/css">
div.header
{
display: block;
height: 40px;
position: absolute;
width: 100%;
}
div#header a img
{
cursor:pointer;
}
.header .logo
{
display: block;
float: left;
padding: 4px 3px;
}
img
{
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
</style>
<div class="header">
<a href="action.php" class="logo">
<img title="Title" alt="Alter" src="img/4.png">
</a>
</div>
Please remove display: block from anchor :-
<div id="header">
<a href="profile.php" ><label><img src="images/logo.png" height="50x" width="180px" /></label></a>
</div>
try this
</style>
div#header
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
</style>
<div id="header">
<a s href="profile.php" > <img src="slider-button-left.png" height="50x" width="180px" /></a>
</div>