I have the following code:
http://jsbin.com/egiju4
That works a treat on FF and chrome, but shows all the blocks aligned in IE.
I've made loads of changes to it, but can't get it to work at all.
Would anyone please be able to give me some help with it?
Thanks in advance
Add width css rule to encapsulating div.
#block_selector {
padding: 10px;
float: left;
width:400px; /*this*/
}
Add clear:left or clear:both to your "selectable" class to clear the floats on the list items.
Set overflow:auto on the UL elements:
.selectable { list-style-type: none; margin: 0; padding: 0; overflow:auto; }
Update:
I am not sure which versions of IE have problems if you don't additionally define a width on the UL elements, but just to be safe, you can always set width:100%:
.selectable { list-style-type:none; margin:0; padding:0;
overflow:auto; width:100%; }
Add clear: left; rule to .selectable:
.selectable { list-style-type: none; margin: 0; padding: 0; clear:left; }
This will ensure each <ul> clears any floated elements before it.
Related
Here's link to the code JsFiddle
The problem is when mouse over the <ul> in "service & support" , the <li> below it didn't go down,
Can someone help me fix it????
thanks
Please look at this JsFiddle.
Some alterations in the css of:
#menu li {
height:auto;
float:none;
clear:both;
width:89%;
min-height:60px;
height:auto;
margin-left:5.5%;
border-bottom:thin solid #f8aa5a;
padding-bottom:15px;
This includes the use of height: auto;
as well as using padding instead of margins.
I have created one Fiddle based on your jsFiddle.
I made some change in jquery and css.
Added in your css.
#menu li > ul{
float:left;
width:100%;
}
and made some other changes.
your fault because you put the height of li 53px, and it should be min-height.
#menu li {
border-bottom: thin solid #f8aa5a;
clear: both;
float: none;
margin-bottom: 12px;
margin-left: 5.5%;
min-height: 53px;
width: 89%;
}
#menu ul{
.
.
.
.
top:2px; //instead of 5..
}
I have added some code in your jsFiddle.
http://jsfiddle.net/wayzz/vrf4jxpy/2/
Using animate() I have added margin-bottom so it looks like the whole li is animating down.
You can find comments on where I added or changed the code. :)
I Have a List which isn't diplaying like a list, I want every <li> to be under the other, just like a standard list.
Here is an example fiddle:
http://jsfiddle.net/w5tZ3/
#settingNev li {
display: block;
margin: 0;
padding: 0;
clear:both;
}
add clear both to show as list
If you don't want the list in horizontal way, please don't use float:left;
Clearing floats is your Answer Use clear:both; Or overflow:hidden
#settingNev li {
overflow:hidden /*Add this to the make li in flow*/
display: block;
margin: 0;
padding: 0;
}
For more Detail Refer This
Remove float: left; from a and span styles
I added the following patch to your CSS.
#settingNev ul {
display:table !important;
}
#settingNev ul li {
display:table-row !important;
}
Here is the entire code mate:
http://jsfiddle.net/w5tZ3/9/
I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE.
This is the only affecting css:
#header ul
{
display: inline;
}
#header ul li
{
list-style-type: none;
background: #000;
display: inline;
margin: 0;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
And this is the HTML:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
</div>
As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...
That's no moon...i mean...margin.
What you're seeing is the white space between your elements. Inline-block treats the elements as inline, except they have heights, widths, margins, paddings, etc. What happens is the newline + spacing you've given your html elements for nice indentation is being displayed as a space between the elements.
inline-block is also not cross-browser consistent. I'd suggest using display:block; with floats.
Edit to add suggestion:
If you want nice indents, but want to avoid extra white-space (as in all XML data ever), use what I call the "fishy notation"
Instead of:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
Use:
<div id="header"
><ul id="toplinks"
><li>Hello</li
><li>Herp</li
><li>Derp</li
></ul
></div>
White space contained by elements is preserved, but white space within elements is not.
Time to whip out that CSS Reset! I first include this, and then start designing. It makes it much easier, as most HTML will look identical cross-browser.
But to fix your problem, I would check if there is a stray border property somewhere. I've had rogue borders before, and they drove me mad. To kill it (for now), try this:
border-style: none;
If we had the complete CSS (don't worry, we don't steal it), I could actually fiddle with it and give you a fully functional answer.
change your CSS to
#header ul
{
display: inline;
}
#header ul li
{
float:left;
background: #000;
margin-left: 1px;;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
I have a navigation bar at the top of a page. In FF and Chrome the navigation bar displays fine. However in IE8 (with or without compatibility) the UL seems to indent from the left hand side, not each li just the whole li; despite declaring
text-align:center; width:600px; margin:auto; padding-left:0;
Any ideas what could be causing this?
margin-left:0px;
In Firefox the UL is padded left by default, in IE it has a left margin.
Example:
<html>
<head>
<style>
ul{
border:1px solid red;
margin:0px;
list-style:none;
padding:0px;
}
li{
border:1px solid green;
margin:0px;
}
</style>
</head>
<body>
<ul>
<li>this</li>
<li>that</li>
<li>these</li>
<li>those</li>
</ul>
</body>
</html>
I just used ul { list-style-position:outside; } to fix the indent in IE.
I think it should be:
ul { padding: 0; margin: 0 }
li { padding: 0; }
Using list-style-position:outside; specifically for IE6/IE7 worked for me. However, note that this may only be necessary if you're using list-style-position:inside; for other browsers and simply hiding the default list margin/padding by setting them to 0. Working with IE requires some finesse, and a lot of browser-specific CSS.
I am trying to create a very simple "no-frills" tab using html & css. For this, I have a bunch of li elements and inside each of these, there is a "a href" element. Now, when i look at the output in IE & Firefox (after setting the styles to make the list display horizontally with proper border and everything), I can see that the "a" element overflows the "li" element. How do i make the "li" element resize based on the "a" element?
CSS and html as follows
#tabs ul
{
list-style:none;
padding: 0;
margin: 0;
}
#tabs li
{
display: inline;
border: solid;
border-width: 1px 1px 1px 1px;
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
}
#tabs li a
{
padding: 0 1em;
text-decoration: none;
color:White;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
You forgot the "#" in the CSS declarations. You've an id="tabs" in you html code which needs to be referenced as
#tabs {
....
}
in the CSS. The rest is fine-tuning ;)
And try
#tabs {
display: inline-block;
}
instead of the display: inline;
Try settings the the display on the li element as "inline-block".
http://www.quirksmode.org/css/display.html
give style to anchor as
display:block
I give
display:block
to both the li and a tags. Then float the li. You can add this code to make the li enclose the a completely:
overflow: hidden; zoom: 1; word-wrap: break-word;
This will clear anything inside.
You could also simply give your li's some padding:
#tabs li {
padding: 8px 0 0;
}
Inline-block is a good way to go (as suggested).
But if you want this to be cross-browser, you need to add som CSS-hacking "magic" :)
One very good tutorial on the subject is http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Using the method from that article, you'd end up with the following CSS:
/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
#tabs ul,
#tabs li,
#tabs li a {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: bottom;
margin:0; padding:0; /* reset ul and li default settings */
}
/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */
#tabs li a {
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
padding: 0 1em;
text-decoration: none;
color:white;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
Simply display:inline-block on both li & a did the trick for me man. Lists stretched to accommodate whatever I did with the links.