anyone know how to fix this! on 'Get In Touch button'
it works find in another browser except IE7;
HTML:
<NAV>
<UL>
<LI>Home</LI>
<LI>Branding</LI>
<LI>About</LI>
<LI>Get In Touch</LI>
</UL>
</NAV>
CSS:
nav { float:right;}
nav ul { margin:0px; padding:0px; }
nav ul li { float:left; }
nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px;}
Add white-space:nowrap to the nav ul li CSS rule.
About the white-space property: http://vidasp.net/CSS-white-space-property.html
You may need to explicitly set width on the list and/or nav container.
This is quite common in IE7 and down, where the dumb browser needs to be told there's room allotted for the content.
nav ul li { display:block; background:#ccc; padding:5px; margin-left:5px; width: auto; }
Add in that width: auto; - see if that helps.
Neuro
use
clear: right; float:right;
Related
I have being trying to make a nowrap navigation with CSS however when I hover over the parent list for lack of a better description jumps
HTML
html {
overflow-x: hidden;
}
ul li{
list-style:none;
}
nav{
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
height:40px;
background-color:white;
overflow:hidden;
}
nav .user-nav{
position:absolute;
white-space:nowrap;
}
nav .user-nav > li{
display: inline-block;
margin: 0 10px;
}
nav .user-nav li a{
text-decoration:none;
color:black;
}
nav .user-nav li a:hover{
color:red;
}
nav .user-nav > .interact li{
display:none;
background-color:white;
padding:10px;
}
nav .user-nav > .interact:hover li{
display:block;
}
nav .user-nav > .interact li:hover{
color:red;
}
<nav>
<ul class="user-nav">
<li>Reccent reviews</li>
<li>Reccent addtions</li>
<li class="interact">Login/Register
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</li>
</ul>
</nav>
I added it to a fiddle below
https://jsfiddle.net/23e5aLp2/
I initially done it with a float however since reading a bit more I found inline-block is the better option, the problem is as I mentioned the parent list seems to jump when hover over the drop down menu
Make your <ul> inside of .interact positioned absolute, like:
.interact ul {
position: absolute;
}
.interact ul {
position: absolute;
}
html {
overflow-x: hidden;
}
ul li{
list-style:none;
}
nav{
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
height:40px;
background-color:white;
overflow:hidden;
}
nav .user-nav{
position:absolute;
white-space:nowrap;
}
nav .user-nav > li{
display: inline-block;
margin: 0 10px;
}
nav .user-nav li a{
text-decoration:none;
color:black;
}
nav .user-nav li a:hover{
color:red;
}
nav .user-nav > .interact li{
display:none;
background-color:white;
padding:10px;
}
nav .user-nav > .interact:hover li{
display:block;
}
nav .user-nav > .interact li:hover{
color:red;
}
<nav>
<ul class="user-nav">
<li>Reccent reviews</li>
<li>Reccent addtions</li>
<li class="interact">Login/Register
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</li>
</ul>
</nav>
Hope this helps!
I would recommend to use inline-table or inline-block for class nav .user-nav li
Fiddle
Its because the list items are block elements, thus making the container bigger in size when they spawn in. Make the dropdown items absolute and your problem will be solved.
http://prntscr.com/ddn5xe
http://prntscr.com/ddn5gv
As for the nav question; a text-align: justify solution might work, or a flexbox solution. Try googling around for "nav justify text" or "nav flexbox" and you'll find a pletora of solutions.
Actually what is happening is that the inline block works well if you add same content in all inline block elements but as they are block elements their default settings will wrap the div around the content inside it. To make sure the content is aligned correctly in line, you need to specifically assign content alignment properties in the css of the inline-block elements.
The simplest solution in your scenario is just add vertical-align:top; to the nav .user-nav > li class or the element with the display:inline-block; property and the problem will be resolved.
Hope this helps.
I built a simple dropdown menu, but in Chrome on hover the size of the tag reduced by 3px. (jump effect)
I don't understand where's the problem, here is my css:
#primary {
width:400px;
background:yellow;
height:48px;
margin:0;
padding:0;
}
#primary li {
display:table;
width:120px;
float:left;
border-right:1px solid blue;
position:relative;
}
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
}
#primary #secondary {
display:none;
margin:0;
padding:0;
}
#primary li:hover #secondary {
position:absolute;
top:48px;
left:0;
background:red;
display:block;
}
It seems Chrome adds extra hidden margin/padding.. In FF, IE it's working.
Online demo: http://jsfiddle.net/A3XDR/
Change:
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
}
to
#primary li a {
display:block;
text-align:center;
height:48px;
line-height: 48px;
}
If you want to keep your vertical alignment and table-cell you could add width: 100%:
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
width: 100%;
}
This should do the trick but I am not sure why is it behaving like this. It is surely because of secondary ul but not sure why.
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
width:100%;
}
Fiddle
Found a way to do it but it involves changing your markup, adding a span within the link:
HTML:
<ul id="primary">
<li>
<span>Nav 1 is long and wraps some</span>
<ul id="secondary">
<li>Nav 1-1</li>
<li>Nav 1-2</li>
<li>Nav 1-3</li>
<li>Nav 1-4</li>
</ul>
</li>
<li><span>Nav 2</span></li>
<li><span>Nav 3</span></li>
</ul>
CSS:
#primary li a {
display:table;
height:48px;
width: 100%;
}
#primary li a > span {
display: table-cell;
text-align: center;
vertical-align:middle;
width: 100%;
}
Fiddle | JSBin (for IE8 testing, jsFiddle doesn't work on IE8)
(You can also change #primary li to display: block if that table-in-table bothers you; seems to work: Fiddle | JSBin)
No jumping for me in the older Chrome (~v26) that has issues with just the simple width: 100%, or with the long nav entry that wraps which jumps for me even on current Chrome (~v32). Also seems happy in Firefox, IE8, IE10, Opera, and Midori.
(This solution is only possible because of the direction putvande and Lokesh pointed in. Please show your support for their efforts.)
One of my UL is not displaying correctly. It is both displaying things inline and also the bullets do not show.
I know that this issue is isolated strictly to my divs that are used with my tabbed interface. I'm also assuming this is due to the hierarchy above. (The .tabs li says to display things 'inline'.) If I delete that, obviously the tab interface is screwed. How can I keep my divs displaying horizontally, and have the lists inside of the div box display in a block?
Thanks!
CSS
.basics ul {font-family:terminal;
font-size:9px;
text-transform:uppercase;
color:gray;
padding:0px;
display:block;
}
li.basics { list-style-image: url('/bullet.png');
}
ul b {font-family: terminal;
font-size: 8px;
text-transform:uppercase;
color:#fff3a2;
font-weight:lighter;
}
div.tabs {
padding:15px;
width:760px;
background:#000;
color:#fff;
border-radius: 0em 4em 1em;
-moz-border-radius: 10px;
margin-left:3px;
height:200px;
overflow: auto;
}
ul.tabs {
padding:0;
margin:0;
margin-top:10px;
margin-left:3px;
}
.tabs li {
list-style:none;
display:inline;
}
and the html code:
<ul class='tabs'>
<li><a href='#tab1'>BASICS</a></li>
<li><a href='#tab2'>BIOGRAPHY</a></li>
<li><a href='#tab3'>RANDOM</a></li>
<li><a href='#tab4'>NPCs</a></li>
</ul>
<div id="tab1" class="tabs">
<ul class="basics">
<li><b>Full Name:</b>
<li><b>DOB:</b> 27 May 1985; 28 YRS </li>
<li><b>Birthplace:</b>Olinda, Brasil</li>
<li><b>Nationality:</b>Brazilian, French, & American</li>
</ul>
If I'm understanding your question correctly, you want the top to be horizontal, and the lower one to be vertical. I just changed your rule from .tabs li to ul.tabs li
http://jsfiddle.net/itsmikem/3RwMn/
Let me know if that's your issue.
I have an inline list that I am trying to get to "fill" the entire width of it's div.
If I use a margin-right on the list the last element will either not reach the end of the div (because it had the right margin) or the right margin will force it to go to the next row as it exceeds the width of the div.
Here is an excample of what I am describing.
http://i.imgur.com/9CJx7.png
my html:
<div id="footerstick" style="background:url(site_files/bg_shears.png) repeat-x; ">
<div id="footer_wrap">
<div id="footer_top_shelf">
<ul>
<li>Contact Us</li>
<li>FAQ</li>
<li>About Us</li>
<li>Distribution</li>
</ul>
</div>
</div>
</div>
my css:
#footerstick {
position: relative;
margin-top: -230px; /* negative value of footer height */
height: 230px;
clear:both;
}
#footer_wrap {width:980px; margin:auto;}
#footer_top_shelf {height:70px; overflow:hidden; }
#footer_top_shelf ul li {display:inline; list-style:none; color:#c7c7c7; font-size:30px; margin-right:85px; line-height:75px; text-transform:uppercase; font-family:myriad pro; }
Write like this:
#footer_top_shelf ul li + li{
margin-left:85px;
}
Try below css - after seeing your image and as per your requirement, if i am getting your problem correct the this updated css should help you.
#footerstick {
position: relative;
margin-top: -230px; /* negative value of footer height */
height: 230px;
clear:both;
}
#footer_wrap {width:980px; margin:auto;}
#footer_top_shelf {height:70px; overflow:hidden;}
#footer_top_shelf ul
{
margin:0;
padding:0;
text-align:center;
}
#footer_top_shelf ul li {
display:inline;
list-style:none;
color:#c7c7c7;
font-size:30px;
margin:0px 40px;
line-height:75px;
text-transform:uppercase;
font-family:myriad pro;
}
Note: Can you show your real time code, so we can identify easily how your code working and where you are facing problem.
What is the effect of inline and block and inline-block and floating to width and height?
For example take look at below css menu :
ul
{
list-style-type:none;border-style:solid;border-width:1px;border-color:Blue;
padding:0px;
display:inline-block;
float:left;
}
ul li{display:inline;}
ul li a
{
/*display:inline-block;
float:left;*/
display:inline-block;
float:left;
background-color:rgb(100,170,110);
color:Yellow;
text-decoration:none;
height:30px;
padding-left:20px;
padding-top:5px;
padding-right:20px;
}
ul li a:hover{background-color:Yellow;color:Red;}
I have corrected that for both IE and Firefox with adding below codes for ul:
display:inline-block;
float:left;
Is it true that for a inline tag the height=0?
Is it true for the left floated tag , it width is the maximum widths of it's children ?
Why block elements (such as menu items) will have some margins with their next items?
You'll get some goofy stuff with inline-block with IE. You might have better luck setting tha a's to block and float the li's. Try the code below
HTML
<nav>
<ul>
<li>Home
<li>About
<li>Contact
</ul>
</nav>
CSS
ul { margin: 0; padding: 0; }
li { float: left; }
a { display: block; padding: 5px; margin: 0 5px; }