My site was working fine across all major browsers right up until the update to Safari 5.1. Now, the primary navigation is busted up. I was using display:table-cell on the anchor element within the list element and was also using the font-size:0 hack to remove the spacing in between menu elements. Has anyone else encountered this issue and have a solution they could offer up?
Before:
After:
CSS:
#navigation {
padding-top: 7px;
}
#navigation ul.links, /* Main menu and secondary menu links */
#navigation .content ul /* Menu block links */ {
margin: 0;
padding: 0;
display: block;
font-size: 0; /* this is a hack so that the spacing between the menu buttons disappear
since they are inline-block elements, this should be unneccessary when
CSS3 is approved */
}
#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
display: inline-block;
padding-right: 0;
padding-left: 0;
margin: 0;
/* below is a fix for IE7 to get the main navigation items lined up correctly
* in one row
*/
zoom: 1;
*display: inline;
}
#main-menu ul {
width: 100%;
}
#main-menu li {
width: 108px;
text-align: center;
padding-bottom: 7px;
font-size: 11pt;
}
#main-menu a {
display: table-cell;
width: inherit;
text-decoration: none;
font-size: 0.9em;
color: #035B9A;
background-color: white;
height: 30px;
vertical-align: middle;
}
HTML:
<div id="navigation">
<div class="section">
<h2 class="element-invisible">Main menu</h2>
<ul id="main-menu" class="links inline clearfix">
<li class="menu-379 first">About Us</li>
<li class="menu-401">Research</li>
<li class="menu-385">Education</li>
<li class="menu-402">Outreach</li>
<li class="menu-403 active-trail active">News & Events</li>
<li class="menu-439">People</li>
<li class="menu-405">Resources</li>
<li class="menu-406">Publications</li>
<li class="menu-415 last">Partners</li>
</ul>
</div>
</div>
Thanks.
Just a note, this is a Drupal 7 site.
Also I freely and humbly admit I am not the very best at CSS markup. I'm learning a lot right now and am just trying to scrape through.
For those having trouble with Safari and dimensions for elements set to display:table; I was able to fix my problems by removing the padding and adding padding to a child element set to display:table-cell;
Apparently Safari does not like it when you try to add padding to an element set to display:table; In retrospect, this makes sense.
Solved by making the list elements display as block and float them to the left.
#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
display: block;
float: left;
padding-right: 0;
padding-left: 0;
margin: 0;
/* below is a fix for IE7 to get the main navigation items lined up correctly
* in one row
*/
zoom: 1;
*display: inline;
}
You want border-collapse:collapse on the display:table element to remove cell spacing.
I took your css and html, and added to the css
body {
background-color: gray;
}
and I got the following, which looks correct.
This was run under lion, which has Safari 5.1
Related
In first image was taken from IE, its having full width for every content, but if u see in second image last menu content, not taking full width. how to solve this in both browser
HTML:
<div class="menu-section clearfix">
<div class="menu-element clearfix">
<ul>
<li class="active">Home</li>
<li>about us</li>
<li>administration</li>
<li>academics</li>
<li>research</li>
<li>activities</li>
<li>examination</li>
<li>facilites</li>
<li>contact us</li>
</ul>
</div>
</div>
CSS:
.menu-section {
background-color:#900000;
height: 56px;
}
.menu-element {
background-color: #400;
height: 50px;
}
.menu-element li {
float:left;
}
.menu-element li:hover {
background-color:#900000;
}
.menu-element li.active {
background-color:#900000;
}
.menu-element li a {
color:#fff;
text-transform:uppercase;
display: block;
padding: 18px 21px;
text-decoration:none;
font-weight: bold;
}
You need to add style to the ul as well:
.menu-element > ul {
list-style: none;
margin: 0; padding: 0;
}
Maintaining consistency across browsers is bit difficult, but you could ensure same rendering by two methods.
Specify a valid doctype on your html to ensure standards mode, and
Specify a box-sizing typically border-box in your stylesheet.
-
* {
box-sizing: border-box;
}
If you want to justify the menu options across the width, then you will have to make a few adjustments and a hack.
Apply a fixed width to the wrapping div, text-align:justify on the ul and display:inline-block on li are required.
Note 1: The display: inline-block is required, however it generates html white-spaces. In order to get rid of those white-spaces, html comments can be used in the markup of list items.
Note 2: The :after pseudo element in the hack is what seems to do the trick. However, that will create an unintended space below the ul. This space seems to be there because the elements are flushed across. If not justified, then this space does not appear.
.menu-element {
width: 100%; /* fixed width required on wrapping container */
}
.menu-element > ul {
list-style-type: none; /* getting rid of bullets */
margin: 0px; padding: 0px; /* getting rid of default indents */
text-align: justify; /* important to justify contents */
}
.menu-element li {
display: inline-block; /* required. float won't work. */
text-align: left; /* to properly align list items */
white-space: no-wrap; /* to prevent wrapping of list items if required */
}
.menu-element > ul:after {
/* this is the hack without which the list items won't get justified */
content:''; display: inline-block; width: 100%; height: 0;
}
Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/
Full Screen Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/embedded/result/
.
Try this:-
.menu-element ul {
padding: 0;
}
Try This
Give some width to ul element and add this style rule in your css:
.menu-element ul {
clear: both;
list-style:none;
margin: 0 auto;
text-align: center;
width: 92%;
}
I hope it works for you.
I have following html for menu
<ul>
<li id="btnHome">Link One</li>
<li id="btnAbout">Link Two</li>
<li id="btnContact">Link Three</li>
<li id="btnLinks">Link Four</li>
</ul>
and following is my css for it
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
#nav {
background: #999;
padding: 2%;
}
#nav ul li {
float: left;
margin-right: 2%;
}
I use above for IE6 and 7 in order to display links in a single row. float: left displays menu items in a row but it also changes the style for #nav div and menu items do not appear inside #nav div anymore.
How can I fix this issue for IE6 and 7?
Note: I am using display: inline-block for modern browser and this works fine.
You could use a CSS declaration like zoom: 1; for #nav element to trigger hasLayout on IE 6-7.
#nav {
background: #999;
padding: 2%;
*zoom: 1;
}
Note: The star/asterisk prefix is a CSS hack for targeting IE 6/7.
Other options
Using overflow: hidden; for the #nav element to create a new block formatting context.
Creating an element with clear: both; CSS declaration as the last child of the #nav element.
You might want to take a look at Nicolas Gallagher's micro clearfix hack.
Not sure without the rest of the document but you could try adding a
<div style="clear:both;"></div>
right after your close your ul element, that should grow the size of your containing #nav to the place your floated content occupies in it.
How to grow the li elements in the way, that all the four li elements consume the complete 900 pixels space and add a little gap between the elements. And why is there already a gap now - I have none defined?
<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }
#menu {
display: block;
position: relative;
width: 900px;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
position: relative;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:visited {
display: inline-block;
position: relative;
padding: 10px;
background-color: yellow;
text-decoration: none;
}
#menu li a:hover, #menu li a:active {
background-color: green;
text-decoration: none;
color: white;
}
</style>
<body>
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li>
<li>OpenOffice</li>
<li>Microsoft Office Visio</li>
<li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
</body>
</html>
Inline blocks behave weirdly in the fact that they render whitespace. The gap shown between items is the new line characters in your code. You can either remove the new line characters as I have shown in the code below (or at this fiddle http://jsfiddle.net/UyQEK/). If you want to keep the HTML clean, and not have to do this removal of whitespace, use float left on the elements instead of display: inline-block and do a clearfix on the parent to set the height.
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li><li>OpenOffice</li><li>Microsoft Office Visio</li><li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
EDIT
Made the classic mistake of forgetting to check to ensure I answered the whole question. I have updated the fiddle http://jsfiddle.net/UyQEK/1/ to show the actual answer to utilize the entire bar rather then just get rid of your spaces. The basis of the solution was floating the elements and giving them each a width of 25% and applying a clearfix to the ul element.
Hope that solves the whole thing this time.
Hopefully this is something simple I am missing, I have an OL encompassing a set of LI links.
In Chrome and firefox this works perfectly, in IE8 they appear as a numbered list moving vertically down the page.
HTML:
<div class="header">
<img src="images/header.png" alt="Logo">
<ol>
<li>Home</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
<li>page5</li>
<li>page6</li>
<li>page7</li>
</ol>
</div>
CSS;
.header {
width:888px;
height:119px;
margin: 0 auto;
margin-top: 20px;
padding:0;
text-align: left;
}
.header ol {
margin-top: -32px;
width: 888px;
padding:0;
margin-left: 10px;
}
.header li {
font-weight: bold;
display: inline;
padding-right: 20px;
padding-left: 20px;
border-right: solid 1px;
border-right-color: #FFFFFF;
}
Is there something basic I am missing here? Doing some searching doesn't seem to provide me with a solution. There are some suggestions of using display: inline; on the LI but this doesn't appear to make any difference.
The behaviour I am looking for is horizontal ordering of the links as displayed in Chrome and Firefox.
IE8 and lower versions of IE have trouble implementing display:inline on many block-level elements.
You could try to float the lis...
so remove the display:inline and replace with something like float:left
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>