I got a tiny problem. First time I am doing a UL menu with an arrow poping on the right... without JS.
I got a small problem. In Internet Explorer... IE show a margin in #subMenu ul li of arround 2px (so we see the page background). In other broswer everything is fine.
Also, I am suppose to the see the PNG on the right of the UL. If UL is 0px-100px left then the pic will appear at 100px-122px left. IE doesnt show the pic, other does.
Good : FF 9.0.1, Safari 5.1.2, Opera 11.60, Chrome 16.0.912.75
Wrong : IE 9.0.4
I did try this but... border goes wrong with this :
#subMenu ul li{
list-style-type: none;
margin: -2px;
}
Here's picture of what I mean : http://i44.tinypic.com/6poy8i.jpg
Here's the test page :
<html>
<head>
<style>
html, body{
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
}
#wrapper{
}
#subMenu{
padding: 5px;
}
#subMenu .wrapMenu{
width: 180px;
}
#subMenu ul{
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
height: auto;
}
#subMenu ul li{
list-style-type: none;
margin: 0px;
}
#subMenu ul li:hover{
width: 100%;
}
#subMenu ul li a,
#subMenu ul li a:link,
#subMenu ul li a:visited{
text-decoration: none;
color: #b9b9b9;
display: block;
background-color: #f5f5f5;
border-left: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
width: 100%;
height: 48px; /* padding-top + padding-bot + height de ul li span*/
}
/*f9f9f9*/
#subMenu ul li a:hover{
color: #7a7a7a;
border-right: 0px;
background-color: #f9f9f9;
}
#subMenu ul li span{
width: 100%;
float: left;
height: 20px;
display: block;
padding: 14px 6px 14px 20px;
}
#subMenu ul li span:hover{
background: transparent url('subMenu_Arrow.png') no-repeat 180px 0px;
}
#subMenu ul li a.first{
border-top-left-radius: 3px;
border-top: 1px solid #c3c3c3;
}
#subMenu ul li a.last{
border-bottom-left-radius: 3px;
}
</style>
</head>
<body>
<div id="subMenu">
<div class="wrapMenu">
<ul>
<li><a class="first" href="#"><span>Arrêts</span></a></li>
<li><span>Avis</span></li>
<li><span>Planibus</span></li>
<li><a class="last" href="#"><span>Trajets</span></a></li>
</ul>
</div>
</div>
</body>
</html>
Thanks for you help.
You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model, among other things.
Example:
<!doctype html>
Specifying the doctype will yield the correct result in your screenshot.
Related
I feel like this question shouldn't exist anymore, but I can't seem to find a solution. So here goes.
ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}
ul.nav_sub_menu > li a {
display: inline-block;
width: 100%;
padding: 2.5px 0px 2.5px 5px;
background: #213059;
color: white;
text-decoration: none;
border-bottom: 5px solid #253767;
}
ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}
<div class="nav_sub_menu_wrapper">
<ul class="nav_sub_menu">
<li>
About me</li><li>
Goals</li><li>
Realizations</li><li>
Future plans</li>
</ul>
</div>
This example generates a styles list with display:inline-block anchor tags
You might notice from the start that each list-item is separated by a horizontal white line between them. If not, try zooming the browser in or out (visible at 110% for me).
The white space isn't visible at all zoom levels and it only happens in Chrome, that's why I am at a loss.
How does one begin to troubleshoot this?
FYI, I have found this link to be useful but it didn't help. My chrome version:
Chrome Version 56.0.2924.87 (64-bit)
That is a weird issue. I think it might be something to do with the pixel resolution or density perhaps. However I managed to fix it with the below code.
ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}
ul.nav_sub_menu > li a {
display: inline-block;
width: 100%;
padding: 2.5px 0px 2.5px 5px;
background: #213059;
color: white;
text-decoration: none;
border-bottom: 5px solid #253767;
float: left;
}
ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}
All I added was float: left; to the anchor property and it removed the white line between the list items. Try it and see what it does for different zoom levels. Although it does work for 110% zoom for me.
I've been looking around for a solution and didnt find anything. Therefore I am asking a question.
The drop down menu works in Chrome in my computer and other devices (computers and laptops) at home. Except in Firefox and IE.
#menu {
position: absolute;
left: 50%;
bottom: 85.125%;
z-index: 100;
height: 100px;
margin-top: -200px;
width: 300px;
margin-left: -150px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul#nav li {
background: #fff;
float: left;
}
ul#nav li a {
display: block;
text-decoration: none;
border-bottom: 1px solid #ccc;
color: #000;
padding: 5px 15px;
}
ul#nav li a:hover {
background: #aaa;
}
ul#nav li ul li {
float: none;
}
ul#nav li ul {
position: absolute;
display: none;
}
ul#nav li:hover ul {
display:block;
}
body {
margin: 0px;
padding: 0px;
}
<body>
<header>
<!-- input for header text-->
</header>
<div id="menu">
<!-- input for the navigation menu -->
<ul id="nav">
<li>Hem</li>
<li>
Browsers
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE</li>
<li>Opera</li>
</ul>
</li>
<li> Data</li>
<li>Synpunkt</li>
</ul>
</div>
</body>
Two reasons,
1) Your HTML has an error, these lines --
<li><a>href="chrome.html">Chrome</a></li>
<li><a>href="firefox.html">Firefox</a></li>
should be
<li>Chrome</li>
<li>Firefox</li>
And
2) Your ul has id navbar, but in css you're using #nav as the selector. So either change the id or change the selector in css.
Check the Test Link
EDIT: Screenshots !! :)
Firefox:
IE9:
if this is not correct, please explain what is not correct.
Your HTML is broken:
<li><a>href="chrome.html">Chrome</a></li>
<li><a>href="firefox.html">Firefox</a></li>
should be
<li>Chrome</li>
<li>Firefox</li>
But I can't get this working in Chrome anyway. Can you replicate the issue in a JSFiddle?
Try using this code for css, in ie press f12 and make sure that browser mode and document mode is both set to ie9.
EDIT: Header should look like this.
<!doctype>
<html>
<head>
<meta charset=utf-8>
<title>Index</title>
<link rel="stylesheet" href="css/style.css">
</head>
#menu
{
position: relative;
top: 50px;
left: 800px;
display: inline-block;
}
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
ul#nav li
{
background: #fff;
float: left;
position: relative;
}
ul#nav li a
{
display: block;
text-decoration: none;
border-bottom: 1px solid #ccc;
color: #000;
padding: 5px 15px;
}
ul#nav li a:hover
{
background: #aaa;
}
ul#nav li > ul li
{
float: none;
}
ul#nav li > ul
{
left: 3px;
position: absolute;
top: 29px;
display: none;
}
ul#nav li:hover ul {
display:block;
}
body
{
margin: 0px;
padding: 0px;
}
<div id="header"><!--start #header-->
<img id="logo" height="80" src="../resources/CHUG-LOGO.png" />
<ul>
<li id="home"><h2>Home</h2></li>
<li id="about"><h2>About</h2></li>
<li id="store"><h2>Store</h2></li>
<li id="contact"><h2>Contact</h2></li>
</ul>
</div><!--end #header-->
#header ul {
padding: 0px;
list-style-type: none;
margin: 0px;
float: right;
}
#header ul li {
text-align: center;
display: block;
margin: 0px;
float: left;
padding-top: 45px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 65px;
border-left: 1px solid #755b2c;
border-right: 1px solid #b99e68;
}
#header ul li h2 {
min-width: 105px;
margin: 0px;
padding: 0px;
display: inline-block;
color: #000;
font-size: 20px;
font-weight: bold;
}
This is the code I have for my nav bar, and I am trying to remove the right border on the last list item. I know I need to use the psuedo identifier :last-child, but I can't seem to get it to work. Any ideas?
The lis are technically not children of the ul element since they are wrapped by a elements. Move the a to the inside of the li and use the same code again.
#header ul a:last-child li {
border-right: none
}
but don't forget that last:child doesn't work in IE6, IE7 and IE8:
http://quirksmode.org/css/contents.html
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;
}
Here's what i've done so far:
<html>
<head>
<style>
/* Tabs */
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
/* WARNING: when using font-size/font-family instead of font,
do not forget to set line-height:normal otherwise 1px more is shown
between tabs and their bottom line in IE8 and FF3.6 */
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 0px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current {
background: white;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a id="current" href="#">Col1</a></li>
<li>Col2</li>
<li>Col3</li>
</ul>
</div>
</body>
</html>
And it's saved to http://jsbin.com/uvako3/2. Thanks for your help
Just add text-align: right; to the #navlist css.
Explanation: You are making your list items inline elements. That makes them follow the general rules that apply to text. So by simply setting the text align, you are specifying where inline elements are aligned to.