I have some pretty simple html
which is meant to make a layout as below.
To push the tabs down from the userbar I am using
margin-top: 35px;
However in internet explorer the tabs are completly misaligned(the top of the tabs is where the bottom should be).
So I need to use margin-top: -50px; for internet explorer.
Why is this and how can I fix it without using a ie specific stylesheet
layout example http://webspirited.com/layout.png
<div id="pageHead">
<div id="userBar">
<span class="bold">Hi Matthew Hailwood | Logout
</div>
<div id="pageTabs" class="clearfix">
<ul>
<li>Templates</li>
<li>Messaging</li>
<li>Contacts</li>
</ul>
</div>
</div>
With the css being
#pageHead {
height: 100px;
}
#pageLogo {
float: left;
width: 149px;
height: 77px;
margin-top: 11px;
background: transparent url('../images/logo.png') no-repeat;
}
#userBar {
text-align: right;
color: #fff;
margin-top: 10px;
}
#userBar a:link,
#userBar a:visited,
#userBar a:active {
font-weight: normal;
color: #E0B343;
text-decoration: none;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
#pageTabs {
float: right;
margin-top: 35px;
}
#pageTabs ul {
position: relative;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid #000;
}
#pageTabs ul li {
float: right;
background: url(../images/tabsBg.png) no-repeat 0% 0%;
border-left: 1px solid #000;
margin-left: -1px;
}
#pageTabs ul li a:link,
#pageTabs ul li a:visited,
#pageTabs ul li a:active {
color: #fff;
background: url(../images/tabsBg.png) no-repeat 100% 0%;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 42px;
text-transform: uppercase;
padding: 4px 32px;
text-decoration: none;
}
#pageTabs ul li a:hover,
#pageTabs ul li a:focus {
text-decoration: underline;
}
IE does not like negative margins, it tends to have discrepancies. Try using position instead, along with left, right, top and bottom - it's more compatible, from personal experience.
You may just be able to convert your whole page from margins to positioning with minor tweaks.
Try not using the html tag for any kind of styling. Use the body tag instead.
Also, try setting your pageHead to relative positioning, and then position the other divs via relative or absolute and using top, bottom, left, right, as MT mentioned.
xD Looks like I was a bit late. Sorry. :3
Related
I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
I'm trying to code a drop down menu where the hovered over list item displays a list of links horizontally.
What is happening with my code right now is that all the links are right on top of each other, and I can't for the life of me figure out how to fix them.
I've tried adding height and width, and then adjusting the padding, margins, you name it. Somehow using display: inline; hasn't been enough to accomplish this.
If anyone could help me out with this, that would be much appreciated.
<header>
<nav>
<div class="container">
<div class="wrapper">
<h1><img alt="logo" src="logosmall.jpg" />
<strong>New Ideas</strong>Education
</h1>
<ul>
<li>about us</li>
<li>teachers
<ul>
<li>Literature</li>
<li>International</li>
<li>Staff</li>
</ul>
</li>
<li>lessons</li>
<li>reviews</li>
</ul>
</div>
</div>
</nav>
</header>
And the CSS:
ul {
list-style-type: none;
display: inline;
}
header nav {
}
header nav ul {
background: #fff;
padding: 2px 0 0 0;
list-style: none;
position: relative;
float: right;
display: inline;
}
header nav ul:after {
content: "";
clear: both;
display: block;
}
header nav ul ul:after {
content: "";
clear: both;
display: inline;
margin: 0 20px 0 0;
}
header nav ul li {
float: left;
padding: 10px 20px;
text-transform: uppercase;
color: #757575;
display: inline;
}
header nav ul li:hover > ul {
color: #06cbe2;
display: inline-table;
padding: 5px 60px;
margin: 0 20px 0 0;
float: left;
position: absolute;
}
header nav ul li:hover a {
color: #06cbe2;
}
header nav ul li a {
display: inline;
color: #757575;
text-decoration: none;
text-transform: uppercase;
}
header nav ul ul {
background: #fff;
padding: 0px 20px 0px 0px;
list-style: none;
position: absolute;
float: left;
display: none;
}
header nav ul ul li {
position: absolute;
display: inline;
margin: 0 30px 0 0;
color: #757575;
text-transform: uppercase;
padding: 10px -60px;
font-size: 10pt;
}
header nav ul ul li a {
padding: 10px -60px;
color: #757575;
text-decoration: none;
text-transform: uppercase;
display: inline-table;
font-size: 6pt;
}
header nav ul ul li a:hover a {
color: #06cbe2;
}
firstly make sure where and how you wanted to display the controls, if you saying all controls are sitting on over the other then all those positions have same value, the css have same values for almost all ID and Class, I can give you and example to fix and it might help you to fix your problem
Imagine you need two dropdown list one is on left and one is on right side then do this
NOTE(its just an example)
<div id=Main>
<div id=left></div>
<div id=right></div>
</div>
now provide height and width as 100% to "Main", then provide css for "left" as below
#left
{
height:100%;
width:50%;
border:1px solid black;
background-color: #ffffff;
float:left;
}
#right
{
height:100%;
margin-left:50%;
border:1px solid black;
background-color: #ffffff;
float:right;
}
and inside to those div's use your dropdown controls or any controls and modify the width if you want, Let me know if it works, will help you
I have a sub navigation which is placed in two different places on different browsers, and I'm unsure why. I do realise that using margin-top instead of top does fix this but the problem with that is that I have a jQuery slide animation when the sub navigation comes out and it doesn't look nice when I use margin-top since it comes out further up than it is. Here is a picture of the difference:
http://jsfiddle.net/eAqev/ <-- JS Fiddle
HTML:
<div id="navigation">
<ul>
<li><h1>01. About</h1><h2>Learn about us</h2></li>
<li class="button"><h1>02. Products</h1><h2>View our selection of products</h2>
<ul class="scrollDown">
<li><p>Kitchen Worktops</p></li>
<li><p>Upstands/Splashbacks</p></li>
<li><p>Gables/ Panels</p></li>
<li><p>Glass</p></li>
<li><p>High Gloss</p></li>
<li><p>Bathroom Tops</p></li>
<li><p>Sinks/ Taps</p></li>
</ul>
</li>
<li><h1>03. Contact</h1><h2>Contact us!</h2></li>
<li><h1>04. Gallery</h1><h2>View photos of us</h2></li>
</ul>
</div>
CSS:
#navigation ul {
display: inline;
position: relative;
}
#navigation ul li {
float: left;
width: 200px;
height: 35px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}
#navigation ul li:hover {
border-bottom: 6px solid #eee;
cursor: pointer;
}
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0;
padding: 0;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
You made everything clear Just add the below codes.It will fix your problem
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0 !important;
padding: 0 !important;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
#navigation ul {
display: inline;
z-index:10;
position: relative;
}
Most probably IE7 will have a buggy environment. This will work fine with IE8+.
Demo
Hi now define your ID #navigation ul display:inline-block; than adjects your id #navigation ul ul in top
As like this
#navigation ul {
display: inline-block;
position: relative;
vertical-align: top;
}
#navigation ul ul {
top:48px;
}
Live demo
Different browsers have different default margin & padding on ul/li elements.
Have you tried resetting these all to 0?
#navigation ul, #navigation li {
padding: 0px;
margin: 0px;
}
Might be you should try css-reset? Just put it at beginning of your css
But it may mess layout so you will need to set some values by yourself.
Try this:
#navigation ul li {float: left;
width: 200px;
line-height:17px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}
So I'm working on a personal project and I'd like to add icon images to the left of each nav menu item. 3 things are bugging me;
I can't get the icons to sit left of the menu items
I can't get the icons to resize using the max-width property
I also need the icons to remain in place on hovering.
http://www.toastcafebar.com/nav/
<nav role="navigation">
<ul>
<a class="cinema" href="cinema.html">Movies</a>
<a class="tv" href="tv.html">T.V Shows</a>
</ul>
</nav>
...and the CSS
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px;
}
nav[role="navigation"] ul a {
width: auto;
margin: 0 50px;
font-size: 2em;
padding: .5em;
width: auto;
}
a.cinema {
display: block;
background: url(images/pop.png) no-repeat left center;
padding-left: 75px;
}
.tv {
display: block;
background: url(images/tv.png) no-repeat;
padding-left: 100px;
}
nav a:link, a:visited {
font-weight: normal;
text-decoration: none;
outline: none;
color: #000;
}
nav a:hover {
color: #999;
background: #666;
-moz-border-radius: .5em;
border-radius: .55em;
padding: .25em;
}
Any suggestions?
Cheers in advance
Your markup is a bit funky. If you have a <ul> element, you should only have <li> children.
HTML:
<nav role="navigation">
<ul>
<li><a class="cinema" href="cinema.html">Movies</a></li>
<li><a class="tv" href="tv.html">T.V Shows</a></li>
</ul>
</nav>
CSS:
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px; }
nav[role="navigation"] ul li {
font-size: 2em;
margin: 0 50px;
display: inline-block; }
nav[role="navigation"] ul a {
background-position: .5em 50%;
background-repeat: no-repeat;
text-decoration: none;
outline: none;
color: #000;
padding: .5em .5em .5em 75px;
display: block; }
nav[role="navigation"] ul li a.cinema { background-image: url(http://www.toastcafebar.com/nav/images/pop.png); }
nav[role="navigation"] ul li a.tv { background-image: url(http://www.toastcafebar.com/nav/images/tv.png); }
nav[role="navigation"] ul li a:hover {
color: #999;
background-color: #666;
-moz-border-radius: .5em;
border-radius: .55em; }
Preview: http://jsfiddle.net/Wexcode/bGNgr/
What you need to do is the <a> tags to display:block;, and have the icon as a background image, aligned left with no-repeat. Then make sure you apply padding-left on the <a>so the text doesn't overlap the image. For example:
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
padding-left: 90px;
}
Use that as a base! No need for max-width...
To get the icon to autoresize to fit the "button size" you could use the CSS3 property "background-size". But I think the best way is to resize the icons manually, some browsers does not support CSS3 properties correct yet.
http://www.css3.info/preview/background-size/
Use both classes as follows, you may reach to answer,
nav a:hover {
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
background: url(images/pop.png) no-repeat scroll left center #666666;
color: #999999;
}
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
text-indent: 35px;
}