2
Span with overflow: hidden; does not appear in Firefox
source link: https://www.codesd.com/item/span-with-overflow-hidden-does-not-appear-in-firefox.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Span with overflow: hidden; does not appear in Firefox
advertisements
For some reason it floats below the place it should actually be.
Example on Firefox:
Example on Chrome:
HTML:
<nav>
<span><a class="main-current" href="index.html">Home</a></span>
<span><a class="main" href="page-1/sub-1.html">Subpages</a></span>
<span><a class="main" href="page-2.html">Multi-column</a></span>
<! The span it's about >
<span class="credits"><a class="credits" target="_blank" href="http://github.com/jvnknvlgl/oxygen-template">Oxygen by jvnknvlgl</a></span>
</nav>
span {
line-height: 56px;
padding-left: 4px;
padding-right: 10px;
}
span.credits {
float: right;
overflow: hidden;
padding-left: 30px;
padding-right: 4px;
}
nav {
max-width: 800px;
padding-left: 8px;
padding-right: 8px;
margin-left: auto;
margin-right: auto;
overflow-y: hidden;
white-space: nowrap;
}
Thanks in advance for anyone who can help!
nav {
white-space: normal;
}
then have a media query for when your navigation links start to disapear and revert back to:
@media (max-width: 400px) {
nav {
white-space: nowrap;
}
}
Related Articles
textarea with overflow: hidden does not indicate new lines added in Firefox
I am using a textarea styled with overflow:hidden to remove the scroll , the users can insert lines of text in this text area. the problem is with firefox, when the text exceeds the height of the textarea the new lines will not appear on the textarea
Overflow: hidden does not work in Firefox?
I have a table with rounded corner, and I've put an overflow: hidden CSS command on it so that the corners of the individual cells don't protrude out. It works fine on Chrome, but not on Firefox. Can someone tell me what's wrong? <style> table { bor
Overflow Hidden does not seem to work
I have an issue where overflow:hidden; does not seem to be working. I am trying to make it such that several inline elements wrapped in a div get cut off through overflow: hidden; at 20 pixels Markup: <div class="container"> <span>He
overflow: hidden does not work in a table
When I try the code below, hiding the overflow doesn't work (it expands): <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="1024" heigh
Why overflow: hidden does not work?
Overflow:hidden is not working for me. Gray box remains under the picture. I don't know whats wrong with it. I used this code from youtube tutorial. If some one can help me, I will be very thankful. .main { border: 10px solid white; width:378; height
div wrapped with a link does not appear as being able to be clicked in IE 7
I have the following code <a href="http://google.com"> <div style="float:left;"> Test </div> <div style="float:left;"> testing </div> </a> The link works correctly (clicking anywhere in the
Div with Overflow: Hidden Do not Clear the Padding of the Unordered Floating List
I was trying to get my div that contains floating elements, to enlarge to encompass them, but it doesn't seem to pay attention to the padding of the elements, effectively chopping them off. How can I get the div to be the correct height for my list i
Overflow: hidden does not work in e-mail
I'm trying to send some emails with some images. If I display the images on a webpage they are 100x wide and 100px tall, but if the image is taller than 100px it will get the excess pixels hidden. If I try to send it in an email, I can't get it to cl
Overflow: hidden does not work
When I run my code in a browser, the background is exactly where I already want it to be, the problem is that I can still scroll down, revealing the part of the background which is originally hidden. I need it so that the picture which I am trying to
remove the scroll bars from the page in IE8 (overflow: hidden does not work)
Applying this overflow:hidden; to the body of my document has no effect in IE8. Any ideas why?It depends on whether IE8 is rendering the page in Standards or Quirks mode. For example, the following HTML will be displayed without a scrollbar: <!DOCTYP
Overflow: Hidden Does Not Work As Expected in Google Chrome
I'm having a problem with the "overflow: hidden" CSS property. In Firefox, IE8 and Safari 5 when I apply this property to a div that is used for containing ad banners (like adsense leader boards or flash) at the top of my content there is still
Overflow Hidden does not work for me in Html Div
I am using the following html, See this jsfiddle <div style="float: left;"> <div style="padding-left: 3px; padding-top: 3px;"> <div style="float: left;"> Title: </div> <div style="float: left;
Overflow: hidden does not work for image
I am using the following code in html to display and image. I want it to 'scale to fill' where the height is the browser height and the width scales based on the height. I want to hide all overflow to prevent the div that follows from losing its cont
Div does not appear in firefox
i am developing a web application,I have made some div which is visible in each browser.one of my div is not showing up on firefox.What are the possible reasons. here is my fiddle i have given the background-color:black to the div which is not showin
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK