my code which I am going to paste here shows different results in FF, IE6 and Opera.
The difference between results from FF and Opera is the amount of space shown above (in sky color) and below (in white color) the horizontal menu. In the case of IE6, the difference from the result of FF is the amount of space (white color) shown below the horizontal menu. How can I get all 3 browsers to show the same result i.e the current result from FF ?
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>fffffff</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header_inside">
<div class="logo">
<img src="img/img_flwr.png" width="224px" height="162px" >
</div> <!-- end of class logo-->
<div class="chat">
<img src="img/img_flwr.png" width="124px" height="62px">
</div>
<div class="clear">
</div>
<div class="name">
<marquee behavior="scroll" direction="RIGHT" scrollamount='5' scrolldelay='25' >
CODE ARROW
</marquee>
</div> -->
<div id="slides">
<img src="img/img_1.jpg" alt="Img 1" width="815px" height="268px" />
</div>
<div class="clear">
</div>
<br>
</div> <!-- end of class header_inside-->
</div> <!-- end of header-->
<div class="menu_h">
<div class="menu_h_inside">
<br>
<ul>
<li><a href="index.php" id="home_nav" >Home</a></li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Photo Gallery</li>
<li>Video Gallery</li>
<li>Career</li>
<li>Contact</li>
</ul>
<br style="clear:left"/>
</div> <!-- end of class menu_h_inside-->
</div>
</body>
</html>
and the css is:
/* CSS Document */
*{
padding:0;
margin:0;
}
body{
width: 1160px;
/*background:#BFFDC4 !important;*/
margin-left: 20px;
/*border:4px solid red;*/
}
#frame {
/*width: 710px;*/
width: 1125px;
/*BORDER:12PX SOLID RED;*/
/*border:7px solid green;*/
}
#header{
position:relative:
display:block;
/*border:10px solid green;*/
width:1160px;
background:#9DD4FF;
}
.header_inside{
}
body#home a#home_nav,
body#image_gallery a#image_gallery_nav
{
background-color:#0b75b2 !important;
}
.logo{
position:relative;
left:3px;
top:3px;
float:left;
/*border: 8px solid #F2AC4E;*/
}
.chat{
position:relative;
float:left;
display:inline-block;
margin-left:100px;
margin-top:15px;
/*border:13px solid red;*/
}
.chat img:hover{
}
.clear{
clear:both;
}
.name{
position:relative;
display:block
clear:both;
width:300px;
height:50px;
MARGIN-TOP:75PX;
background-color:#000000;
color:#FFFF80;
font-size:40px;
}
#slides{
position:relative;
left:300px;
MARGIN-top:-180px;
FLOAT:LEFT;
}
/* horizontal menu_h css begins*/
.menu_h{
position:relative;
margin-top:20px;
width: 1145px;
/*border:5px solid yellow;*/
}
.menu_h ul{
margin: 0; padding: 0;
float: left;}
.menu_h ul li{
display: inline;
}
.menu_h ul li a{
float: left; text-decoration: none;
color: white;
padding: 10.5px 44.6px;
/*background-color: #333; EDITED BY ME */
background-color:#C7A781;
border-right: 1px solid #FFFFFF;
}
.menu_h ul li a:visited{
color: white;}
.menu_h ul li a:hover, .menu_h ul li .current{
color: #fff;
background-color:#0b75b2;}
/* horizontal menu_h css ended */
.menu_h_inside{
margin-left:1px;
/*margin-top:7px;*/
}
IMAGES should be used in appropriate places.
Thanks in advance.
Istiaque Ahmed
Bangladesh
Your problem is most likely caused by the browser default stylesheets being all over the place. You should consider adding in a good CSS reset before spending a lot of time trying to debug the problem. This one is from the guy that came up with the first universal reset. It works pretty well.
http://meyerweb.com/eric/tools/css/reset/
Your doctype is incorrect and you are in quirks mode. Change your doctype to this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and see where we stand.
Make sure you follow Firefox or Opera first. Then look to see how IE screws things up before you try and "fix" anything. Never, ever trust IE to do anything right.
Related
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.
My partner and I are trying to make a shopping cart site for a school project. We are having trouble with our navbar.
We use the exact same files for styling this specific navbar. (its called universal.css and inherited by each page)
Also, the navbar HTML code is in a PHP file included via script (same script for both).
However, index.php of the products is not vertically aligned with the pull-right statements, though the index.php of the whole website is.
What's the problem?
(The JS file of products and index do not do anything different to the navbar They are essentially the same).
Here is my code, we host at main page https://webdes-nikhilb99.c9users.io/ and products page https://webdes-nikhilb99.c9users.io/products
Mainnav.css
#media (max-width: 1325px) {
.navbar-header {
float: none;
}
.navbar-collapse.collapse.in { display: block!important; }
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.glyphicon-search{
color:white;
}
#search-btn{
background-color: #337ab7;
}
Universal.css
#import url('productModal.css');
#import url('bottomNav.css');
#import url('mainNav.css');
row-title{
color:#337ab7;
font-weight:bold;
font-size:30pt;
margin-top:60px;
width:100%;
padding-bottom:50px;
}
#content-wrapper{
background-color: black;
width:100%;
opacity: 0.9;
}
#content-wrapper .content p{
color:white;
}
.content{
color:#337ab7;
font-weight:bold;
font-size:20pt;
text-align:center;
}
.content p{
font-size:10pt;
}
#mainNav{
background-color: black;
font-family: Montserrat;
font-weight: 700;
font-size:10pt;
border-bottom: 4px solid #337ab7;
background: rgba(0,0,0,0.9);
}
#img1{
position:absolute;
top:0;
left:0;
width:100%;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.navbar-custom .navbar-toggle .icon-container .icon-bar {
background-color: #000;
}
.navbar-custom .navbar-toggle .icon-container{
background-color:#000;
}
.navbar-nav .dropdown a{
color:#337ab7;
font-size:18pt;
text-decoration:none;
}
.blacktext{
color:#337ab7;
font-size:18pt;
}
/*Drop down menu*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu{
/**Change up the stuff in the dropdown here*/
}
.dropdown{
line-height:95px;
}
.navbar-nav .dropdown .dropdown-toggle{
font-size:30pt;
}
.navbar-nav > li >a{
line-height:65px ;
}
.navitem{
font-size:30pt;
}
.navbar-nav > li >a:focus{
background-color:transparent;
}
#loginWindow .modal-dialog .modal-footer{
text-align: left !important;
}
body{
padding-top: 65px;
}
.icon-bar{
background-color: #fff;
line-height:65px;
font-size:30pt;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one */
display: flex;
align-items: center;
}
body{
background-color: black;
}
/*.btn-success{
background-color: #337ab7;
}
.btn-success:hover{
background-color:blue;
}*/
/*Login and Registration buttons*/
.btn-primary{
background-color:#337ab7;
}
.btn-primary:focus{
background-color:#337ab7;
}
.btn-primary:hover{
background-color:white;
color:#337ab7;
}
.navbar-nav > li >a:hover{
background-color:transparent;
color:white;
}
#logo{
margin-left:10px;
margin-top:10px;
margin-right:20px;
margin-bottom:3px;
}
#nikhil{
color:white;
}
#yadu{
color:white;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 50px;
border-radius:25px;
opacity:0.95;
border: 3px double white;
}
.active a{
color:white !important;
}
.active a:hover{
color:white !important;
}
.active a:focus{
color:white !important;
}
body{
background-image:url("http://www.legionreport.com/wp-content/uploads/2014/04/blakegriffindunk.jpg");
}
#mtt{
color:#337ab7;
}
#bballfam{
height:200px;
width:80%;
}
Products page:
<html>
<head>
<title>Products</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/products.css">
</head>
<body>
<div class="container">
<?php
include('../snips/loginModal.php');
include('../snips/registrationModal.php');
include('../snips/menuMain.php');
?>
<div id='content-wrapper'>
<div class="row">
<div class="col-md-4 info basketball-info">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info football-info">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info soccer-info">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
</div>
<script type="text/javascript">
$("#srch-term").css('width', $(window).width()).css('right','-9%');
$(".bottom-nav").css('display','none');
</script>
<!--<div class="row">
<div id='basketball-info' class="info col-md-12">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='football-info' class="info col-md-12">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='soccer-info' class="info col-md-12">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div> -->
</div>
</div>
</div>
<?php
include('/home/ubuntu/workspace/snips/bottomNav.php');
?>
<?php
include('/home/ubuntu/workspace/snips/productPageModal.php');
?>
<script src="/js/products.js"></script>
<script type="text/javascript">
// $(".title").click(function(){
// $("#productsPage .modal-title").text($(this).text());
// });
// $(".bottom-nav").css('left','0');
</script>
</body>
</html>
Main Page:
<!DOCTYPE HTML>
<html>
<head>
<title>Baller Sporting Goods</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/index.js" type="text/javascript"></script>
<body>
<?php
/*Login page is a Bootstrap modal included on the main page. See snips/loginModal.php*/
include('snips/loginModal.php');
/*Registration page is a Bootstrap modal included on the main page. See snips/registrationModal.php*/
include('snips/registrationModal.php');
include('snips/menuMain.php')
?>
<div class="container" id="wrapper">
<div id='content-wrapper'>
<div class="row">
<h2 class="text-center row-title" id='mtt'>
<img class='center-block' id = "welcome" src="img/welcome.png" width="80%"/>
<br>
<i>Where Ball Really Is Life</i>
<br>
<br>
</h2>
<div class="col-md-9 content center-block">
Online Services
<p>
At Baller Sporting Goods, we offer a variety of services available to many devices.
On our site, you may use our always available quick-search that will locate the exact item
you need in a matter of seconds.
Or, if you like to shop around yourself, you can look over our exhorbitant list of products
on our site by clicking on the <a href='/products/'>Sports</a> icon on the top. We implement
an organized structure of products that sort by sport, company, and type of equipment. Check
it out!
</p>
</div>
<div class="col-md-9 content center-block">
Our Products
<p>
We started in 1991 in the garage of two partners: Nikhil Bharani & Yadunandan Pillai.
Both were high school students tired of studying; so they decided to take the easy way
out and start a business.
They accepted a small loan of one million dollars, which they used on buying the necessities
of a business: products. Eventually, the garage was full of brand new products from medium-scale
companies like ESPN and Dicks Sporting Goods, which they sold for 50 cents on EBay.
</p>
<p>
However, one million dollars is quite a small amount, so they ran out quicker than they planned.
The two collaborators then decided to escape loan sharks by moving to an island outisde US jurisdiction
and starting a shady business.
This business, today, is the most legit one in the world: Baller Sporting Goods.
We sell numerous performance-enhancing drugs and other nutritional supplements along with
imported goods from richer companies like Hong Kong.
We also sell purposefully torn up clothing made by hand.
Our best products are the cubic soccer balls.
</p>
</div>
<br>
</div>
<?php
include('snips/bottomNav.php');
?>
</div>
<!--<script src="/js/libs/slideshow.js"></script>-->
<script src="/js/index.js"></script>
</body>
</html>
Index.css
#import url('universal.css');
#searchbar{
margin-right:auto;
margin-left:auto;
width:50%;
}
#media screen and (min-width: 1200px){
.content{
left:12.5%;
}
}
.content{
padding-bottom: 50px;
}
#media screen and (max-width:800px){
#content-wrapper{
padding-right:40px;
padding-left:40px;
}
}
#wrapper{
width:100%;
height:100%;
}
#searchbar #searchForm{
color:blue;
margin-left: auto;
margin-right:auto;
}
#title h2{
font-family: Montserrat;
font-weight: bold;
color:black;
text-align:center;
margin-top:65px;
}
#searchbar #searchForm input[name='search']{
background-color:#e9e9e9;
}
#slideshoww{
margin-top:70px;
margin-right:auto;
margin-left: auto;
position:absolute;
width:100%;
opacity:0.3;
}
#searchbar #searchForm #bar_img{
font-size:25pt;
}
#welcome{
width:95%;
}
#bar_img{
color:black;
}
#content-wrapper .row-title i{
font-size:20pt;
color:lightGrey;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 100px;
border-radius:25px;
opacity:0.90;
border-right: 3px double white;
border-left: 3px double white;
font-family:Montserrat;
}
.col-md-6{
left:25%;
}
Products.css
#import url('universal.css');
#media screen and (min-width:990px){
.col-md-4{
border-right: 4px solid #337ab7;
}
.col-md-4:last-child{
border:none;
}
}
.col-md-4{
text-align:center;
font-family: Montserrat;
}
.col-md-4 .main-link{
font-size:20pt;
color:white;
font-weight:bold;
}
.info .title{
font-size:20pt;
color:#337ab7;
font-weight:bold;
}
#content-wrapper{
background:rgba(0,0,0,0.9);
}
My simple website with a header, navigation menu, footer and few sections runs fine in all browsers except google chrome. When I launch it in Chrome, it centers the page, like squeezing at the very middle of the browser page.
Look it here
My code:
.PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="design.css">
<style type="text/css"></style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<header id="top_header" >
<h1>Welcome to my world!</h1>
</header>
<nav id="top_menu">
<ul>
<li>HOME</li>
<li>WHO I'M</li>
<li>GALLERY</li>
<li>MY DIARY</li>
<li>BLOG</li>
<ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of Article 1</h1>
<h2>Subtitle of the article 1</h2>
</hgroup>
</header>
<p>This is the first best article ever</p>
<footer>
-Written by Jabir
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of Article 2</h1>
<h2>Subtitle of the article 2</h2>
</hgroup>
</header>
<p>This is the second best article ever</p>
<footer>
-Written by Jabir
</footer>
</article>
</section>
</div>
<aside id="side_news">
<h4>Fatah's update</h4>
Fatah became very stupid!
</aside>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
</body>
</html>
.CSS:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack:center;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:yellow;
border:3px solid black;
padding:20px;
}
#top_menu{
border:red;
background:blue;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid red;
width:220px;
margin:20px 0px;
padding:30px;
background:blue;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid green;
}
remove the display:-webkit-box; in body ....
body{
width:100%;
-webkit-box-pack:center;
}
margin:20px auto;
You set the width margin to auto, normally it only centers when a width is set but well it does it for you, replace:
margin: 20px auto;
with
margin: 20px 0px;
or something like that
I'm having some trouble getting my page laid out the way I want. I have a gap that's showing up between two divs on my page, and a css menu that I can't figure out how to center. Any help would be appreciated...
FYI, template_header.php is the only template with any content in it at this point.
Here is the code...
* index.php *
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body >
<?php include './templates/template_header.php'; ?>
<div id="pageBody">
<?php
include './templates/template_contextmenu.php';
include './templates/template_content.php';
include './templates/template_sidebar.php';
?>
</div>
<div id="pageFooter">
<?php include './templates/template_footer.php'; ?>
</div>
</body>
</html>
* template_header.php *
<div class="banner" >
<img class="bannerImage" src="./graphics/FullLogo2.png" height="216" />
</div>
<div id="menu">
<ul>
<li></li>
<li>Home</li>
<li>Products</li>
<li>Information</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
* style.css *
header, footer, aside, nav, article, section {
display: block;}
body {
margin: 0px;
padding: 0px;}
div.banner {
background-image:url("./graphics/BannerBG_220.png") ;
background-repeat:repeat-x;
height:13.5em;
border:solid;
border-width:thin;
margin: 0;
padding: 0;}
.bannerImage {
display: block;
margin-left: auto;
margin-right: auto;}
#menu{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
height:2.25em;
font-size:1.25em;
font-weight: 500;
background:transparent url(./graphics/navbackground2.png) repeat-x ;
font-family:Arial,Verdana,Helvitica,sans-serif;}
#menu ul {
padding:0;
list-style-type:none;
width:auto;}
#menu ul li {
display:block;}
#menu ul li a {
display:block;
float:left;
color:#e5e5e5;
text-shadow: 2px 2px 2px #3d3d3d;
text-decoration:none;
padding: .4em 1.5em .2em 1.5em;
height: 2.25em;
background:transparent url(./graphics/MenuDivider.png) no-repeat top right;}
#menu ul li a:hover, #menu ul li a.current {
background: url(./graphics/NavBackgroundOn.png) repeat-x;}
You won't be able to center #menu using margin: 0 auto without a width. You can measure the width of the links with javascript and then set the sum of all link widths as the width of #menu. You'll see a short delay but it'll work.
As for the white gap, an inspection with Firebug will show you where the unwanted margin or padding is coming from.
Get rid of the whitespace around your php tags.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body >
<?php include './templates/template_header.php'; ?>
<div id="pageBody"><?php
include './templates/template_contextmenu.php';
include './templates/template_content.php';
include './templates/template_sidebar.php';
?></div>
<div id="pageFooter"><?php include './templates/template_footer.php'; ?></div>
</body>
</html>
To center it, try this in the css:
#pageFooter { margin-left:auto; margin-right:auto; }
Weirdly, I've never come across this issue before, but I've just started making a site and the top navigation isn't playing nicely.
I want a small amount of white space between each menu item, but when I have new lines between my <li> elements and my <a> elements in my IDE (Netbeans), the white space disappears, yet it looks fine if I have <li><a></a></li> all on the same line. I was always under the impression html ignored white space in the code.
I've checked for any weird characters causing problems in other text editors and can't find anything.
Here's the code...
Like this the menu looks correct but code looks ugly (I know it looks fine when it's this simple, but I'm going be adding more complexity in which makes it look awful all on one line):
<ul id="menu">
<li>About</li>
<li class="active">Track List</li>
<li>Stats</li>
<li>Stats</li>
</ul>
Produces:
Like this the menu looks wrong but code looks fine:
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
Produces:
wrong http://img708.imageshack.us/img708/6628/screenshot20100618at000.png
I'm sure it's something simple I'm doing wrong... but can someone shed some light on this for me?
Sorry for the lengthy post (my first on stackoverflow).
Edit - Full CSS and HTML:
body {
/* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
font-family: 'Trebuchet MS', Helvetica, sans-serif;
/* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}
a {
color: #FFFFFF;
text-decoration: none;
}
#container{
margin: 0 auto;
width: 800px;
}
#content {
margin-top: 50px;
}
#header {
background-image: url("../images/absolute_radio_logo.png");
border-bottom: solid 1px #777777;
background-repeat: no-repeat;
width: 800px;
height: 86px;
padding-bottom: 15px;
}
#menu {
float: right;
}
#menu li {
display: inline;
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li:hover {
border-bottom: solid 3px #FF0000;
}
#menu li.active {
background-color: #58065e;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Radio - Statistics</title>
<link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
</div>
<div id="content">
<!-- content -->
Elapsed Time: 0.0033 - Memory Used: 0.4MB
</div>
</div>
</body>
</html>
It seems to be totally fine with the CSS you supplied, so I'm guessing there must be some other rule affecting your links. Could you please supply us with a live preview or the full stylesheet?
Edit:
Seems to be an issue with how "display: inline" collapses the elements contents, though I couldn't find any proof of that. Change
#menu li {
display: inline;
}
to
#menu li {
display: inline-block;
}
or add a margin to it:
#menu li {
display: inline;
margin-right: 5px;
}
To fix the alignment of the text, I'll go ahead and recommend you float the lis. Someone please correct me if this is a horrible idea. Add
#menu {
overflow: hidden;
}
#menu li {
float: left;
}
to your existing rules.
Just as a guess try setting the line-height for the li & a tags to 1em or even 0
#menu li, #menu a {
line-height: 1em;
}
Firstly, those two screenshots appear to be swapped around, the first has gaps between the links, caused by the white-space in the second code snippet.
This new white-space-collapse property may be able to help.
#menu li{white-space-collapse:discard}
via: http://safalra.com/web-design/html-and-css/white-space-property/
If that doesn't work, the next option is to set the <a> tags to block level elements and the <li> tags to inline.
#menu li{display:inline}
#menu li a{
display:inline-block
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li a:hover{
border-bottom: solid 3px #FF0000;
}
#menu li.active a {
background-color: #58065e;
}
so it seems the targeted answer's have all been provided, so I'd just like to add that as a rule of thumb I always use normalize.css which is a css library that ensures normal
you can download it or use npm install normalize.css
You must set overflow: hidden on the parent box, then set position: relative on the <li>:
ul {
margin: 0;
display: flex;
flex-wrap: wrap;
padding: 25px;
margin: 5px 0;
overflow: hidden
}
ul li {
display: inline-block;
padding: 19px 10px;
text-align: center;
position: relative
}
ul li::before {
content: '';
position: absolute;
width: 400%;
height: 1px;
background: #f3f3f3;
bottom: 0;
right: -250px
}