I did a wrong action on my wordpress header.php file. I use a theme which is called 039-fiorellini-lilla. I tried to re-download this theme but I can't find it anywhere on the web (this is a theme downloaded from temi-wordpress.net many years ago and I don't have a backup).
The problem is simple: I edited header.php file explicitly writing HTML code for the menu of the site.
Actually this is my header.php :
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php
bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?
>/script.js"></script>
<?php wp_head(); ?>
</head>
<body onLoad="show_clock()">
<div class="PageBackgroundGradient"></div><div class="PageBackgroundGlare">
<div class="PageBackgroundGlareImage"></div></div>
<div class="Main">
<div class="Sheet">
<div class="Sheet-body">
<div class="Header">
<div>
</div>
</div>
<!--START HTML CUSTOM CODE--!>
<div class="nav">
<ul class="menu">
<li class="index.htm"><a href="http://www.BLABLABLA.org/index.htm"
tppabs="index.htm" title="Home"><span><span>Home</span></span></a></li>
<li class="index2.htm"><a class="active"
href="http://www.BLABLABLA.org/index2.htm" tppabs="index2.htm" title="Home">
<span><span>Home2</span></span></a></li>
<!-- END CUSTOM HTML CODE -->
</ul>
<div class="l"></div><div class="r"><div></div></div></div>
I need to recreate the correct instruction which originally were in this file to obtain the same code you can see between <!-- START CUSTOM HTML CODE --> and <!-- END CUSTOM HTML CODE -->.
I think that probably I must use wp_nav_menu function but I have great problem to implement it. In this site I have only 1 menu of navigation which is called NAVIGATION1.
I need also that parameters class="active" remains active on the web pages actually visualized.
Thanks a lot for your support.
Ok, I solved the problem of the correct links of the menu using this code :
<ul class="menu">
<?php wp_list_pages("link_before=<span><span>&title_li=&depth=1'&& link_after=</span></span>");?>
</ul>
<div class="l"></div><div class="r"><div></div></div></div>
and it works fine.
I did some test using this functions :
add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class=\"ACTIVE\" ", $t);'));
And it's works correctly but it sets the attribute ACTIVE to all the pages of the menu while I need that this attribute is set only to active page of first level (no child page) of the menu (the page that is visualized in that moment.)
Probably, another possible solution is to use the class .current-menu-item wich is added to the menu item for the current page being viewed by the user but I have problem to modify my .css file to add the correct attribute for this class.
I said before that I need that current page has the same behaviour of the hovered page (same color, same font. etc etc).
This is a portion of my .css file for the hover :
elemento {
}
.menu li:hover a span span {
color: #131112;
background-position: left -24px;
}
.menu a:hover span span {
color: #131112;
background-position: left -24px;
}
.menu li:hover a span {
background-position: right -24px;
}
.menu a:hover span {
background-position: right -24px;
}
.menu a span span {
font-family: 'Lucida Sans Unicode';
font-size: 11px;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: #EFD2E0;
margin: 0 1px;
line-height: 24px;
text-align: center;
background-image: url('images/item-center.png');
background-position: left top;
background-repeat: repeat-x;
padding-left: 10px;
padding-right: 10px;
padding-top: 0;
padding-bottom: 0;
}
.menu a span {
background-image: url('images/item-right.png');
background-position: right top;
background-repeat: no-repeat;
}
.menu a, .menu a span {
height: 24px;
display: block;
}
.menu a {
cursor: pointer;
}
a:hover {
color: #000090;
}
a:link {
color: #87315B;
}
a {
color: #87315B;
}
.menu li:hover {
white-space: normal;
}
.menu, .menu ul {
list-style-type: none;
}
.Sheet-body {
text-align: left;
}
body {
font-size: 62.5%;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial,
Sans-Serif;
color: #000000;
}
The portion of HTML code generated is :
...
...
....<li class="page_item page-item-36 ***current_page_item***"><li><span
....class="separator"></span></li><a href="http://BLABLA.com/"><span>
.....<span>index.htmk</span></span></a></li>
...
...
Can someone help me to modify my .cssto add the portion of code for the active page?
Thanks
Related
I'm trying to do an animation of the logo in my PHP website. I need to break the two words of the logo into separate spans. I wanted to get rid of the whitespace between the two span tags so I started looking for an answer...and found a problem. Basically, when I add an ID to each span tag, even if I replicate the styling for both IDs, or I add a new text color, it doesn't work. It's almost like the IDs do not work. The span tags are inside of an tag with an ID that does have the correct formatting, which I did try erasing and even then it doesn't work. The only way to make it work, is to duplicate the ID and that is a bad practice. I'm attaching a jsfiddle and where everything works, but on my file it doesn't.
EDIT
The only reason why I'm duplicating an ID is because it is the only way to style that text. It doesn't matter if I use a new class or two new IDs, they just don't work. It's as if they do not exist in the code. I think the a tag's ID is taking prominence over the new span IDs, but even if I remove it, it doesn't work.
I edited to include the new tags that do not reflect the changes. #unexpected and #friends have the styling color: blue; and it just doesn't show on the browser.
* {
font-family: Montserrat, Helvetica, sans-serif;
color: #828282;
}
#font-face {
font-family: "Riffic";
src: url(../Riffic.ttf);
src: url(../Riffic/rifficfree-bold-webfont.woff);
}
#keyframes logo{
}
body {
padding-top: 65px;
position: relative;
}
#navbar {
background: #FF9D9D;
}
#navbarBrand{
font-family: 'Riffic', sans-serif;
color: white;
font-size: 26px;
}
#unexpected, #friends {
color: blue;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,1);
}
.navbar-dark .navbar-toggler {
color: rgba(255,255,255,1);
border: solid 2px rgba(255,255,255,.5);
}
.btn-outline-light:hover {
color: #FF9D9D;
}
a.btn.btn-outline-light.waysToHelp:active {
color: #FF9D9D;
}
.waysToHelp {
margin-left: 10px;
}
.waysToHelp:hover {
color: #FF9D9D;
}
#mainImage {
padding-bottom: 100px;
}
section {
padding: 58px 0 80px;
}
h1 {
color: #FF9D9D;
padding: 10px 0 25px;
}
h2 {
color: #FF9D9D;
padding: 10px 0 25px;
}
figure {
max-width: 435px;
}
#figCaption {
color: #FF9D9D;
font-weight: 500;
font-style: italic;
}
#projectCol {
margin-top: 100px;
}
#message {
color: #828282;
}
#submit {
padding: 8px 50px;
background-color: #FF9D9D;
border: none;
}
.small-text {
color: #FF9D9D;
}
footer {
padding: 20px;
}
footer a {
color: #FF9D9D;
}
#heart {
color: #FF9D9D;
}
#media only screen and (max-width: 767px) {
#mainImage{
padding-bottom: 50px;
}
section {
padding: 15px 0 20px;
}
img {
padding-bottom: 15px;
}
h2{
margin-top: -70px;
}
#figure1 {
display: block;
margin: 0 auto;
}
#figure2 {
display: block;
margin: 0 auto;
}
#figure3 {
display: block;
margin: 0 auto;
}
}
#media only screen and (min-width: 767px) and (max-width: 1029px) {
img {
padding-bottom: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- it tells the browser it's a responsove site and it makes the viewport, which is the screen size, to look for the device's width -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Unexpected Friends - Bootstrap</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--all the above tells IE9 or lower to upload those scripts because you are not very smart and it'll help you-->
</head>
<body data-spy="scroll" data-target="#navbar">
<nav class="navbar fixed-top navbar-expand-md navbar-dark" id="navbar">
<a class="navbar-brand" href="index.php" id="navbarBrand">
<span class="navbar-brand" id="unexpected">Unexpected</span><span class="navbar-brand" id="friends">Friends</span>
</a>
<!--navbar toggler is the hamburger icon that appears when in smaller screens-->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<!--ml-auto moves the links to the right-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-light waysToHelp" href="#waysToHelp">Ways To Help</a>
</li>
</ul>
</div><!--navbarNav-->
</nav>
https://jsfiddle.net/HailToTheV612/4qbeh216/6/
The first image is of the code not working in the php file.
The second image is the code working if I duplicate the a tag's #navbarBrand ID styling:
I edited to include the new tags that do not reflect the changes.
#unexpected and #friends have the styling color: blue; and it just doesn't show on the browser.
It looks like your code is working on your posted snippet (i.e., the #unexpected and #friends styling). The reason why it could not be showing on your browser is that, the browser is fetching the cached old CSS files. To refresh the cache, simply use ctrl+F5 or use an incognito browser. In addition, check if you've included the CSS file in your project.
I'm in the process of transferring an HTML/CSS/jquery mockup of a website into a wordpress theme. The site runs perfectly as an HTML site and all of the css rules are selecting the correct html elements.
However, when I enqueue the scripts to Wordpress and look at the site, only certain rules are being applied, resulting in the website having a broken look. I know the css is being correctly enqueued since I can see it showing up in the page source for the website. When I look at specific elements with web inspector it shows that only certain rules are being implemented but not others. Why would transferring my css to Wordpress change how the css rules apply to almost identical HTML?
Below the code for how I'm enqueuing scripts. Note the dependency on normalize:
<?php
//
function theme_styles() {
wp_enqueue_style( 'normalize', get_template_directory_uri() . '/normalize.css' );
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', array( 'normalize' ) );
}
// Load the theme JS
function theme_js() {
wp_register_script('stickynav',get_template_directory_uri() . '/js/stickynav.js', array('jquery'), '', true);
wp_register_script('nouislider',get_template_directory_uri() . '/js/nouislider.js', array('jquery'), '', true);
wp_register_script('bootstrap2',get_template_directory_uri() . '/js/bootstrap2.js', array('jquery'), '', true);
wp_register_script('foundation',get_template_directory_uri() . '/js/foundation.js', array('jquery'), '', true);
wp_register_script('orbit',get_template_directory_uri() . '/js/foundation.orbit.js', array('jquery'), '', true);
wp_register_script('modernizr',get_template_directory_uri() . '/js/modernizr.custom.49510.js', array('jquery'), '', true);
wp_enqueue_script('stickynav');
wp_enqueue_script('nouislider');
wp_enqueue_script('bootstrap2');
wp_enqueue_script('modernizr');
wp_enqueue_script('theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true);
if (is_home() && !is_paged() ) {
wp_enqueue_script('foundation');
wp_enqueue_script('orbit');
}
}
add_action( 'wp_enqueue_scripts', 'theme_js');
add_action('wp_enqueue_scripts','theme_styles');
// Enable custom menus
add_theme_support ('menus');
?>
This is the html/php I have in header.php:
<!DOCTYPE html>
<html>
<head>
<title>
<?php
wp_title( '-', true, 'right' );
bloginfo('name');
?>
</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<?php wp_head(); ?>
</head>
<body>
<div id="header_top_wrapper">
<!-- header and subheader -->
<div class="row" id="header-top">
<div class="large-12 columns" id="my_logo">
<?php bloginfo( 'name'); ?>
</div>
<div class="large-6 columns large-uncentered" id="subheader">
<h4><?php bloginfo( 'description'); ?></h4>
</div>
</div>
<!-- sticky navigation bar -->
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navigation_items">
<li class="nav-left">HOUSEPLANS.INFO</li>
<li class="nav-left">SEARCH PLANS</li>
<li class="nav-left">MOST VIEWED</li>
<li class="nav-right">ABOUT</li>
<li class="nav-right" id="site-search">
<form action="/search" method="get">
<input type="text" name="s" data-provide="typeahead" autocomplete="off" placeholder="Search";>
<i class="icon-search"></i>
</form>
</li>
</div>
</div>
</div>
</div><!-- end #header_top_wrapper -->
As an example of the selective application, these are the rules that are being applied to a link nested inside of an list item li on the HTML mockup
#sticky_navigation ul li a {
float: left;
margin: 0 0 0 5px;
height: 36px;
padding: 0;
line-height: 36px;
font-size: 12px;
font-weight: normal;
color: white;
}
#sticky_navigation ul {
list-style: none;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-style: normal;
}
And this is what is being applied to the same link in the Wordpress version of the same HTML and CSS
a {
color: inherit;
text-decoration: none;
line-height: inherit;
}
li {
text-align: -webkit-match-parent;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
}
Below is the CSS style for the area in question:
/* Logo and subheader */
#my_logo {
font:45px Georgia, Times, serif;
padding-left: 8px;
}
#subheader h4{
margin: 6px 0 0 0;
}
/* our menu styles */
#sticky_navigation_wrapper {
width:100%;
height:36px;
}
#sticky_navigation {
width:100%;
height:36px;
/* background: rgba(65, 105,255,.4); */
background: black;
z-index: 1030;
}
.navigation_items {
width:960px;
margin:0 auto;
}
.navigation_items ul{
padding-left: 0;
}
.navigation_items ul.pull-left:after {
clear: both;
}
#sticky_navigation ul {
list-style:none;
margin: 0;
/* padding:0; */
}
#sticky_navigation ul li{
margin:0;
display:inline-block;
}
#sticky_navigation ul li a{
/* float:left; */
/*margin:0 0 0 5px;*/
height:36px;
/* padding: 0; */
line-height:36px;
font-size:12px;
font-weight:normal;
color:white;
}
.nav-left{
padding-left: 10px;
padding-right: 20px;
}
.nav-right {
float: right !important;
padding-right: 10px;
padding-left: 20px;
}
What is going on here? I've been up all night trying to figure this out.
I'm enqueuing correctly, and according to the page source the exact same css is in the header as in my non-Wordpress version.
You have:
add_action('wp_enqueue_scripts','theme_styles');
But probably you should change it to:
add_action('wp_enqueue_style','theme_styles');
Ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Change
add_action('wp_enqueue_scripts','theme_styles');
to
add_action('wp_enqueue_style','theme_styles');
Also please remember that if you change or edit the css, you need to delete your cache and your visitors also needs to delete their browser's cache. But of course there's a better way to do it. Just fill in the "version" arguments on the wp_enqueue_style.
Do it like this:
add_action('wp_enqueue_style','theme_styles', array(), '1.0.0');
Every time you edit your css. Just change the version to '1.0.1' or '1.0.2' and so on. This will force your visitor's browser to get the latest version of the css.
Figured it out...
UL tags were missing for the li's - somehow deleted while inserting PHP.
DOH!
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; }
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.
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
}