Unordered list won't align properly inside a div - html

I'm making a NavBar out of images.
The images are inside a list item li which is inside an unordered list ul which is inside a div.
The problem I'm having is that when I make an unordered list displaying inline, it doesn't align to the left of the div like it should, it starts about 40 pixels in. I tried setting position:absolute;left:0; on the ul but it doesn't make a difference.
position:absolute; is supposed to make it align relative to its parent element, but it's not doing that.
Here is a JSFiddle displaying the problem.
(The red block is the div, it's red just to show you where the side of the div is so you can see how far off the ul is)
Is there something I'm missing? Why does the image start 40 pixels to the right of where it should?

CSS
#navbar ul{
position:absolute;
left:0px;
margin:0 0 0 0;
padding: 0 0 0 0;
}

You need to add padding: 0;
#navbar ul{
padding:0;
}
Also, 2 things you might want to look into that will cause you similar problems:
1) Inheritance
Inheritance is something where if you don't specify certain values, it will simply take the value of the same elements from the parents.
2) CSS reset
All browsers have their own default values for certain things. you want to make sure that you reset some of those values, if you want full control. It will likely impact the speed of your website loading minimally.

ul and other lists have 40px padding-left by default, in older IE it is margin, so just remove padding and margin.

Related

UL code on front page display is pushing down the last LI element in Chrome

I started a new job this week and one of my duties will be fixing/updating the website.
Our front page has six floated elements with mouse behaviors wrapped in a UL. In Firefox and IE, it appears just fine.
In Chrome, the last li element is lower than the others by about 20 or so pixels (I tried removing the style that was on the "last" element which changed the top margin (-18), but it didn't change anything).
The site is at rlba.com. If anyone has any suggestions, I'd appreciate it.
To answer your question...
Set #flashContainer2 ul, line 274 in your styles.css file, to have a width of 942px and a display of block. This will correct the behavior you are experiencing.
But please listen to j08691 and alireza safian in your comments and fix your question so that other people can learn from this.
There is no reason for your ul to be display:inline, especially if you have a defined height, so remove your display attribute and let it be the default (display:block;).
Then remove the default browser padding on the ul to have it be flush with the left side of your site's content container.
#flashContainer2 ul {
width: 940px;
height: 420px;
/* display: inline; - remove this */
padding: 0; /* add this */
}
And lastly, your li tags in the ul are 155px wide with padding-right of 2px (so the li is effectively 157px) but the ul is 940px wide. 157x6 = 942px. So you could either remove the width on "#flashContainer2 ul" so it grows to the container and becomes 942px wide, or remove the 2px padding from the last element so all of the li's fit in the ul.
#flashContainer2 .lastInList {
padding-right: 0; /* add this */
}

CSS <ul> - <li> menu: <a> element width height setting

I am trying to solve this issue for a few days now. I am unable to place the Child1, 2 and 3 between the 25px orange spot. The parent and child menu is a CSS based ul - li menu, where I set the <a> as an inline-block and set the width and height but it still ignores those parameters. I am out of ideas on how to solve this matter. Thank you for your help in advance.
Due to the length of the code I decided to upload the "whole" source code:
source.zip
The problem is that your <a> tags on the sub-menu have the padding:15px from the main menu. You will need to set it to 0. You can then set the line-height of the element to match the orange bar's height to center it vertically.
Add this to fix it:
#header .cssMenuA a{
padding:0;
line-height:25px;
}
It looks like the Child 1, 2, 3 a tags have padding applied to them, which is pushing them down past the orange. See screenshot:
Try removing the padding from the a tags (bodystyle.css, line 78), and reapplying it only to the parent menu items.
You have 15px of padding around all of the <a> elements in the nav list (including PARENT), but this also applies to the "Childs." Add the rule:
#header li li a {
padding-top: 0;
}
This may not look exactly like you want because the <a> is set at 25px high, but the font is smaller than that. Also add
#header li li a span {
line-height: 25px;
}

Setting a Fixed Size for CSS Menu Items

I am trying to assign a same size (Width) to all items inside in side a CSS powered Horizontal Menu Nav. as you cab see from the linked example the "li" size is rendering based on the length of the strings inside. Now my question is how I can set a fix size for items (For example: 80px for all)?
Can you please take a look at following example:
http://jsfiddle.net/Behseini/hBDv9/
I also would like to know how I can center the Menu bar in box(div)
Thanks for your time and comments
Set the width on the "a" elements.
http://jsfiddle.net/hBDv9/2/
You can also apply text centering on the "a", if you need that.
Add width: 80px; to #nav li a and #nav li a:hover.
To get the li elements the same size you need to use:
#nav li {
display:inline-block;
width:80px;
}
To center one element inside of another:
div.wrapper { width:100%;}
div.wrapper .centered {
display:inline-block;
width:80%; // or whatever you want it to be
margin: 0 auto;
}
Does this help?

How to remove the gap between each list-item in an unordered list?

Whenever I create a Unordered List, A gap remains below each of the list items.
What can I do to remove this?
Already tried
margin : 0
and padding : 0 on both ul and li. The CSS reset of
*{ margin : 0; padding: 0 }
also doesn't seem to work.
The gap can be usually removed in case of a horizontal list. But I'm at a loss how to accomplish this when I want a vertical list.
#j08691 #developdaly : I've placed images within each of the <li>.
Could that be the problem ? – maxxon15 6 mins ago
Yes. Yes, it could.
Add this CSS to remove the gaps:
img {
vertical-align: top;
}
The gaps aren't below each li, they're below each img.

css issue with line spacing between text with there is more than two lines, ie7

In compatibility mode for ie7, I am noticing a weird spacing issue for internet explorer 7. I have a joomla news feed arranged as links within a series of vertical list items. For some reason, the white space height between each line of text seems to be variable. Here is the url of the page in question, www.galloplaw.com. What could I do or set to fix this issue?
Even if you don't give any padding or margin to ul, li in every browser it takes some default margin and padding.
And the amount is different in different browsers.
So you need to do one thing, i.e reset the margin and padding.
Either use
*
{
margin: 0;
padding: 0;
}
to reset the margin of every element in the page or use
ul, li
{
margin: 0;
padding: 0;
}
to reset the margin of ul and li element only.
After resetting it you can give your custom margin and padding.
Hope this will help you.
I'd highly recommend using a true CSS reset like Eric Meyer's reset or Normalize CSS, but it maybe a little bit late in your project for that.
The problem here may be that, on your news li tags, you have top and bottom margins. In recent browsers, the bottom margin of one li will merge with the top margin of the following li. Not in IE7. You could remove the top margin from your li by deleting the following on line 475 of your css :
.latestnews li {
margin-top: 10px;
}