The navigation bar (can be viewed here) has become misaligned in Google Chrome (latest version) without any change to the coding.
The large white space present between the two rows did not used to exist, nor did the further misalignment of the four far right links.
I am only of aware of this issue in Chrome - it displays correctly in Safari and Firefox.
Code:
A code snippet for the navigation bar in the header.php is below:
<center>
<div class="navholder">
<div class="navigate">
<ul class="navigate">
<li class="navigate">Home</li>
<li class="navigate">Bus Routes</li>
<li class="navigate">Maps & plans</li>
<li class="navigate">News</li>
<li class="navigate">Enthusiasts</li>
<li class="navigate">MyRoute</li>
<li class="navigate">Live updates</li>
<li class="navigate">Tickets</li>
</ul>
</div></div>
<div class="navigateopposite">
<ul class="navigateopposite">
<li class="navigateopposite">Free travel</li>
<li class="navigateopposite">Mobile</li>
<li class="navigateopposite">Operators</li>
<li class="navigateopposite">Using the bus</li>
<li class="navigateopposite">TBR Team</li>
<li class="navigateopposite">Contact</li>
<li class="navigateopposite">Advertising</li>
<li class="navigateopposite">About</li>
</ul>
</div></div>
</center>
CSS:
The related CSS is also here:
/*Navigation bar*/
.navigate ul{float:left;width:1050px;margin-top:1px;text-align:center;}
.navigate ul li{display:inline;}
.navigate ul li a{width:127px;background:url(../images/navbar.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigate ul li a:hover{color: #fff;}
.navigate ul li a:active{color:#FFF;}
.navigateopposite ul{float:left;width:1050px;margin-top:1px;}
.navigateopposite ul li{display:inline;}
.navigateopposite ul li a{width:127px;background:url(../images/navbaropposite.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigateopposite ul li a:hover{color: #fff;}
.navigateopposite ul li a:active{color:#FFF;}
Question:
What would be causing this strange misalignment?
Try adding this to your CSS
li.navigate, li.navigateopposite {
float: left;
margin: 0;
}
I added this through Chrome's developer tools and it seemed to remedy the problem.
This might fix it but seriously... as j08691 and David Thomas pointed out... that's some pretty crazy HTML you've got going on there. With nothing but good intentions, I hope you don't mind if I make a few comments?
You've got multiple <head>s in your document - you can only have one.
You're using <div> purely for layout purposes - if you need to add spaces in the layout you should be using pure CSS... HTML, as the name describes, is for markup only - not style information. By my reckoning you could lose at least half of that markup. As a generalisation, the more markup you have, the more difficulties you're going to get into like stuff apparently breaking randomly.
I can understand not wanting to support IE7 at a push, but all versions of IE?? ("Something not working? You're using Internet Explorer"). I know IE can be pretty hateful but you can't throw the book at 10% of all of your website visitors.
I hope this helps set you in the right direction.
Related
ok, so developing a site for one of my friend's church using wordpress and I've run into a snag. I dont normally get all fancy with the nav bar, but I decided to take a swing at it... so here's what I'm doing:
nav bar background is a 1x64 pixel repeat-x. nav bar is actually a UL inline display. I want to have the background of each <li> tag be a static set image butted up next to each other for dynamic awesomeness. the problem: I cant force the background image to its full 100%. it is only as wide as the text is. The image size (made in photoshop) is 167x64 pixels. I cant center the links inside the <nav> tag horizontally and cannot get the <li> background the full size it's supposed to be. I've tried manually setting the height on everything in each level to be 64px as well as using verticle-align:middle; for the positioning I want and it's just really messing with my head #.#
site located at http://parnell.co/hurricane-church-of-god
page source:
<div class="nav-wrapper">
<!-- Nav -->
<nav>
<ul id="menu-nav-bar" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-18">Home</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">Sample Page</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">Blog</li>
</ul> </nav>
<!-- /Nav -->
<br class="clear">
</div>
<!-- /nav-wrapper -->
CSS Source:
/******************************************************
* Navigation *
******************************************************/
div.nav-wrapper {
margin-top:-16px;
-moz-border-radius: 15px;
border-radius: 15px;
background:url(img/nav-bg.png) repeat-x;
height:64px;
vertical-align:middle;
}
div.nav-wrappter ul,
nav ul li {
float:left;
height:64px;
vertical-align:middle;
}
nav ul#menu-nav-bar li {
display: inline;
list-style-type: none;
vertical-align:middle;
background-image:url(img/nav-button.png);
background-size:100%;
background-repeat:no-repeat;
height:64px;
}
nav ul#menu-nav-bar li a {
text-decoration:none;
height:64px;
vertical-align:middle;
}
Please bear with my sloppiness in code, i've been trying to wrap my head around it all day and have more or less started from scratch on that one part like 8 times. Any help you can give would be greatly appreciated
Ok, thanks to #ahillman3, I was able to get my mind straight and figure it out. Great link btw. As well the typo... that was about the biggest issue because nothing would have worked right until that was fixed. Specifying the width for the <li> tag forced the buttons to behave correctly. And as for centering the text, the css attribute display:block; when applied to nav ul#menu-nav-bar li a {} was the key to making the <a> tag (a line object) behave like a div or table (a block object). after that, it was as simple as adding some margin to get the text center in the box.
thanks guys!
In Firefox, the clickable area of the links in my footer is TINY. The clickable area does not span the entire label - both in terms of width and height. In IE, it's fine. Any ideas?
Here is my footer code:
<div id="footer">
<ul>
<li>RKM Research and Communications, Inc. |</li>
<li>1039 Islington St |</li>
<li>Portsmouth, NH 03801 |</li>
<li>603.433.3982 |</li>
<li>email us</li>
</ul>
<ul class="copyright">
<li>© 2012 RKM Research and Communications, Inc. </li>
<li>Privacy policy </li>
<li>Terms of use</li>
</ul>
and my CSS:
div#footer ul li{
color : #036;
background-color : transparent;
display: inline
}
div#footer ul li a{
color : #115EAC;
text-decoration : none;
display:inline-block;
paddding:10px 20px;
}
.footer ul li a:hover{color:#F6901E;
text-decoration : underline;
}
I've even tried to apply a block style using a class, but it still did not help:
<li class="flink">email us</li>
</ul>
css:
.flink ul li a{
color : #115EAC;
text-decoration : none;
display:block;
paddding:10px 20px;
float:left;
}
Small world, I also live in Portsmouth.
With the code you provided, the clickable area is just as it should be. You can verify this here: http://jsfiddle.net/cCDaL/1/
I've made the background of each a element yellow, so you can see exactly what the clickable area is, and it is indeed what it should be.
I think the answer to your problem is that you have another CSS rule that is making the clickable area tiny, possibly line-height or padding (padding is not clickable in links). You can use the Chrome or Firefox inspectors to see what could be the problem here.
Another edit: In Firefox Aurora 14.0a2, the clickable area is indeed also normal, for me, on your website http://www.rkm-research.com/. Here's a screenshot with the Firefox inspector:
I am creating a small project on ASP.NET. I want a simple drop down menu. Most of the solutions on web use jquery. Is there any simpler way or should I learn jquery ?
One more thing. The menu should work on IE.
Some of the cleanest drop down implementations I have seen are based on semantic HTML (unordered lists, nav element(s), etc.) and the CSS :hover pseudo class. Semantic structures degrade nicely when script is not available and are interpreted well when consumed by devices like screen readers.
Older versions of IE which do not support the :hover pseudo class can be accommodated with a snippet of script (no jQuery required).
Suckerfish/Son of Suckerfish is a good example of this technique.
Code/Description
Examples
Example
Here is the simplest implementation I could create which works in IE7+, Chrome, FF, etc. No script required.
Complete sample: http://jsfiddle.net/BejB9/4/
HTML
I'd wrap this in a nav tag in a finished document
<ul class="nav">
<li>This item has a dropdown
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
<li>Item</li>
<li>So does this item
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
</ul>
CSS
UL.nav > LI {
list-style: none;
float: left;
border: 1px solid red;
position: relative;
height: 24px; /* height included for IE 7 */
}
UL.nav UL{
left: -10000px;
position: absolute;
}
UL.nav > LI:hover UL{
left: 0;
top: 24px; /* IE7 has problems without this */
}
Just Google like "CSS menu", you can pretty much find everything you need with just copy/paste once you find a menu you like. Learn a little CSS and you can then modify it to your liking.
See: 100 Great CSS Menu Tutorials
See: CSS Menu Maker
There is not really a need to learn jQuery in order to use it, or its plugins.
You can google for "jquery drop-down menu" and you will find hundreds of sites with ready-made code and / or tutorials.
example: http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
All you will have to do later is construct your menu usually with a <ul><li> structure, and call the right selector.
Other option you will have is use a CSS drop-down menu - just google for it like I wrote for jQuery.
Here is an example:
<ul>
<li>list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
</ul>
How to keep list-style on the rest li elements while keeping float?
Thanks ;)
Having played a bit more, are you using IE? Also, are you specifying a DOCTYPE, to avoid quirks mode? There was some odd behaviour in IE6 with floats and list item bullets that may be being carried forward in quirks.
Looks to me like Internet Explorer clobbers the list style type when floating. Adding it back in works fine. See http://jsfiddle.net/gothick/VZC7F/5/ for your markup with some extra CSS styling that makes it work. That should be cross-browser safe, as far as I can see.
Complete example using inline styles:
<ul>
<li>list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
</ul>
...though of course it'll be more efficient to use a non-inline style/stylesheet as in my jsFiddle example.
My example works in IE8. It looks like the bullets might have disappeard in a more fundamental way in earlier version of IE; that article explains the behaviour and gives a way of recreating them, albeit with a bit of an annoying workaround (it basically recreates the missing bullets with a background-image.)
<ul>
<li>list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
</ul>
Here is a jsfiddle demo of what I could come up with. They are all floating left except the first one and maintain the squares.
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.