I'm working on making a simple navigation box on the right side of a page. I basically have five image-links in a UL that have a hover property in the CSS that sets the background-position so there is the hover effect.
It works fine in Firefox, Safari, Chrome AND IE7. However, fire up IE9 and all of the images have extra vertical margin spacing or something below them by about 1px and when you hover the placement is off by 1px or 2px.
First of all I disabled the automatic IE9 compatibility view by having:
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
For some reason compatibility view was being turned on by IE9 which messed up my element floating.
Here is my HTML:
<div id="right">
<ul id="greenpractices">
<li id="rightmission_water">Water</li>
<li id="rightmission_air">Air</li>
<li id="rightmission_innovation">Innovation</li>
<li id="rightmission_energy">Energy</li>
<li id="rightmission_design">Design</li>
</ul>
</div>
And the CSS:
#right {
float: left;
display: inline;
width: 286px;
border-top: 1px solid #686868;
padding: 17px 16px 0px 17px;
}
ul#greenpractices {
list-style-position: outside;
list-style-type: none;
width: 286px;
height: 260px;
}
ul#greenpractices li, ul#greenpractices li a, ul#greenpractices li a:active, ul#greenpractices li a:visited {
position: relative;
display: block;
width: 286px;
height: 52px;
text-indent: -99999px;
}
ul#greenpractices li a:hover {
background-position: 0 0;
}
li#rightinnovation_innovation a {
background: url('images/rightinnovation_innovation.jpg') bottom;
}
li#rightinnovation_air a {
background: url('images/rightinnovation_air.jpg') bottom;
}
li#rightinnovation_water a {
background: url('images/rightinnovation_water.jpg') bottom;
}
li#rightinnovation_energy a {
background: url('images/rightinnovation_energy.jpg') bottom;
}
li#rightinnovation_design a {
background: url('images/rightinnovation_design.jpg') bottom;
}
Many thanks to anyone who can help!
Ended up figuring out that the IE9 window I was using was zoomed in 105%. Just enough to be unnoticeable. Thanks to everyone who helped - that was frustrating!
Related
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
can anyone help me find out what the problem is? I'm trying to make the active state of the css sprite work.
At the moment, it is not doing anything
HTML
<ul id="nav">
<li id="Contact">Contact</li>
<li id="Manual">Manual</li>
<li id="FAQ">FAQ</li>
</ul>
CSS
#nav {
background:url("../img/nav_final.png") no-repeat;
width: 372px;
height: 47.5px;
margin: 70px auto;
margin-bottom:25px;
padding: 0;
}
#nav li, #nav a {
height: 47.5px;
display: block;
}
#nav li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#Contact { width: 120px; }
#Manual { width: 140px; }
#FAQ { width: 112px; }
#Contact a:hover, #Contact a:active { background:url("../img/nav_final.png") 0px -47.5px no-repeat; }
#Manual a:hover, #Manual a:active { background:url("../img/nav_final.png") -118px -47.5px no-repeat; }
#FAQ a:hover, #FAQ a:active { background:url("../img/nav_final.png") -260px -47.5px no-repeat; }
Thanks for reading
The :active selector is when you have the mouse key pressed down. Not when you are at the actual link location.
Try defining the background-image on the links inside the nav. Also a background-repeat: no-repeat causes problems when using negative positioning.
Here is a reduced test-case
Well, I'm working an an ul - li multilevel menu and have problem.
Firstly, some code (I know it's not perfect but the crappy div is automatically added by Wordpress):
<nav id="page-navigation">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Pages
<ul class="sub-menu">
<li>One Column</li>
<li>Two Columns</li>
<li>Three Columns</li>
</ul>
</li>
</ul>
</div>
In my stylesheet I'll be pointing only to page-navigation id & sub-menu class so you can totally skip other ids/classes.
The problem is I can't change WIDTH of links in sub-menu. I don't know how. I'm totally lost.
As far as I can see this code overwrites them:
#page-navigation ul li {
float: left;
padding: 0;
font-size: 1.2em;
line-height: 1.2em;
background-repeat: no-repeat;
width: 200px;
height: 65px;
}
#page-navigation ul li a {
display: inline-block;
text-align: center;
padding: 10px 0 0 0;
text-shadow: #222 1px 1px 1px;
width: 200px;
height: 65px;
}
And here's the code for sub-menu items:
.sub-menu {
border-radius: 5px;
border: solid 1px #000;
box-shadow: 0px 0px 25px #000;
background-color: #222;
height: 200px;
width: 500px; /* THIS LINE DOESN'T WORK */
}
.sub-menu li {
width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */
}
.sub-menu li a {
font: 10px Verdana;
tex-shadow: 1px 1px 0px #000;
width: 100px; /* doesn't work :) */
height: 100px; /* doesn't work :) */
}
I know the whole sub-menu is inside of a <li>, but can do nothing with that (default Wordpress behavior).
What now? :(
Thaanks
You need to specify the full path, the higher level items are currently more specific. Try this:
#page-navigation ul li .sub-menu li {
width: 100px;
}
Your .sub-menu width, the first of your "doesn't work" actually does work for me. For the second, you can do two things.
Make it width: 500px !important so it overrides anyway. But I would advise to instead...
Put the ID at the beginning of the selector. .sub-menu li is overridden by any selector with an ID in it. So change it to #page-navigation .sub-menu li.
The selector #page-navigation ul li is more specific than .sub-menu li, so it takes precedence.
You can either work this out by adding an !important annotation to your CSS rules like this:
.sub-menu li {
width: 500px !important;
}
or specify the rule as more specific:
#page-navigation ul.sub-menu li {
width: 500px;
}
For problems like this, please resort to Firebug - you'll have a nice view of what is overwritten by what. This helps a lot :)
Saw this www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.
With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png
And how the links + the "[workatplay.com]" logo is set up at the right.
I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.
Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.
How can i make a header like this?
Here you go.. http://jeaffreygilbert.com/workatplayheader.html
Preview:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 80px;
text-indent: -9999px;
}
.header ul li a, ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 40px;
display: block;
}
ul#nav li.services a {
background-position: 0px 0px;
width:115px;
}
ul#nav li.toolbox a {
background-position: -115px 0px;
width:115px;
}
ul#nav li.work a {
background-position: -224px 0px;
width: 86px;
}
ul#nav li.about a {
background-position: -310px 0px;
width: 93px;
}
ul#nav li.insights a {
background-position: -403px 0px;
width: 113px;
}
ul#nav li.home {
float: right;
}
ul#nav li.home a {
background-position: -533px 0px;
width: 200px;
}
/* Sub Nav */
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
overflow: hidden;
}
ul#nav-sub li.contact {
float: right;
}
ul#nav-sub li.contact a {
background-position: 0px -200px;
width: 200px;
}
HTML:
<div class="header">
<ul id="nav">
<li class="home">work [at] play vancouver</li>
<li class="services">services</li>
<li class="toolbox">toolbox</li>
<li class="work">work</li>
<li class="about">about</li>
<li class="insights">insights</li>
</ul>
<ul id="nav-sub">
<li class="contact">contact work [at] play</li>
</ul>
</div>
Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.
As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.
width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;
etc
As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.
Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.
if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use
just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.
here you can experiment with this by changing and see result instantly.
copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header
<html>
<head>
<style>
body {
font : 20px Arial;
margin: 0px;
}
div#header {
background : black;
color: white;
padding-top : 25px;
}
/*The title*/
div#header h1 {
float: right;
margin-right: 100px;
border; 1px white;
font : 20px Arial;
}
div#header ul {
list-style: none;
height: 50px;
}
div#header li {
float: left;
width: 100px;
}
div#pink_area{
background: pink;
margin-top; 0px;
}
div#pink_area ul {
list-style: none;
height: 50px;
}
div#pink_area li {
float: left;
width: 45%;
line-heigth: 20px;
text-align : center;
padding : 10px
}
</style>
</head>
<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
<li>services</li>
<li>toolbox</li>
<li>work</li>
<li>about</li>
<li>insigths</li>
</ul>
<div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>
I am working on a website that has a menu which behaves correctly on FF but not on IE (as usuall).
On IE it floats to the right while it should float to the left, however if float is set to none it behaves almost correctly, attaching the onto the top of the container.
Here's a live example.
Here's the css:
/* Navigation */
.navigation
{
float: left;
overflow: hidden;
width: 650px;
}
.navigation ul
{
list-style: none;
margin: 8px 0 0 15px;
overflow: hidden;
}
.navigation ul li
{
border-right: 1px solid white;
float: left;
padding: 0 12px 0 12px;
}
.navigation ul li.last
{
border: none;
}
.navigation ul li a
{
color: white;
font-size: 14px;
text-decoration: none;
}
.navigation ul li a:hover
{
text-decoration: underline;
}
.navigation ul li a.active
{
font-weight: bold;
}
.btn_login
{
float: right;
margin: 4px 4px 0 0;
display: inline;
width: 200px;
}
And here's the html:
<div id="navigation_wrap">
<div class="navigation">
<ul>
<li><a class="active" href="default.asp">Home Page</a></li>
<li><a class="" href="faq.asp">FAQ</a></li><li><a class="" href="articles.asp">Articles</a></li>
<li><a class="" href="products.asp">Packages & Pricing</a></li>
<li><a class="" href="gp.asp?gpid=15">test1</a></li>
<li><a class=" last" href="gp.asp?gpid=17">test asher</a></li>
</ul>
</div>
<div class="btn_login">
...
</div>
</div>
I hope anyone would have an idea.
Thanks,
Omer.
EDIT:
Setting the width for both elements kinda helped but it's still not positioned correctly.
See updated css above.
Can you try reducing the height of your logo class. It is overhanging the menu.
<-span class=""top_nav_separator""> is in your code, this might be the thing that bothers IE
I had the same problem in IE some time ago. It doesn't like list items in a floating div. Adding the following fixed it for me:
display: list-item;
list-style-position: inside;