I have a strange issue. Everything displays fine in both Chrome and IE, but not FireFox. See below:
The code for the navigation seen above is as follows
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</nav>
And the CSS
nav {
margin: 0 0 10px 0;
text-align: center;
background: #0054a6;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav li {
display: inline-block;
margin: 10px -4px 10px 0;
}
nav li a {
padding: 12px 75px;
text-decoration: none;
background: #0054a6;
color: #ffffff;
}
nav li a:hover {
background: #ffffff;
color: #000000;
}
Why is the container not the same height as it's contents? I'm not looking for a fix, just an explanation as to why it does this with my code.
You're seeing the effects of top and bottom padding on an inline element, your anchors. See this previous answer for some background. I've also made a little fiddle here which boils down your problem to something fairly obvious, I hope. (Basically, if the vertical padding exceeds the line-height on an inline element, the element can extend beyond the bounds of the container.)
So, your anchor elements are breaking out of their container, because they're inline, but with top and bottom padding set. To fix this (and as a bonus make their entire container clickable, rather than just the text) I'd turn them into blocks:
nav li a {
display: block; /* Fix breakout problem */
padding: 12px 75px;
text-decoration: none;
background: #0054a6;
color: #ffffff;
}
You should also wrap your li elements in a ul; they're not allowed to be children of the nav element.
(I'd probably consider getting rid of that wrapping div, too, and just targeting the nav element for your styling. I'm not sure it's adding anything. This JSFiddle is my final adjustment to your code.)
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:
no problem, everything looks as it should:
on the right side of the hovered li is a px of whitespace that shouldnt be there:
.navi {
display: inline-block;
height: 50px;
max-height: 50px;
overflow: hidden;
list-style: none;
float: right;
}
.navi li {
float: left;
}
.navi li a {
padding: 16px;
border-left: 1px solid #8bd854;
font-size: 16px;
text-decoration: none;
line-height: 50px;
color: #8c8c8c;
transition: all 0.5s ease;
}
.navi li a:hover {
background-color: rgba(13, 137, 0, 0.61);
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
color: #fff;
}
<ul class="navi">
<li>Home</li>
<li>About</li>
<li>Lawn Care</li>
<li>Tree & Shrub Removal</li>
<li>Contact</li>
</ul>
any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.
Thanks in advance
An easy way to fix this is by using the font-size:
.navi {
font-size: 0;
}
.navi li {
font-size: 1rem;
}
This sets the font size of the list to zero and the font size of the list element to the size of the root element (you may use any other unit – except em – if you want to).
I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.
I was able to reproduce the issue in Chrome by setting the zoom to 110%. Perhaps, you could set the zoom of all the navigation elements and their children to be zoom: 1.0;.
It is probably just whitespace. try
<ul class="navi"
><li>Home</li
><li>About</li
...
></ul>
I've created a basic nav with the following structure:
<div class="nav">
<ul>
<li>Home</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
The nav is a typical horizontal one with lis floated to the left. The thing is, the nav is dynamic per user, and the nav will never take up 100% the width of the screen.
However, I want the hovered/current nav link to have a red underline, and the rest of the nav across the remaining width of the site container to have a different colored bottom border.
Here's an image of what I want:
I can do this by attaching a background image of the default border color to the nav div, but I'm not sure how to do this with pure CSS.
Is this possible?
Thank you.
Edit: Here's the CSS (and please note that the CSS does not give me the intended effect):
.nav ul {
border-bottom: #DDD solid 5px;
list-style: none;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
border-bottom: #FFF solid 5px;
display: block;
font-size: 16px;
font-weight: bold;
padding: 5px 20px;
text-decoration: none;
}
.nav_link:hover {
border-bottom: #F00 solid 5px;
color: #F00;
}
.current_page {
border-bottom: #F00 solid 5px;
color: #F00;
}
Here's a possible solution.
Set a top and bottom border on your nav element. Then with your a tags, set them with a bottom border matching the non-hover color and size. Set a negative margin-bottom on the a tag equal to the size of the nav border-bottom. And then change the border color of the a element on hover.
Here's a fiddle showing it: http://jsfiddle.net/FNLmf/
*Note: I did not use floats, I used inline-block. You can use floats, just be sure to clearfix your nav element.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
I have come across a very peculiar behavior especially for what I consider to be a simple piece of code! Basically, I am trying to 'position:relative;' a footer navigation at the bottom of my page. In chrome it is correctly in the bottom. In FF (or any other non-webkit browser) it isn't at the bottom and almost at the top of the page. If I change ONE CSS line (position:relative to position:absolute;) it works for all browsers but it doesn't float correctly as I resize the screen or zoom in/out. I have confirmed this in 'boiler plate' HTML/CSS and with all the proper browser(s) resets as well and am getting the same behavior. This is all in Windows 7. Below are two very short snippets of HTML and CSS. Why isn't this working? Any solutions on how I can get a simple footer navigation to work across browsers AND have it float correctly as I zoom in/out will be greatly appreciated!
<ul id="avmenu">
<li class="current">First page</li>
<li>Second page</li>
<li>Third page</li>
<li>Fourth page</li>
<li>Fifth page</li>
</ul>
ul#avmenu {
margin: 35px 0;
padding: 0;
font: 12px Verdana;
list-style-type: none;
position:relative; <---As is this works in chrome only. JUST CHANGE THIS to position:absolute and it works in all browsers but it doesn't float well resizing or zooming.
top:70%; <--This only works ONLY in CHROME when above position:relative. Work improperly whhn position: absolute.
*left:20%;
}
ul#avmenu li {
display: inline;
}
ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}
See if this helps you: http://jsfiddle.net/panchroma/u9qtd/
To make this happen you will see I've forced the body to be full height. Depending on the specifics of what wraps around the UL on your actual page, you might need to adjust this.
As for the details of relative vs absolute, I can't improve on this discussion: Position Relative vs Position Absolute?
CSS
html, body {
height: 100%;
}
ul#avmenu {
margin: 35px 0;
padding: 0;
font: 12px Verdana;
list-style-type: none;
position:relative;
top:70%;
left:20%;
}
ul#avmenu li {
display: inline;
}
ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}