I have an issue where I have a set of href's floating next to each other. This looks fine in all browsers except the old IE versions in which the first link sits higher than all the other links.
CSS:
.google_pager
{
width:500px;
white-space:normal;
padding:20px 0 10px 0;
font-weight:bold;
font-size:1.1em;
overflow:auto;
}
.google_pager span
{
background-color:#6699C9 !important;
padding: 2px 6px;
color:#FFFFFF !important;
float:left;
height:0;
}
.google_pager a
{
padding: 2px 6px;
text-decoration:none;
float:left;
height:0;
}
A selected pager link becomes a span instead of a link.
All help is welcome!
I had this problem as well with PHP generated lists. Not sure if this is your exact problem, but ensure that your closing ul tag is on a new line. For example I used this line of code for my last li,
echo "<li><a href='#'>link</a></li>\n";
Sounds weird, but my problem looked the exact same as the example image you provided.
(P.S.) I realise this question was asked 6 months or so ago, but hopefully someone else will find this useful, as it was rather frustrating for me until I stumbled on the solution by accident!
Though I couldn't reproduce the issue without having your HTML, try applying display: block to .google_pager span and .google_pager a.
P.S. Also, any particular reason you are specifying zero height?
This is the best (being semantic) pattern for link lists. Follow this and they will work fine:
<div class="pages">
<ul>
<li>First</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>Last</li>
</ul>
</div>
CSS:
.pages ul, .pages li {
list-style=type:none;
padding:0;
margin:0
}
.pages li {
display:inline-block
}
Related
I got strange problem with different rendering of one simple nav/menu. Here is code:
HTML:
<nav id="navigation">
<ul>
<li class="active">HOME<br><span>What we do</span></li>
<li>ABOUT<br> <span>Our expertise</span></li>
<li>SERVICES<br><span>Our products</span></li>
<li>WHY CHOOSE US<br><span>Our promise</span></li>
<li>NEWS<br><span>Updates</span></li>
<li>OUR CHOSEN CHARITY<br><span>Great Ormond Street</span> </li>
<li>CONTACT US<br><span>Get in touch</span> </li>
</ul>
</nav>
Relevant CSS:
#navigation {
width:100%;
clear:both;
background-color:#a9218e;
height:72px;
}
#navigation ul {
width:894px;
height:72px;
list-style-type:none;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
#navigation ul li {
display:block;
float:left;
text-align:center;
padding:10px 22px 0 22px;
margin:0;
height:72px;
box-sizing:border-box;
}
#navigation ul li:last-child {
padding:10px 20px 0 19px;
}
#navigation ul li a {
color:#fff;
text-decoration:none;
width:100%;
height:72px;
font-size:15px;
font-weight:400;
}
#navigation ul li.active {
background-color:#00837e;
}
Test link: http://bybyweb.com/hygeineco/
Well... In Firefox, menu is perfect, it fits container's size (894px). However, in Chrome and IE11 (and i guess lower IE versions), one item is pushed down. So, i guess that there is no space for that item (contact) because of paddings. I've tried to resize container, or to reduce padding, and rendering difference is ~2px, between Chrome and Firefox... With container width of 896px - all is working fine in Chrome, in IE11, anyway, container width should be at least 903px?! What causes these strange differences? I guess that chosen google font rendering is different in every browser. How to solve this issue?
Add This Code Where Ever You Used box-sizing:border-box; :
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit- is for Safari And Chrome
-moz- is for Mozila (but in your case , the browser could understand it without -moz- )
-o- for Opera and -ms- for IE ;
Almost solved it by using display:table for ul, and display:table-cell for li elements... However, now i just have to remove margin/padding at the bottom.... :)
EDIT: background image position was in question... so, now is perfect. Good old tables - still the best solution for some things. :)
EDIT2: I would remove this question, but i am sure it will help to someone who have similar situation. Conclusion -> when you have menu with different widths of/for every menu item, BUT if you want to place that menu inside fixed width container, setting of right/left padding to li elements (menu items) is obviously not the best solution. Display: table, and display:table-cell is the best (and maybe only?) possible solution.
I've tried unsuccessfully to fix this for the last few days:
the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)
after the first time the page is loaded it loads fine
as you can see on the screenshot I've already put
.myCustomNav ul
{
padding: 0px !important;
}
the dropdown menu is called like this:
<div>
<ul class="myCustomNav nav">
<li>
<a .../>
</li>
</ul>
</div>
any idea what's wrong?
you can test for yourselves on http://istore.titus.biz/lovelovelove/#
Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.
.horizontal-category a:link,.horizontal-category a:visited{
color:#96979D;
padding:4px 6px;
display:inline-block;
font-weight:bold;
border-right:1px solid #ec008c;
/*background:#09C;*/
}
Invalid solution - Comments below
You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.
CSS
.dropdown-menu li {
display: block;
}
If you want to test this do this:
.dropdown-menu li {
display: block !important;
}
That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.
changed
.myCustomNav li{ display:inline;}
to
.myCustomNav li{ display:inline-block;}
and it worked, just needed a few extra tweaks to position it then
I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
I would like to know how to make an element with a hanging indent, along with a hidden overflow that does not hide said indent.
This demonstrates my problem:
http://jsfiddle.net/Skofo/qgd2p/
Thank you!
Based on your fiddle, swap the margin-left: 15px; for padding-left: 15px; on your li elements.
I've only checked this in chrome, mind. You might have to set box-sizing to something consistent to make it work cross-browser, like box-sizing: border-box;
Please see this fiddle: http://jsfiddle.net/saSna/
Is this the result you want to achieve?
I've added 15px padding to li, and removed :first-child so both ul's have the same styles:
ul li {
width:120px;
text-indent:-15px;
margin-left:15px;
margin-bottom:10px;
padding-left:15px;
}
ul li {
overflow:hidden;
text-overflow:ellipsis;
}
I would like to align the text and input in the LI to be horizontaly aligned with the menu on the left. Here how it looks.
I need the newsletter to be align with the menu on the left.
CSS
#footer .div1{
float:left;
}
#footer ul{
list-style:none;
}
#footer li{
float:left;
padding-left:20px;
font-size:18px;
}
#footer li:first-child{
padding-left:0px;
}
HTML
<div id="footer">
<div class="div1">
<ul>
<li><b>WE ♥ TO NETWORK</b></li>
<li>FACEBOOK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>NEWSLETTER : <input type="text" name="email" id="emailNl" style="font-family:arial; width:200px; margin:0px; padding:0px;"/> <span id="submitNl" style="cursor:pointer">OK</span></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
Thanks
IMAGE UPDATED!
With padding and margin 0px it's almost there but you can notice a slight difference. :S
UPDATE 2
By changing the float:left of my LI to display:inline-block, now the text is align but the input seems to be like padding-top 2px too much ... I think i'll tweak this to make it fit and see through each browsers.
Your problem is caused by float: left;. Replace it with display: inline-block; and you'll be fine.
Try it yourself: inline-block vs float:left
Try putting it in a jsfiddle. It looks to me like the input tag is trying to put some padding/margin (oh how I always forget which is which) around itself. Try setting those to 0px.
try reset the padding and margin of the element and try vertical-align property - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
although, I tested, they align just perfectly as it is. below is the preview from firefox
You can try
#footer ul {
list-style: none outside none;
margin: 0;
overflow: auto;
padding: 0;
}
input[type=text]{
padding:0;
margin:0;
}
see if it works.
Don't know if this will look good but this sure does the job.
#emailNl{
margin-top:-3px;
}