my menu is working fine on the good browsers. The code is all valid (so far!). In IE though it looks like a staircase, each menu item is a few pixels down from it left neighbour. It should all be horizontal.
Please have a look here
alt text http://www.digiflipconcepts.com/images/bbdc-menu-anomaly.jpg
Apply display: inline to ul.menu li.
my first guess would be either padding or margin on your li elements. see if this helps:
li {
padding: 0;
margin: 0;
}
(spoke too soon, looks like you do have that in there)
on third glance, it looks like you're setting the following:
ul.menu li a {
display: block
padding: 11px 0 0;
}
see if removing that 11px padding helps
Related
I am trying to left align a list inside a css grid. However, the text-align and setting the margins and padding don't seem to work. How can I left align the ul list. Codepen: https://codepen.io/centem/pen/oNvZLgP Thankyou.
ul {
list-style: none;
text-align: left;
}
li {
padding-left: 0;
margin-left: 0;
}
Use the below CSS
ul{
padding-left: 2%;
}
You can accordingly change the padding value depending upon the requirements.
Also if you want your list items completely aligned to the left, get rid of the following padding line under the .grid-page > div selector:
padding: 0px 20px;
To complete Not A Bot's answer (it's always good to know why something works), the reason behind your issue was the default padding of unordered lists.
UL Default CSS Values
These values are there to make lists look like written documents lists but obviously, that's not what we want in many cases.
Usually, margins and paddings of elements should be reset. In your case:
ul {
padding: 0;
}
should be enough, since you're already setting a padding for the container.
Fixed it! I have added a negative left margin to the gRow class equal to the width of the surrounding container (in my case 744px). It seems to work both in Chrome and IE. It doesn't work in my fiddle though :-?
I have an unordered list depicting a tree-like structure. Each li contains a div element with class="gRow". This div contains other divs with "cells" in a grid. I would like to add a border-bottom on each gRow (or li?) maintaining the padding-left on the li but at the same time having the border-bottom to be the same width for all li/gRows (the entire width of the container).
I'm adding new levels dynamically using Ajax and I don't know the depth of the structure.
This is how far I have gotten:
My css is like this
ul {margin: 0;padding: 0;list-style-type: none;}
li { padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; margin-left: -744px;}
Here's a jsFiddle: http://jsfiddle.net/kJQeq/
Hope you can help.
Thanks in advance.
Try setting the margin to 0 on the li as well.
ul {margin: 0;padding: 0;list-style-type: none;}
li { margin: 0; padding-left: 16px;}
.gRow { border-bottom: 1px #CCD9E0 solid;height: 20px; }
I have added a negative left margin to the gRow class equal to the width of the surrounding container (in my case 744px). It seems to work both in Chrome and IE. It doesn't work in my fiddle though :-?
http://jsfiddle.net/vByVD/9/
This what i have. The menu looks right is horisontal in most browsers. But in IE7 and lower ofcourse it is something else, it is vertical there.
I found out this is because they dont support table, table-cell.
I tried some hacks as you can see in the first lines in the CSS, but it does not quite work, this do only show 3 li horisontal and then it makes new line and show the other li's.
I want it to appear as the other new browsers, so its one line horisontal.
How can i make this work?
There are two ways to accomplish this. The first:
#header-nav{
overflow: hidden;
zoom: 1; /* IE6 and below work around */
}
#header-nav li{
float: left;
margin: 0;
padding: 0;
}
#header-nav li a{
display: block; /* if you want height and width */
}
The second:
#header-nav li{
margin: 0;
padding: 0;
display: inline;
}
Personally I use the first of the two as it provides a bit more control for styling a block for color, width, height, margin, padding, etc. Plus, when you do a:hover the entire box is a link; not just the text. My recommendation is to not use tables. The results are unpredictable as you have seen. Not to mention, now its easier to add sub-menu's, using JQuery or CSS.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to
Might be a bit too early in the morning for me but I struggling to figure out what I've done wrong here.
I have a page with 9 boxes and I would like them to be positioned with 3 on one line, 3 on another and 3 on the other.
Have a look here: http://dev.tim-morgan.co.uk/other/Untitled-1.html
Right now you can see, the list bullets are showing and each box looks like it's going down like a staircase since I put in float: left;
Any ideas of what I'm doing wrong?
Thanks
You need to:
Move float: left from ul.tabs2 a to ul.tabs2 li.
Add overflow: hidden to .tabs2 to clear the floats.
Add clear: left to every 3n+1 li using :nth-child, try this:
ul.tabs2 li:nth-child(3n+1) {
clear: left
}
If you need to support Internet Explorer 8 and lower (no nth-child support), you can use http://selectivizr.com/, or just add the clear: left rule yourself to each relevant li.
You might want to remove the default styles on your <li>s, they could be interfering with the floating of the <a>s in the <li>s.
I’d suggest:
ul.tabs2 {
list-style: none;
}
ul.tabs2 li {
margin: 0;
padding: 0;
}
For getting three in a row, #thirydot’s answer looks good. If you know how wide you want each box to be, you could set that width on the <a>s, then set a width on the <ul>:
ul.tabs2 {
width: 300px;
}
ul.tabs2 li a {
width: 100px;
}
In your css add this
ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}
and also add overflow:hidden and list-style:none to your ul.tabs2 if you don't want bullets.