The image is the menu list items which displays vertically in IE7 but I want to display it horizontally. I am using smart wizard plugins (framestyle.css) which displays perfectly in all other browsers except IE7.
framestyle.css: this is the css for smart wizard plugins.
.swMain ul.anchor {
position:fixed;
z-index:1099;
display:inline;
float:left;
list-style: none;
padding: 0px;
margin: 5px 5px 0 0;
}
.swMain ul.anchor li{
position: relative;
margin: 0;
padding: 0;
padding-top:3px;
padding-bottom: 3px;
clear:both;
display:inline;
float: none;
}
.swMain ul.anchor li a {
display:block;
position:relative;
float:left;
margin:0;
padding:3px;
height:35px;
width:146px;
text-decoration: none;
outline-style:none;
}
IE7.css: this is the css for the menu list item for IE7 browser
.swMain ul.anchor {
display:inline;
position:relative;
list-style: none;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 10px;
zoom:1;
float:left;
clear:both;
}
.swMain ul.anchor li{
margin: 0;
padding: -10px;
padding-top:0px;
padding-bottom: 0px;
clear:both;
display:inline;
float:left;
}
.swMain ul.anchor li a {
display:block;
position:relative;
float:left;
margin:0px 0px 0px 0px;
padding:3px 3px 3px 3px;
text-decoration: none;
outline-style:none;
}
If you want something to display inline horizontally, you shouldn't have clear: both; in the first place, because that will put the floating items on a new line.
You should also remove the float: left; from .swMain ul.anchor li in your IE7 stylesheet.
For clarity, the following code will put your list-items inline horizontally:
li {
display:inline;
}
If you want to style the list-items with some padding and other fancy stuff, you can try inline-block, but this will cause a few issues with IE7. You will find a solution here.
By the way, I was required to support IE7 for some specific purpose projects, but in general you may very well drop IE7 support altogether.
Hope this helps.
Related
Relatively new to CSS, so please bear with my inexperience. I'm trying to create a menu, and after much searching and comparison and reading and copying, I've mostly come up with the format I want. The problem is that I want my menu to be the width of its content, not full width, and the code below (adapted from various examples) yields a full width menu. I've played around with things, but can't seem to identify what makes it full width or not -- it may be that what I want requires a more substantial rewrite.
In case it helps, what I want is a horizontal menu with an outer rectangular border, with width determined by its contents, not automatically full width (or even, not automatically a specified width).
This is my first time posting a question here, so thanks in advance for your help and patience!
<style type="text/css">
*/#menu ul,#menu li,#menu a{
list-style:none;
margin:0;
padding:0;
border:0;
font-family: Arial}
#menu{
border:1px solid #000000;
border-radius:5px}
#menu ul{
background:#ffffff;
padding:5px 10px;
border-radius:5px}
#menu ul:before{
content:'';
display:block}
#menu ul:after{
content:'';
display:block;
clear:both}
#menu li{
float:left;
margin:0px 0px 0px 0px;
border:0px}
#menu li a{
border-radius:5px;
padding:5px 10px 5px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
border:0px;
font-size:15px}
</style>
<div id="menu">
<ul>
<li><span>Link1</span></li>
<li><span>Link2</span></li>
<li><span>Link3</span></li>
<li><span>Link4</span></li>
</ul>
</div>
ul are block level elements are so are 100% wide by default.
Make the ul display as inline-block and it will collapse to the width of it's contents.
Add text-align to the parent as required. Here I used center.
#menu ul,
#menu li,
#menu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-family: Arial
}
#menu {
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
#menu ul {
display: inline-block;
background: lightblue;
padding: 5px 10px;
border-radius: 5px
}
#menu ul:before {
content: '';
display: block
}
#menu ul:after {
content: '';
display: block;
clear: both
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
border: 0px
}
#menu li a {
border-radius: 5px;
padding: 5px 10px 5px;
display: block;
text-decoration: none;
text-align: center;
color: #000000;
border: 0px;
font-size: 15px
}
<div id="menu">
<ul>
<li><span>Link1</span>
</li>
<li><span>Link2</span>
</li>
<li><span>Link3</span>
</li>
<li><span>Link4</span>
</li>
</ul>
</div>
I am trying to add a top arrow when someone mouses over a drop down menu item.
The problem is if I add some margin to the dropdown box - so it gets distance from the top and can get the arrow - when you try to mouse over the dropdown thing it disappears. because there is empty space.
Here is what I am talking about:
http://jsfiddle.net/jFWGS/
The "problem" starts at line 13.
nav ul li ul{
position:absolute;
display:none;
width:220px;
padding-left:3px;
margin:0;
margin-top: 14px;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.439);
}
Changing it to padding, instead of margin works... but it breaks the shadow.
I'd use a hidden :after pseudo element in order to allow the drop down to work properly as is
nav ul li ul:after {
top: -15px;
content: "";
display: block;
left: 0;
position: absolute;
height:20px;
width: 100%;
}
jsFiddle
Check this out: http://jsfiddle.net/jFWGS/10/
I changed it to padding like you said but added the box shadow to another pseudo element instead. It seems like it might be fragile if you add more sub menu items but you should just be able to tweak the height to get it looking right.
nav ul li ul{
position:absolute;
display:none;
width:220px;
padding-left:3px;
margin:0;
padding-top: 14px;
}
nav ul li ul:before{
content: '';
position:absolute;
top:14; left:0;
width:100%;
height: 85%;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.439);
}
nav ul li ul:after{
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 0px solid #fff;
top: 6px;
content: "";
display: block;
left: 4%;
position: absolute;
width: 0px;
z-index: 1;
}
This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
I am trying to push the child div down 5px inside of the parent div. When I put margin-top:5px; on the inner div it pushes down both the inner div and the parent div from the div above the parent div, but does not push the inner div down from the parent div. How to I set it so that only the inner div is pushed down 5px from the parent div? I do not want the parent div to push down from the div above it. Thanks for any help.
html for Navigation:
<nav>
<div class="nav-container">
<div id="cat_14623_divs">
<ul id="nav_14623">
<li><a href="#" onclick="return false;">AKINA & RED LAKE</a</li>
<li>FRESH WILD CAUGHT FISH
<ul id="navsub_14623_2326">
<li>WALLEYE</li>
<li>PERCH</li>
<li>CRAPPIE</li>
<li>NORTHERN</li>
<li>WHITEFISH</li>
</ul></li>
<li>NEWS FROM THE FISHERY</li>
<li>CONTACT US</li>
<li class="last">FAQs</li>
</ul>
</div>
</div>
</nav>
CSS for Navigation:
nav{
position:relative;
width:960px;
background-color:#660000;
height:40px;
}
div.nav-container{
position:relative;
width:100%;
}
#cat_14623_divs{
margin-top:5px;
height:30px;
background-color:#520000;
width:960px;
}
#nav_14623{
list-style:none;
display:block;
padding:0;
width:80%;
margin:0 auto;
}
#nav_14623 li{
position:relative;
float:left;
padding: 0.5em 1.5em;
margin: 0px;
font-size:12px;
border-right:solid 2px #fff;
text-align:center;
}
#nav_14623 li.last{
border-right:none;
padding-right:5px;
}
#nav_14623 li a{
color:#FFF;
text-decoration:none;
}
#nav_14623 ul{
position: absolute;
left:0;
top: 100%;
display: none;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
list-style: none;
margin-left: 0px;
margin: 0;
padding: 5px;
width:200px;
z-index: 1000;
background: #660000;
border-left: 1px solid #336699;
border-right: 1px solid #336699;
border-bottom: 1px solid #336699;
border-top: none;
}
#nav_14623 ul li{
position: relative;
float: none;
border-right: none;
padding:0;
margin: 0;
}
#nav_14623 ul li a{
color: #fff;
font-size: 12px;
vertical-align: middle;
line-height:32px;
width: 100%;
height:35px;
display:block;
}
#nav_14623 ul li a:hover{
background: #520000;
width: 100%;
}
#nav_14623 li:hover > ul{
display: block;
}
#nav_14623:after {
content: ""; clear: both; display: block;
}
Here is the url in case you want to see the site:
http://redlakewalleye.designangler.com/
Instead of a margin-top on the child, you should use a padding-top to the parent.
UPDATED (as a reaction on your comment)
A margin needs something to bounce on. Since the parent div has nothing to bounce on, it will bounce on the element above it. Therefor you should use padding.
The issue is collapsing margins when margins touch - http://www.sitepoint.com/web-foundations/collapsing-margins/
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle
for some reason my LI elements are not floated to the left in internet explorer, they are showed each below the other. Anybody knows how I could fix this?
#books ul{
list-style:none;
margin:0px;
float:left;
display:inline;
}
#books ul li{
float:left;
margin-right: 20px;
padding-bottom: 20px;
height:300px;
display:inline;
}
If I understand your issue correctly, it may have to do with setting display: inline. Changing to display:block; seems to solve the issue in IE and FF.
#books ul{
list-style:none;
margin:0px;
float:left;
display:block;}
#books ul li{
float:left;
margin-right: 20px;
padding-bottom: 20px;
height:300px;
display:block;}
There is no need to use float, if you just want each LI to be inline you can use just the display property.
#books ul{
width: 100%;
list-style: none;
margin: 0px;
}
#books ul li{
margin-right: 20px;
padding-bottom: 20px;
height: 300px;
display: inline-block;
}