I tried searching and using the codes I found somewhere else where it suggests to put:
margin:0px;
, but it still doesn't resolve my issue about the GAP created between the divs of my file. Here's the code: [The first one's the Jquery, the second is for the CSS, and the last one is the body.]
jQuery(document).ready(function(){
var navOffset = jQuery(".nav").offset().top;
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery(".nav").addClass("fixed");
}
else{
jQuery(".nav").removeClass("fixed");
}
});
});
body, html {
height: 100%;
background-color:#404040;
margin:0px;
}
.parallax {
background-image: url('images/bg.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size:0;
margin-bottom:0px;
}
.parallax1 {
background-image: url('images/bg.jpg');
height: 46%;
font-size:0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul.header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
top:0;
display: inline-block;
text-align:center;
background-color: #0d0d0d;
}
.nav{
z-index:999;
}
.navlink {
display: inline-block
}
.fixed{
position: fixed;
top:0;
width:100%;
background-color:#222422;
}
.nav-placeholder{
margin:0 0 40px 0;
}
.navlink a{
font-family: caviar;
display: block;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15pt;
}
.navlink a:hover{
background-color: #f1f1f1;
color:#0d0d0d;
transition-duration: 0.4s;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
<body>
<div class="parallax"></div>
<div class="caption">
<span class="border"> WELCOME </span>
</div>
<div class="nav">
<ul class="header">
<ul class="header-content">
<li class="navlink">Home</li>
<li class="navlink"> Foods </li>
<li class="navlink"> Beverages </li>
</ul>
</ul>
</div>
<!-- Here's where the gap appears -->
<div id="content" style="height:300px;background-color:#f2f2f2;font-size:36px;text-align:center;">
<p>Sample Facebook Icon</p>
</div>
<div class="parallax1"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/js/js.js') }}"></script>
Couple of reasons:
p element has margins.
.nav-placeholder class has margin-bottom: 40px;
ul.header (which should be div.header) is displayed as
inline-block and pushes its parent height - leave its default
display as block.
if you are referring to the gap between your nav links, it is because display: inline-block; creates a gap by inserting a space between the elements. One solution to fix this is to set the parent container font-size: 0;.
.nav{
font-size: 0;
}
https://jsfiddle.net/unueg9zL/
The <p> you are adding inside #content is adding the gap, p elements have a default margin=1em (added by the browsers). You should set that margin to 0px explicitly on your CSS rules
#content p {margin:0}
https://jsfiddle.net/hkuo8xdx/
Related
I need to make tabbed layout using HTML in my php page. Lets say welcome.php and all I need to show my page at the beginning as follows,
I need to make three tabs as below and each of this tab should be clickable. For details1 and details2, when I clicked that button it should popup a vertical menu.
Then I need the nature as follows,
When someone clicked Mainview, content should be displayed in the white space. If someone clicked Deatils1 then popup the menu if someone clicked item1 the content inside item1 should be show in whitespace likewise I need to navigate the content.
I have tried upto this level.Here is my try.
<?php
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="./project/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<div class="sidebar">
<h2 style="font-family: Verdana;">Dashboard</h2>
<ul>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-paper-plane"></i> Page 1</li>
<li><i class="fa fa-mobile"></i> Page 2</li>
<li><i class="fa fa-phone"></i> Page 3</li>
<li><i class="fa fa-plug"></i> Page 4</li>
<li><i class="fa fa-user"></i> Page 5</li>>
</ul>
</div>
<div class="main_content">
<?php
include "adminHeader.php";
?>
<div class="info">
</div>
</div>
</div>
</div>
From above code I could get Side bar and Admin Header as below,
can someone help me to achieve what I need? Any help is appreciated.
Thanks in advance!
Here is my current css styles,
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background-color: #f3f5f9;
}
.wrapper{
display: flex;
position: relative;
display: flex;
width: 100%;
height: 100%
}
.wrapper .sidebar{
width: 220px;
height: 100%;
background: #4b4276;
padding: 30px 0px;
position: fixed;
font-size: 15px;
display: block;
height: 100%;
flex-shrink: 0;
}
.wrapper .sidebar h2{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-family: Helvetica;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0,0,0,0.05);
border-top: 1px solid rgba(255,255,255,0.05);
}
.wrapper .sidebar ul li a{
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas{
width: 25px;
}
.wrapper .sidebar ul li:hover{
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a{
color: #fff;
}
.wrapper .sidebar .social_media{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrapper .sidebar .social_media a{
display: block;
width: 40px;
background: #594f8d;
height: 40px;
line-height: 45px;
text-align: center;
margin: 0 5px;
color: #bdb8d7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.wrapper .main_content{
margin-left: 220px;
width: calc(100% - 200px);
display: block ;
}
.hidden{
display :none;
}
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
width: 100% ;
}
.wrapper .main_content .info{
margin: 10px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div{
margin-bottom: 20px;
}
.error {
color: red;
}
.vega-actions {display: none}
h3 {
font-family: 'Source Code Pro', sans-serif;
font-weight: 50;
font-size: 10px;
margin-top:0px;
display: block;
color: #404040;
text-align: right;
border-top:3px solid #000;
}
.main_content .info .card .card-body h3 {
font-size: 15px;
}
.card {
display: flex;
justify-content: center;
}
.flex {
display: flex;
justify-content: space-between;
}
.wrapper {
display: flex;
width: 100%;
height: 100%
}
.yellowBg {
background-color: #0ff;
}
Just a quick overview of what you want trying to achieve. Just check and run the code below. Hope it gives you idea.
document.querySelector(".has-sub").onclick = function() {
children = this.children[1];
if ( children.classList.contains("open") ) {
children.classList.remove("open");
} else {
children.classList.add("open");
}
}
.has-sub,
a {
text-decoration: none;
padding: 5px;
display: inline-block;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.has-sub,
.nav-menu {
border: 1px solid green;
text-align: center;
}
.has-sub {
cursor: pointer;
position: relative;
}
.sub {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin-top: 30px;
display: none;
background: gray;
}
.open {
display: block;
}
<div class="nav">
<div class="nav-menu">
<a href="#">
main view
</a>
</div>
<div class="has-sub">
<span>detail 1</span>
<ul class="sub">
<li>sub detail 1</li>
<li>sub detail 2</li>
</ul>
</div>
<div class="nav-menu">
<a href="#">
detail 2
</a>
</div>
</div>
Im trying to make the anchor tag as button and trying to add some css on it but it is not clickable
Here is my html code.
I'm following a youtube tutorial, I followed the video 100% but mine is not working, Im sorry im just new in web developing thankyou for the help.
<body>
<!-- Welcome Page -->
<section id="ulambg">
<div class="ulambg container">
<div>
<h1>Eatwell</h1>
Ready to Eat
Ready to Cook
</div>
</div>
</section>
<!-- End Welcom Page -->
And this is the css I used in the program, is it because of the Java? I read some forum that says some java function wont work if you disabled your java on your machine.
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 15px;
font-family: 'Raleway', sans-serif ;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/*Welcome Page Section Ulambg*/
#ulambg {
background-image: url(./img/bg.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
#ulambg::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
}
#ulambg h1 {
color: white;
width: fit-content;
font-size: 4rem;
position: relative;
}
#ulambg .btnulam {
display: inline-block;
padding: 10px 30px;
color: blue;
background-color: transparent;
border: 2px solid blue;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color;
}
#ulambg .btnulam:hover {
color: white;
background-color: blue;
}
/*Welcome Page Sectio Ulambg*/
add z-index: -1 in #ulambg::after, it's background, should not cover the page.
Demo
if i understand u correct, u mean <a href="#".. <- Anchor tag isnt clickable?
If yes u need to give it a name like <a href="#goHere".. and this means the link points to an id somewhere on the page ( for example to: <img id="goHere" src="/img/pic.gif"...
I'm new to the stuff myself but hopefully i could help in any way :)
This is what I've got but this doesn't solve the problem for different devices and screen sizes.
<html>
<body>
<iframe src="FILE LINK" width="1920" height="1080"></iframe>
</body>
</html>
How do I make it full screen? I've tried width: 100%; height: 100%
For reaching fullscreen in this case you need to use height: 100vh;, width: 100%;
body {
margin: 0;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.landing {
width: 100%;
height: 100vh;
}
.image-list {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100vh;
border: 6px solid #00f;
overflow: hidden;
}
.image-list .image {
border: 6px solid #f00;
width: 100%;
height: 400px;
background-size: cover;
background-position: center center;
height: 100vh;
}
.centered-element {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #fff;
padding: 1rem;
width: 280px;
}
.centered-element ul {
margin: 0;
padding: 0;
list-style: none;
}
.centered-element ul span {
opacity: 0.4;
}
<!-- body -->
<section class='landing'>
<ul class='image-list'>
<li class='image'
style='background-image: url(https://unsplash.it/1600/1600)'>
</li>
<li class='image'
style='background-image: url(https://unsplash.it/1600/1800)'>
</li>
<li class='image'
style='background-image: url(https://unsplash.it/1600/1700)'>
</li>
</ul>
</section>
<!-- /body -->
Well, a simple snippet like the following one did the trick for me:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 5px;
box-sizing: border-box;
}
html {
height: 100%;
}
<iframe src="#" width="100%" height="100%"></iframe>
Just play with the containers.
You should of course set your own container sizes to 100% and not html and body.
So I wrote a small website and everything was working great, all styles were working but today it only displays the style sheet in mobile view in the normal desktop view it disregards all the styles in my css/style.css
The navbar and header imag keeps their style regardless of the size of the browser just the rest of the styles are gone when in desktop view
My header and footer is included in all pages with php includes the files is in includes/header.php and includes/footer.php
Here is the link to the project as well to look at maxi.maxihome.co.za
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap--!>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Style sheet -->
<link rel="stylesheet" href="css/style.css">
<!--Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Acme|Neuton&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono|Sintony&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Acme|Molengo|Neuton|PT+Mono|Sintony&display=swap"
rel="stylesheet">
<!-- js script header -->
<script type="text/javascript"src="js/app.js">
</script>
<title>Maxi Home Renovations</title>
</head>
<body>
<section class="header">
<!-- custom menu -->
<div class="nav">
<div class="logo">
<img class="imagelogo"src="images/name.png" alt="">
</div>
<div class="togg">
<div></div>
<div></div>
<div></div>
</div>
<ul class="firstlevel">
<li></li>
<li></li>
<li>Home</li>
<li>Services</li>
<li class="has-sub"><a>Renovations</a>
<ul class="sub">
<li>Kitchen</li>
<li>Bathroom</li>
<li>Living Area</li>
<li>Total Renovation</li>
</ul></li>
<li>Contact Us</li>
<li><i class="fa fa-facebook-square"></i></li>
</ul>
</div>
<img class="headerImage" src="images/headerImg.png"
alt="HeaderImage">
</section>
</body>
/*index page*/
<?php
include "includes/header.php" ?>
<section class="feature">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="carouselExampleInterval" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="5000">
<img class="imgCar"src="images/h1.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar"src="images/h2.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar" src="images/h3.jpg" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<?php
include "includes/footer.php" ?>
.headerImage{
width: 100%;
heigth: 300px;
padding-top:75px;
color:#bf2132;
}
.fimage{
width: 100%;
heigth: 300px;
padding-top:75px;
}
.navbar-default{
background-color:#bf2132;
border-color: #bf2132;
}
/* navigation */
.nav
{
width:100%;
background-color:#ccc;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
.nav .logo
{
display:flex;
width:200px;
height: 50px;
flex-wrap:wrap;
justify-content: center;
align-items: center;
text-transform:uppercase;
cursor:pointer;
}
.imagelogo{
width:100px;
heigth:50px;
}
.togg
{
position:absolute;
right:40px;
top:20px;
display:none;
z-index: 5;
}
.togg div {
width: 36px;
height: 2px;
background-color: red;
margin: 6px 0px;
position: relative;
transition:all .8s ease;
}
.togg.lijo div
{
position:absolute;
transition:all .8s ease;
}
.togg.lijo div:nth-child(1){
transform: rotate(48deg);
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(2)
{
width:0px;
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(3)
{
transform: rotate(-48deg);
top: 7px;
right: 0px;
}
.nav ul.firstlevel
{
list-style:none;
width:calc(100% - 200px);
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
margin-bottom:0px;
padding-left:0px;
}
.nav ul.firstlevel li
{
display:inline-block;
margin-bottom:0px;
color:#000;
}
.nav ul.firstlevel li a
{
cursor:pointer;
display:block;
padding:15px;
transition:.8s ease;
text-decoration:none;
text-transform:uppercase;
color:#fff;
}
.nav ul.firstlevel li a:hover
{
text-decoration:none;
}
.nav ul.firstlevel li ul.sub li {
display: block;
background-color:rgba(191,33,50,1);
}
.nav ul.firstlevel li ul.sub li:hover {
display: block;
background-color:rgba(172, 78, 2, 0.79);
}
.nav ul.firstlevel li ul.sub li a{
color:#fff;
}
.nav ul.firstlevel li ul.sub
{
width:200px;
position:absolute;
padding-left:0px;
opacity:0;
visibility: hidden;
transform:translateY(30px);
transition:.5s linear;
padding-top:20px;
}
.nav ul.firstlevel li ul.sub:after {
content: '';
width: 41px;
height: 20px;
border-bottom: solid 18px rgba(191,33,50,1);
border-left: solid 20px transparent;
border-right: solid 21px transparent;
top: 0px;
display: block;
position: absolute;
left: 16px;
}
#media(min-width:1024px)
{
.nav ul.firstlevel li:hover ul.sub
{
visibility:visible;
opacity:1;
transform:translateY(0px);
}
.nav ul.firstlevel li:hover
{
display:inline-block;
margin-bottom:0px;
background-color: rgba(27, 27, 27, 0.32);;
color:#fff !important;
}
.nav ul.firstlevel li:hover a
{
color:#fff !important;
}
}
#media(max-width:1024px)
{
.nav
{
min-height:50px;
}
.togg
{
display:block;
top:10px;
}
.nav ul.firstlevel
{
position: absolute;
top: 50px;
transform: translateX(100%);
right: 0;
transition:.8s ease;
width:40%;
height: calc(100vh - 50px);
z-index: fixed;
}
.nav ul.firstlevel li {
display: block;
}
.nav ul.firstlevel.surya {
transform: translateX(0%);
}
.nav ul.firstlevel li ul.sub
{
opacity: 1;
visibility: visible;
display:none;
position:relative;
padding-top:0px;
width:100%;
transition:0s;
transform: translateY(0px);
}
.nav ul.firstlevel li ul.sub:after
{
display:none;
}
/* Feature */
.feature{
padding-left: 100px;
padding-right: 100px;
padding-top: 70px;
padding-bottom: 70px;
background-image: url("../images/paper.jpg");
text-align:center;
}
.houseimg{
width: 400px;
height: 350px;
border:5px solid rgb(191,33,50);
background-color:#ff0;
}
.about{
padding-right: 100px;
padding-left: 100px;
padding-bottom: 70px;
text-align:center;
background-image: url("../images/paper.jpg");
}
/* spinning text */
#blink{
width:100%;
height: 50px;
padding: 15px;
text-align: center;
line-height: 50px;
}
.htext{
font-family: "Alfa Slab One";
color: rgb(191,33,50);
animation: blink 1.5s linear infinite;
padding-bottom: 100px;
}
#keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
/* paragraph background */
.backpar{
border-radius: 25px;
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
padding: 20px;
width: 100%;
height: 100%;
color: white;
font-family: "Concert One";
}
.footer{
background-image: url("../images/footer.png");
}
/* Contact */
.contact{
padding-left: 70px;
padding-right: 70px;
padding-top: 70px;
padding-bottom: 70px;
background-image:url("../images/paper.jpg");
}
.jumbotron {
background: rgb(191,33,50);
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 24px;
padding-bottom: 24px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
/* carousel homepage*/
.carousel-item{
width: 100% !important;
Height: 350px !important;}
.imgCar{
width: 100% !important;
Height: 350px !important;
border: 2px solid red;
border-radius: 5px;
}
I have noticed I left out a curly bracket everything is working again
Embarrassed Thank you
On my site for one particular page the logo is nudged down a few pixels, while on all the other pages it is not. The code is identical(at least I think it is) for all pages so I'm not sure what is causing the issue.
Here is a screen shot of a working vs non working:
Working:
Non-Working:
The code for both is shown below however for some reason, one of the pages doesn't render correctly
<body>
<div class="wrapper"><?php include("include/header.php"); ?>
header.php:
<header id="header">
<div id="logo">
<h1 class="hidden">Welcome</h1>
</div><!-- #logo -->
<?php include("getstageinfo.php");
switch ($currentStage)
{
case "0":
$home ="period0.php";
break;
case "1":
$home ="period1.php" ;
break;
case "2":
$home ="period2.php" ;
break;
case "3":
$home = "period3.php";
break;
}
?>
<nav id="nav">
<h1 class="hidden">Main Navigation</h1>
<a class="nav-item current" href="<?php echo $home ?>">HOME</a>
<a class="nav-item" href="news.php">NEWS</a>
<a class="nav-item" href="accounts.php">ACCOUNTS</a>
<a class="nav-item" href="logout.php">LOG OUT</a>
<div id="nav_edge"> </div><!-- #nav_edge -->
</nav><!-- #nav -->
</header><!-- #header -->
CSS:
body { background-color: #031311; margin: 0px; padding: 0px; width: 100%; position: relative; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center top; overflow-x:hidden; font-size: 14px; line-height: 1.6em; color: #2a2d32; }
#header { margin: 0px; padding: 0px; width: 100%; height: 350px; display: block; position: relative; overflow: hidden; }
#header #logo { background-image: url(../images/logo.png); background-repeat: no-repeat; background-position: center top; display: block; margin: 0px; padding: 0px; height: 450px; width: 100%; }
#header #nav { position: absolute; height: 50px; width: 455px; left: 50px; top: 298px; background-image: url(../images/nav_bg.png); background-repeat: repeat; background-position: left top; margin: 0px; padding: 0px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #8C9791; border-bottom-color: #8C9791; border-left-color: #8C9791; }
#header #nav .nav-item { font-size: 14px; line-height: 50px; color: #E1E7EA; display: inline-block; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 15px; font-style: italic; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 15px; text-shadow: 1px 1px 1px #000; }
#header #nav #nav_edge { background-image: url(../images/nav_edge.png); background-repeat: no-repeat; background-position: left top; display: block; margin: 0px; padding: 0px; height: 52px; width: 40px; position: absolute; top: -1px; right: -40px; }
#header #nav .nav-item:hover, #header #nav .nav-item:focus { color: #FFF; }
#header #nav .nav-item.current { color: #2BD5CC !important; }
And here is the generated html for working:
And here's the non working:
for css purpose IE7 different from IE8 and they all differnet from FIREFOX, CHROME....
I dont see you specifying css file for IE7 using
<!--[if lte IE 7]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
You need to have alternate css for IE7 in your page
I realised that it was to do with the include(); functions I was using before declaring the doctype. So I asked a new question. See below
PHP include() before doctype, causing a white space