I have a small space in my main navigation menu at:
http://ranchocordovaeventscenter.com/
I can't seem to find any css that is causing it to do this.
Can anyone help?
Thanks in advance,
Matt
Since your setting the list elements to inline-block. It's creating spaces between each element as if it's text ( words should have spaces between them, it makes sense if you think about it ).
.nav-menu {
font-size: 0;
}
Just make sure you reset the font-size on the children or else they will inherit this size and be illegible.
I don't see the space you are talking about, but something similar happened to me earlier.
CSS Box Model Puzzle - I must be missing something
The key is is the following piece of css code:
box-sizing: border-box; /* needs prefixes for webkit/moz */
Try including this css property for the container divs you may have.
Hope this helps!
The problem is that each anchor tag <a> inside the <li> element have borders in both sides...
To solve this, add border-right-width here:
.main-navigation li a {
border-right-width: 1px solid #F9B233;
}
and remove the following property in the above selector:
border-width: 1px solid #F9B233;
To remove the right border of the last element you can do this:
.main-navigation li:last-child a
{
border-right-width: 0;
}
Related
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.
My custom drop down menu has a really large change in top and bottom padding.
UPDATE Javascript, CSS & HTML included in fiddle [PHP removed]
First off, I didn't realise I could share a fiddle ^^
Pretty epic site.
I'ma keep debugging, but thought I'd post it here to see if anyone can spot where the problem is :)
In your fieldset css you are changing the line-height, which is also applied to the dropdown.
You have to set the line-height in the css for the dropdown:
.dropdown,
.dropdown li /* or whatever other selector is also needed */
{
line-height: 1em;
}
EDIT:
That seems to fit quite good:
.dropdown,
.dropdown li,
.dropdown span,
.dropdown a {
padding: 0;
line-height: 3em;
}
Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.
So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.
Try this:
<style type="text/css">
a img { text-decoration: none } // Images within
</style>
However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.
It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:
a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }
Try this:
a img { border:none; vertical-align:top; }
It moves the underline to the top and underneath the image.
Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:
a { text-decoration: none; }
In jQuery, you could use the has selector to add a class to all links that have an image inside them:
$('a:has(img)').addClass('image-link');
Then remove the border from those links in your CSS:
a.image-link {
border-bottom-style: none;
}
It would only work when JavaScript’s enabled though.
You will notice the :hover CSS for the links in the main nav area (grey bar under logo) for the site testing.ksischool.com works fine in Firefox, but IE7 chops off the bottom few padding pixels. Why?
I assume you're talking about the top navigation; you're padding an inline element (the <a> tag). When placing padding on an inline element, horizontal padding will push against other elements, but vertical padding will just increase the size of the element without affecting the layout around it. Likely Firefox is rendering the boxes above the elements below them in the source, but for whatever reason IE is rendering them beneath, which is why you're seeing parts of the box disappear.
To fix the problem, float all of the links left (which essentially turns them into block elements). You'll need to adjust your markup elsewhere to make it work (likely have some clearing problems if you just float straightaway), but that should fix that specific IE issue.
Edited for more detail:
As mentioned above, vertical padding on an inline element doesn't behave the way you would expect (it increases the element's height, but because the padding doesn't interact with other page elements the inline element often overlaps things in odd ways). So to fix this, you somehow need to make the padded element (the <a> tag) have display: block. To keep everything on the same line, floating left is your best bet. Here's the markup and styling that I would use:
<style type="text/css">
.mainnav {
font-size: 1em;
color: #999;
list-style-type: none;
/* zoom triggers hasLayout on IE, ignored by others
Necessary for the clearfix */
zoom: 1;
}
.mainnav:after {
/* This lets the .mainnav auto-clear its floated contents */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mainnav li {
float: left;
margin: 0 2px;
/* Place background (disc image) here w/ appropriate padding */
}
.mainnav li.last {
background: none;
}
.mainnav a:link, .mainnav a:visited {
display: block;
color: #fff;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px transparent;
}
.mainnav a:hover {
color: #fff;
background: #999;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px #ccc;
}
.mainnav a.selected, .mainnav a.selected:hover {
color: #B59B24;
background: transparent;
text-decoration: none;
}
</style>
<ul class="mainnav">
<li><a href="/" class='selected'>Home</a></li>
<li><a href="/About" >About</a></li>
<li><a href="/Admissions" >Admissions</a></li>
<li><a href="/Curriculum" >Curriculum</a></li>
<li><a href="/Home/VacancyList" >Careers</a></li>
<li class="last"><a href="/Contact" >Contact</a></li>
</ul>
Some things to note: I'm using a standard clearfix (Google this if you don't know what I'm talking about) to make sure the UL clears its floated contents. This will allow the parent nav elements to grow in size appropriately if the user sizes up their font.
Also, I removed the spacer · and recommend using a background image and .last class in the CSS. This is purely personal preference. (In an ideal world, you'd use the :after pseudo-class to inject the ·, but thanks to IE 6 not supporting it you can't do that and support all browsers.) My reason for recommending a background image rather than just leaving it in the markup is that it leads to cleaner markup and is far easier to change down the road (if your client decided they wanted a pipe rather than a dot, say).
The logic behind this markup/styling is that you need padding on the <a> for the border/background color to work which means it has to have display: block. Adding that would stick every link on a different line, though, so you need to float either it or its parent. Since it's part of a list, it's easier to float the li parent and use a clearfix to make sure the ul still has some presence on the page.
Obviously if you use this code you'll need to remove most of the #nav_banner element things lower down in the stylesheet, and you'll likely need to debug cross-browser again. Even if you don't, hopefully it will provide you with some ideas for easily constructing top navigation in the future.
Try adding display: inline-block to the a element. I'm not sure how compatible that is, but it works in IE7 and FF.
edit: One Crayon's solution is definitely better and the more common way of doing it.
I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.
After calling YUI, I call the stylesheet for the website and in there have a block for UL:
ul {list-style-type: disc;}
I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.
The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.
I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.
You need to include the following in your css:
li { display: list-item; }
This triggers Firefox to show the disc.
and you can also give a left-margin if the reset.css you are using make all margin null :
that means :
li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}
Assuming you apply this css after the reset, it should work !
Matthieu Ricaud
If I'm not mistaken, you should be applying this rule to the li, not the ul.
ul li {list-style-type: disc;}
I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.
Margin messes with this too
This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.
Make sure the 'li' doesn't have overflow: hidden applied.
My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:
li {
list-style: disc outside none;
margin-left: 1em;
}
ul {
margin: 1em;
}
I had this problem and it turned out I didn't have any padding-left on the ul, which was stopping the discs from being visible. The default padding-left for ul elements is 40px.
The and elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).
(Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
All I can think of is that something is over-riding this afterwards.
You are including the reset styles first, right?
Have you tried following the rule with !important?
Which stylesheet does FireBug show having last control over the element?
Is this live somewhere to be viewed by others?
Update
I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.
The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.
In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:
previous code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}
modified code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }
Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.
Make sure you have no display property set in the li tag in my case I had a display: flex property on my li tag for some reason.
please use inline css
<li style="disply:list-item">my li content </li>
All you have to do is add this class to your css.
.ul-no-style { list-style: none; padding: 0; margin: 0; }
Including the padding and margin set at 0.
Some reset.css set the ::marker to content : "", try to unset that on the <li> element:
li::marker {
content : unset;
}