I'm having a problem similar to the one described here (without a resolution):
IE7 float and clear on the same element
The following HTML renders as intended in Firefox but not in (both) IE7 and IE8:
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
clear: both;
padding: 5px;
}
.left {
clear: left;
float: left;
}
.middle {
clear: none;
float: left;
}
.right {
clear: right;
float: left;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li class="left">2</li>
<li class="right">3</li>
<li class="left">4</li>
<li class="middle">5</li>
<li class="right">6</li>
<li>7</li>
</ul>
</body>
</html>
This is a form layout, and in Firefox the results appear like:
1
2 3
4 5 6
7
That's what I'm going for. In IE7 and IE8 however, the results are:
1
2 3 5 6
4
7
[Note: I don't want to float anything to the right because I want the fields on my form to left-align correctly, without a giant space in-between the floated fields to account for the parent container's width.]
Apparently I need a full clear, and can probably add an empty list-item element to the list to force clearing, but that seems like a dumb solution and sort of defeats the purpose.
Any ideas? I've spent a few hours reading and trying different options without success.
Try this, demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>list floats</title>
<style type="text/css">
li{clear: none;list-style: none}
.clearer{float: left; clear: left}
.floater{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="clearer">2</li>
<li class="">3</li>
<li class="clearer">4</li>
<li class="floater">5</li>
<li class="">6</li>
<li class="clearer">7</li>
</ul>
</body>
</html>
You can simply use a <br class="clear" /> with a br.clear{ clear: both; }
I sort of agree with the table option. But, you can do it with an empty list item. This would let you get rid of the 'clear' attribute in the 'right' and 'middle' classes. You would also need a 'solo' class for the single item to be sure it clears both ways.
.clear {
clear: both;
margin:0px;
padding:0px ;
font-size:1px;
}
.solo {
clear: both;
}
<li class="solo">1</li>
<li class="left">2</li>
<li class="right">3</li>
<li class="clear"></li>
try following code. much simpler but a little hard to understand!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li{list-style: none}
.float{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="float">2</li>
<li class="">3</li>
<li class="float">4</li>
<li class="float">5</li>
<li class="">6</li>
<li class="float">7</li>
</ul>
</body>
</html>
Related
I'm building a css dropdown menu and have been unable to get the submenus to appear below their respective parent li elements. I've tried a bunch of the solutions suggested in response to similar questions but have been unable to get them to work.
Here's a sample of the menu I'm building:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>
And here's the css:
#menudiv {
text-align:center;
}
ul.menu {
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover+ul.submenu {
display:block;
}
I can move the submenus around by adding things like right:50px; to ul.submenu, but that moves all the submenus to the same location.
What am I missing here? Thanks!!
Here's a Fiddle.
First of all, the following markup structure :
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
is incorrect. It should be :
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
Secondly, you could use a CSS reset for ul,li elements. For the sake of simplicity I've used :
* {
margin: 0;
padding: 0;
}
Now, coming to your question. the following classes needs to be changed :
.menuitem:hover+ul.submenu {
display:block;
}
to
.menuitem:hover > ul.submenu {
display:block;
}
and
ul.submenu {
display:none;
position:absolute;
top:0px;
right:50px;
}
to
ul.submenu {
display:none;
position:absolute;
}
You can then modify the following class (so that the child ul elements "fits-in" to the parent li):
li.menuitem {
position:relative;
display:inline-block;
}
to
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
In summary, I guess this is what you are looking for :
* {
margin: 0;
padding: 0;
}
#menudiv {
text-align:center;
}
ul.menu {
display: inline-block;
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover > ul.submenu {
display:block;
}
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper
<ul class="submenu">
<li class="subitem">Round 2</li>
<li class="subitem">Sheet 2</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
Hope this helps!!!
Try placing the <ul class="submenu"> inside the <li class="menuitem">. Then set the <li> to position:relative; and set the <ul> to position:absolute;left:0;. This will position the <ul> relative to its parent element, the <li>.
Here's a codepen example: http://codepen.io/anon/pen/WQdMjX
Your markup is incorrect for nesting a sub-list.
You're doing this:
<ul>
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
</li><!-- correct, though li is already closed -->
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
<!-- needs closing li here -->
<li>text</li>
</ul>
Instead do this:
<ul>
<li>text
<ul>
<li>sub</li>
</ul>
</li>
</ul>
Then update your CSS selector from .menuitem:hover + ul.submenu to .menuitem:hover > ul.submenu as you're no longer selecting a sibling element (+) but a child element (>).
You'll need to fine tune the positioning of your sub-menus from here but this should get you where you need to be.
Remember, when you are developing menus you need to make sure the link content is inside anchor tags, including the links at the top level navigation that launch the subnav. That way these links are natively focusable. You want to be able to reach these menu elements with a keyboard only since many with arthritis, Parkinson's disease, etc. may be unable to use a mouse (and you won't want to use tabindex to mimic this behaviour since screen-readers will look for anchor tags.)
There was a similar StackOverflow question yesterday: Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?
You can also Bootstrap Dropdown CSS in a normal case too.
HTML
<ul style="padding-left:0;">
<li>A journey in to the digital</li>
<li>Global thought leaders</li>
</ul>
HTML browser support this ul padding-left. So there is no issue in browser. But in Gmail that padding-left style not working. How to fix that issue.
try Float:left or give margin-right: % or padding-right: %;
Wrap each bullet in a table-cell using a pseudo element.
ul{
display: table;
margin-left: 0;
padding-left: 0;
list-style: none;
}
li{
display: table-row;
}
<head>
<style type="text/css">
ul.c1 {padding-left:0;}
</style>
</head>
<body>
<ul class="c1">
<li>A journey in to the digital</li>
<li>Global thought leaders</li>
</ul>
</body>
So I've just started with HTML/CSS, and I decided to start with something simple, like a nav bar. But the thing is all the tutorials online only go up to this point (below code) and completely ignore how to put a space between each list item. I've tried adding width, but it makes an uneven space. Could someone please show me how to do this? Thanks!
Here's my code; a working model is here
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bannercontent">
<ul id="banner">
<li id="bannerlinks"><a id= "links" href="#">What We Do </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Pricing </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Contact Us </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Wholesale</a></li>
</ul>
</div>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Quicksand:300);
#bannercontent{
font-family: 'Quicksand:300';
text-align: center;
font-size: 25px;
}
#banner{
list-style-type: none;
margin: 0;
padding: 0;
}
#links{
text-decoration: none;
}
#bannerlinks
{
display: inline;
}
Use a margin value on li elements:
li { margin-right: 20px; }
This will add a space of 20px between all li elements.
DEMO
Please note: ids are supposed to be unique, classes are made for adding the same style to similar elements, so instead of <li id="bannerlinks"> it should be <li class="bannerlinks">. In your CSS you need to update #bannerlinks to .bannerlinks.
I will second the concept of class usage over id.
For the purpose of your question, I did not change that, but was able to get results using a padding on your bannerlink elements:
#bannerlinks
{
display: inline;
padding: .5em;
}
You can tweak the number to set spacing as wide as you want, for example 5em forced it to multiple lines in the JSFiddle window.
I am trying to fix a horrid nested table layout for a site. The page will have a variable number of elements that leverage Google charts. Instead of complex spaghetti code that tries to lay things out inside of table cells I want to use a horizontal UL so the content blocks will lay out cleanly regardless of the charts involved. The problem I am having is the Google charts components leverage tables. When a table element exists anywhere inside a LI the LI gets moved to the next line (assuming because table elements by default have a newline before and after).
I have tried the various display modes for the table with no luck. Is this a lost cause?
Example HTML code to illustrate the issue:
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
}
</style>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Set display: inline-block; on your LI elements; that should do it nicely. It doesn't really work in Firefox 2, but nobody uses Firefox 2 anymore. You'll need to specify a doctype to get it to work in IE.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#navlist li {
display: inline-block;
zoom: 1;
*display: inline;
list-style-type: none;
vertical-align: middle;
}
</style>
</head>
<body>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Well, this seems too easy to be true, but I tried it and it worked in FF. IE still displays half the tags on the second line, but it could be a simple fix. All I did was add float: left to the styles for the three tables.
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
float: left;
}
</style>
<ul id='navlist'>
<li>TEST1</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green; float: left;'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Yes it's because tables are by default block elements (well, actually display:table but it acts in a similar manner). If your tables are very simple then adding display:inline to them may work.
Otherwise your best bet is to float each list element to the left:
#navlist li {
float: left;
list-style-type:none;
}
I'd suggest applying a set of drop-down menu type styles to your display, this does carry the disadvantage of complicating your mark-up slightly, but makes it easier to hide/display the tables at appropriate times. It also lets you have larger than one-row/one-cell tables.
If you need them to be visible at all times, though, then this approach isn't applicable. Regardless, I've posted a demo of my suggestion on jsbin.com
<div id="navigation>
<ul class="navlist">
<li><img src="images/btn1.gif"/></li>
<li><img src="images/btn2.gif"/></li>
<li><img src="images/btn3.gif"/></li>
</ul>
</div>
How would I be able to give these "buttons" within the list rollover states without using JS? I'm totally drawing a blank...
These links must be images.
If you're supporting newer browsers (browsers that support the :hover selector on all elements, which is basically everything except IE6, see here) you can do this with CSS provided you change your HTML. You will need to remove the img tags, and instead use background images.
CSS (this is the simple example with 2 images, you'll need to set the height + width. If you have many different images, you'll need a css class for each of them):
<style type="text/css">
.navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
.navlist li:hover { background-image: url('images/image2.gif'); }
</style>
HTML:
<div id="navigation">
<ul class="navlist">
<li></li>
<li></li>
<li></li>
</ul>
</div>
There's a lot of ways to do this. Basically, move one image off the screen when you hover. Or you could change the z-index of two images on top of each other when you hover, or you could do it with background images, or with the display option.
I prefer using the display option, since the CSS is quite simpple.
Since it's done with classes you can just add as many buttons as you want.
Here's the code for a page that contains the HTML and CSS together.
The DOCTYPE declaration is necessary to make it work in IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
a img {
border:none;
}
ul {
list-style-type: none;
}
img.defaultSt {
display: inline;
}
img.hoverSt {
display: none;
}
li:hover img.defaultSt {
display: none;
}
li:hover img.hoverSt {
display: inline;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="navlist">
<li>
<img class="defaultSt" src="http://mrg.bz/vh60HV" />
<img class="hoverSt" src="http://mrg.bz/CcDOmL" />
</li>
</ul>
</div>
</body>
</html>
You could try using a transparent image as the link primary and then use css to alter the background
<style type="text/css">
a.img1, a.img1:link { background-image: url(images/btn1.gif); }
a.img1:hover { background-image: url(images/btn1_over.gif); }
a.img2, a.img2:link { background-image: url(images/btn2.gif); }
a.img2:hover { background-image: url(images/btn2_over.gif); }
a.img3, a.img3:link { background-image: url(images/btn3.gif); }
a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>
<div id="navigation>
<ul class="navlist">
<li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
</ul>
</div>
You just have to keep in mind the size of the images in question.