My website is displaying different outputs on the .aspx page compared to the HTML page, even though they are using the same structure and CSS. The CSS seems to be collapsing on the aspx page. I have double-checked both codes and they are identical, yet the output is inconsistent.
Output on HTML Page: https://i.sstatic.net/dDSBu.jpg
Output on ASPX page: https://i.sstatic.net/cauR7.jpg
HTML Code:
<!--bg-img-container-starts--><div class="bg-img-container">
<!--bg-img-starts--><div class="bg-img">
<!--header-starts--><div class="header">
<!--logo-starts--><div class="logo">
<h2><a title="Quista" href="#">Quista</a></h2>
</div><!--logo-ends-->
<!--menus-starts--><div class="menus">
<ul class="nav">
<li><a href="#">Home</a> <div class="pipe"></div></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Track Orders</a></li>
<li><a href="#">About Quista</a></li>
<li class="call"><a href="#">Call Us :- +91 1234 1245</a></li>
</ul>
</div><!--menus-ends-->
</div><!--header-ends-->
</div><!--bg-img-ends-->
CSS
html, body{
margin:0;
padding:0;
width:100%;
height:100%
}
.clear{clear:both}
body{
font-family:'Quicksand', sans-serif;
}
.bg-img-container{
width:100%;
position:relative;
height:100%
}
.bg-img{
width:100%;
max-height:768px;
height:100%;
background:url(../Images/0000.jpg) no-repeat;
background-size:cover;
}
.header{
width:100%;
max-width:1200px;
position:relative;
margin:0 auto;
padding:15px 0 0 0
}
.logo{
width:20%;
display:inline-block;
}
.logo h2{
font-family:'MyriadPro-BoldCondIt';
font-size:4em;
padding:0;
margin:0;
letter-spacing: 5px
}
.logo a{
color:#fff;
text-decoration:none
}
.menus{
width:79%;
display:inline-block;
}
.nav{
marging:0;
padding:0
}
.nav li{
display:inline-block;
list-style:none:none;
}
.nav li a {
padding:15px 25px 15px 25px;
color:#fff;
text-decoration:none;
display:block
}
.nav li a:hover{
border-bottom:2px solid #FFF
}
.call{
background:#df6b5e;
border-radius:50px
}
.call a{
font-weight:bold;
padding:15px 25px 15px 25px !important
}
.call a:hover{
border:none !important
}
I believe the issue lies with the top div (img-bg-container) as I have set the height to 100% in the CSS and its child div to max-height:768px. The problem seems to be resolved when I use min-height instead of max-height in the aspx page, but it is puzzling how the output differs when the codes are identical..