I'm having issues with the IE7 list element bugs. The bullets (or numerals) of and are being shown outside of the margin. How do I fix this for IE? From what I've read this seems to be a problem when specifying the height/width in an IE7 li. Images can be found here:
Firefox:
IE7:
I have a stylesheet with the Meyer reset.
#create_request li {
display: list-item;
width: 313px;
height: 23px;
background-color: #E3E3E3;
list-style: decimal;
list-style-position: inside;
padding-left: 25px;
padding-top: 5px;
}
#create_request li.alternate {
background-color: white;
}
#create_left li:hover {
width: 356px;
background: url('/images/list_add.png') 100% 100% no-repeat;
background-color: #B0B0B0;
cursor: pointer;
}
From what I've read this seems to be a problem when specifying the height/width in an IE7 li.
That's correct. Set the width on <ol> instead of the <li> and use line-height instead of height on the <li>.
#create_request ol {
width: 313px;
}
#create_request li {
line-height: 23px;
...
}
IE can do some weird things with padding/margin. I would recommend having a separate .css file for IE:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
And then just add either padding-left or margin-left to bump it back in place.
1) try display: block; instead of display: list-item;
2) try using margin (even margin-left:0;)
3) CSS hack for IE7 is also available
*+html #create_request li{
..... some style corrections here will work for IE7 .....
}
Related
So I have a vertical navbar, and I haven't been able to center the tabs. The text is too far off to the right, and when I hover over it, the highlighted box doesn't extend to the margins. My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matthew H. Goodman</title>
<link href="style2home.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="nav">
<li>HOME</li>
<li>CV</li>
<li>RESEARCH</li>
<li>CONTACT</li>
</ul>
</body>
</html>
CSS:
#nav {
margin-top: 200px;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
position: absolute;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg");
}
#nav li {
position: relative;
list-style: none;
padding: 15px;
width: auto;
}
#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
}
#nav li a:hover {
color: #778899;
background-color: black;
}
Browsers, and some CSS resets add default rules to elements like UL/OL to keep style-less html elements looking consistent.
ul#nav { padding-left: 0; }
I would recommend using a CSS reset (normalize, eric meyer's reset, etc) to allow you to start from scratch.
Use chrome/firefox/ie11 dev tools (F12, or right click and inspect element), go to the element in the window and hover over it to see the margin/padding rules. Scroll down the CSS rules on the right side to find where they are being applied Or click on 'computed styles' to see all the rules.
For the hover states,
you need to apply your hover to the li and handle the color separately
#nav li:hover { background-color: black; }
#nav li:hover a { color: #778899; }
You also need to add
#nav { overflow: hidden; }
to maintain your border-radius
You have some padding being applied to your #nav element you can fix it by adding:
#nav {padding:0px;}
To make the background cover the entire line add more padding to a and remove padding from the li with the current markup that will do the trick.
li {padding:0px;}
a {padding:15px;}
you can insted add a hover state to the li element but that but that will cause some problems with being able to click the a element correctly.
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
Follow-up from another post here: IE7 li bullet or number shown outside of div
In the previous post, the li element outside the div was fixed, but now I have another IE7 bug with the hover element. Since the hover element can not be set through the , how do I fix this one?
P.S. Obviously I've been having some trouble with the hasLayout bug in IE, so it someone was to give a nice explanation it would be appreciated.
Again everything works in firefox, etc.
The screenshots:
The code:
#create_request ol {
width: 339px;
}
#create_request li {
display: list-item;
line-height: 23px;
background-color: #E3E3E3;
list-style: decimal;
list-style-position: inside;
padding-left: 25px;
padding-top: 5px;
}
#create_request li.alternate {
background-color: white;
}
#create_left li:hover {
width: 356px;
background: url('/images/list_add.png') 100% 100% no-repeat;
background-color: #B0B0B0;
cursor: pointer;
}
Unfortunately, that's not possible without bringing in another element in the <li>. The incorrect list-style-position behaviour occurs in IE6/7 when the <li> element get hasLayout. You want to totally avoid hasLayout on the element. The width is one of the hasLayout triggers.
I suggest to put a <span> in the <li> (yes, sorry if you would cry)
<li><span>Item</span></li>
and change the li:hover style as follows
#create_left li:hover {
background: #B0B0B0;
cursor: pointer;
}
#create_left li:hover span {
display: block;
width: 356px;
background: #B0B0B0 url('/images/list_add.png') 100% 100% no-repeat;
}
This way the span controls the width of the <li> without giving it hasLayout. You only need to remove padding-top: 5px; from the <li>'s CSS and counteract it with line-height, otherwise the <span> will not get the full height.
Make it if necessary an IE6/7 conditional stylesheet.
I believe you need to declare "list-style-position" in the rule for your OL tag:
#create_request ol {
list-style-position: inside;
}
I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE.
This is the only affecting css:
#header ul
{
display: inline;
}
#header ul li
{
list-style-type: none;
background: #000;
display: inline;
margin: 0;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
And this is the HTML:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
</div>
As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...
That's no moon...i mean...margin.
What you're seeing is the white space between your elements. Inline-block treats the elements as inline, except they have heights, widths, margins, paddings, etc. What happens is the newline + spacing you've given your html elements for nice indentation is being displayed as a space between the elements.
inline-block is also not cross-browser consistent. I'd suggest using display:block; with floats.
Edit to add suggestion:
If you want nice indents, but want to avoid extra white-space (as in all XML data ever), use what I call the "fishy notation"
Instead of:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
Use:
<div id="header"
><ul id="toplinks"
><li>Hello</li
><li>Herp</li
><li>Derp</li
></ul
></div>
White space contained by elements is preserved, but white space within elements is not.
Time to whip out that CSS Reset! I first include this, and then start designing. It makes it much easier, as most HTML will look identical cross-browser.
But to fix your problem, I would check if there is a stray border property somewhere. I've had rogue borders before, and they drove me mad. To kill it (for now), try this:
border-style: none;
If we had the complete CSS (don't worry, we don't steal it), I could actually fiddle with it and give you a fully functional answer.
change your CSS to
#header ul
{
display: inline;
}
#header ul li
{
float:left;
background: #000;
margin-left: 1px;;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
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>