UPDATE:
This seem to only be an issue with ul/li if i replace the ul with a div and remove the li and apply the relevant style to the a's instead its fine. ID' still liek to know why the ul/li structure presents a problem since margin/padding have been reset explicitly.
Im having soem trouble with the children of a fixed position element in IE7. They seem to be gaining width/margin/padding from somewhere but I cant discern where or how to fix it.
You can take a look at it in jsFiddle here. Ive added the bg colors just for debugging. The image/li tags should be flush with they yellow, and are in IE8 as well as mozilla and webkit. But in IE7 there is an extra ~20px of space to the left pushing them over, as if the li, a, or img tags had a margin. However, if i look through the properties in IEDevToolbar there is no margin or padding being applied. Futhermore, this happens even if i assign widths to everything and zero out margin/padding directly on each element with IEDevToolbar.
I'm totally lost on this one.
Below is the relevent code... There is a XHTML 1.0 Transitional doctype on the layout in question:
<style type="text/css">
.social-widgets {
position: fixed;
top: 125px;
left: 0px;
background: #f00;
width: 34px;
}
.social-widgets-content {
list-style: none inside none;
margin: 0;
padding: 0;
text-align: left;
background: #ff0;
}
.social-widgets-content li {
margin: 10px 0 !important;
padding:0;
width: 34px;
background: #0f0;
}
.social-widgets-content img {
display:block;
border-top: 2px solid #e9e8e8;
border-bottom: 2px solid #e9e8e8;
border-right: 2px solid #e9e8e8;
padding: 0px; margin:0px;
background: #00f;
}
</style>
<div class="social-widgets">
<ul class="social-widgets-content">
<li><img src="/images/button/button.facebook.png"></li>
<li><img src="/images/button/button.twitter.png"></li>
<li><img src="/images/button/button.feedback.png"></li>
</ul>
</div> <!-- /.social-widgets -->
This has nothing to do with position:fixed;. It was an issue with the list styling. When using list-style: none inside none; IE7 still adds the spacing for the list-marker despite the marker being set to none. The solution was to set list-style-type: none; instead of using the shorthand.
Related
I'm having difficulty getting an <ul> divided evenly in safari so that the inline <li> elements make up 100% of the width.
The html code is basically:
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
<li>orange</li>
<li>purple</li>
</ul>
with css:
ul {
list-style: none;
margin: 0;
padding: 0;
width: 500px;
background-color: #9999ff;
}
li {
text-align: center;
text-decoration: none;
display: inline-block;
border-left: 1px solid #000;
width: 20%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
li:last-child {
border-right: 1px solid #000;
}
It seems like this would make 5 evenly spaces list elements which take up 20% (including borders) of the total width each. Works perfectly in Firefox and Chrome but Safari leaves an extra 6 pixels or so at the end. When I remove the box-sizing property then the list becomes too long. I can't seem to make this simple thing work for the life of me.
Here's JSFiddle: http://jsfiddle.net/z2Xdf/7/
It was rendering the wrong way for me in Chrome...at least using jsFiddle.
Inline-block puts some white space on the sides. Remove from li display:inline block and add
display:block;
float:left;
Also, move your background color to li from ul.
If you wanted to keep display:inline-block, you can apparently do this...
<ul><!-
-><li>stuff</li><!-
-><li>stuff</li><!-
-></ul>
but that seems like a hassle to type?
More "hacks" here (check comments)...
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I have a basic menu, made from a horizontally aligned list (<li>), each containing an icon image and some text:
One of the <li> contains an extra image with display: none; so that the icon can be toggled (from a green to a red pepper, in this example.
The problem is that it doesn't align correctly on some browsers, as shown in the above image. My understanding was that in contrast to visibilty: hidden;, an element with display: none; should not affect the position of any other element and should render as if it's not there?
The browsers where it doesn't render correctly are Google Chrome and Safari - but only on MacOS(!?) and IE7 (I know, I know...) on Windows. Every other browser / OS combination I've tested works fine.
Here's the HTML:
<ul class="menu">
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li id="change">
<img alt="Red Pepper" src="/red.png" style="display: none;">
<img alt="Green Pepper" src="/green.png">
li
</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
</ul>
Here's the CSS:
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align:center;
margin: 0 0 0 -25px;
padding: 8px 0 0 0;
width: 144px;
height: 35px;
display: inline-block;
background-image: url(../bct-white.png);
background-repeat: no-repeat;
color: #0091c1;
}
And for the icon images:
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
I've also had to include a browser hack for IE7 because it doesn't recognise inline-block, coming from a separate stylesheet based on a conditional import (<!--[if lte IE 7]>):
.menu li {
zoom: 1;
display: inline;
}
Although, obviously that style isn't loaded on Chrome and Safari regardless of OS, so can't be causing my issue on Macs.
I know the quickest solution would be to refactor the HTML and the JavaScript manipulation of the show / hide of the icons, but I'd really like to know what causes this issue and how to resolve it.
Update
I've tracked the cause down. Basically, the element style of display: none; on the <img> element overrides the inline from the .menu img rule. Removing that, then toggling between block and inline allows you to reproduce the issue. This is obviously a browser bug, and while the element is not displayed being an in-line or block element should have no effect on the layout.
jsFiddles
Issue with Chrome and Safari on Macs only
Issue with extra CSS for IE7 only
Note! For me, the Fiddle page didn't load properly using IE7, but the direct link for the result iFrame is http://fiddle.jshell.net/z4dU7/3/show/
Bounty update!!!
I've posted one fix below, but it actually introduces the same layout problem in IE9! Please feel free to evolve or improve on my answer - or come to the table with something completely different! :)
Scrap Approach and Use Background Images
http://jsfiddle.net/P5CKC/2/
<ul class="menu">
<li><span>Li</span></li>
<li><span>Li</span></li>
<li><span>Li</span></li>
<li class="change"><span>Li</span></li>
<li><span>Li</span></li>
</ul>
CSS
ul.menu {
overlflow: hidden;
}
ul.menu li {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align:center;
margin: 0 0 0 -25px;
width: 152px;
line-height: 35px;
height: 35px;
background: url(../bct-white.png) no-repeat;
color: #0091c1;
}
ul.menu li span {
background: url(/green.png) no-repeat 5px 6px;
display: block;
}
ul.menu li.change span {
background-image: url(/red.png);
}
CSS2.0 and browser compatibility
The code application I have provided is Css2.0 and should easily work in IE7 and above.
Removed img tags and implemmented aesthetics (images) as backgrounds
Extra span had to be added because CSS2 allows only 1 background image per element
Li tag holds the arrow background; span tag holds the pepper background
Updated id="change" to class="change". UNLESS you are 100% certain that you will only have one #change element, use a class. This is purely styling and it prevents you from having two menu lists on the same page.
Tweaked your CSS styling a bit as follows:
Removed top padding and increased the height. So your li elements are the same height BUT then added line-height: 35px -> this is the best way to vertically center text. Utlizing top padding works but it is prone to poor browser inconsistency.
Change li elements to floats. Floated elements are the most IE7 friendly method! Even IE6 will not bug out but I don't have that old version to test your webpage in. FYI - ul.menu has to have overflow: hidden to clear the floats.
position: relative;
cursor: default;
Unless you changed the defaults, you can keep these two properties out. cursor should be default. Position: relative is unnecessary - you aren't using absolute positioning or anything that warrants its need. Now, you can keep these in your declaration. I just like code to be as "slim" as possible.
final words:
Take a look at my CSS. Notice how I used ul.menu in all my declaration. You may want to get in the habit of doign the same; this provides the developer some insight on what the HTML looks like and more importantly - your css will not get overrided if you decide to add <div class=menu> later on. Specfically .menu img would apply to any image tag within the menu div.
Okay - that's it. Let me know if there are any clarfications.
FYI - seeing as this question has a bounty, if you provide me with the background images I can polish my code to suit your needs 100% - perhaps upload them in an edit of your answer.
There is whitespace between your elements. None of your other list items have that whitespace. Try removing all whitespace between those elements and see if that fixes your problem.
If it does, it just means that your HTML is parsing the content of your <li> as having a line break - which would be why you are seeing an issue. To solve this, wrap the text in your <li> with a <span>. When your browser parses HTML it will automatically trim whitespace between HTML tags and automatically fix the issue (without losing your formatting)
This is an odd one but I could recreate the issue in Firefox v22. The really odd part was that in the jsFiddle if I just hit "Tidy Up" and then hit "Run" and the problem was solved. As Matthew R mentioned this is likely due to the additional white space being removed.
Broken:
Tidy Up, Run, and Fixed
Here's an alternate method using background images:
Working Example
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align: center;
margin: 0 0 0 -25px;
padding: 8px 0 0 10px;
width: 118px;
height: 20px;
display: inline-block;
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://i.stack.imgur.com/dmHl0.png);
background-position: 0% 0%, 44% 75%;
background-size: 128px, 18px;
background-repeat: no-repeat;
color: #0091c1;
}
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
#change:hover {
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://www.chiletownhotsauce.com/images/stories/Red%20bell%20pepper.jpg);
background-repeat: no-repeat;
background-position: 0% 0%, 44% 75%;
background-size: 128px, 18px;
}
<ul class="menu">
<li>li</li>
<li>li</li>
<li>li</li>
<li id="change">li</li>
<li>li</li>
</ul>
I think your issue is with the box model and display:inline-block. When I use display:inline-block in horizontal menus, I also use a clear fix for the parent and float:left; with the children.
In this example of the css, I put some values in the .menu that can be inherited and I used overflow:hidden; to address the clear fix. Then I used float:left; in the li to force them tight and avoid any weird spacing caused by the browsers defaults. And then I changed the vertical-align value to middle for the image. When toggled display:none; with inline, it all looked correct to me. I did not test in all the browsers listed. I also used the first piece of CSS there for the css reset, which may be redundant but I always find it useful on JSFiddle.
* {
margin:0;
padding:0;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
color: #0091c1;
overflow:hidden;
}
.menu li {
cursor: default;
position: relative;
text-align:center;
/* margin: 0 0 0 -25px; */
padding: 8px 0 0 0;
width: 118px;
height: 20px;
display: inline-block;
float:left;
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png);
background-repeat: no-repeat;
}
.menu img {
display: inline;
/* vertical-align: -25%; */
padding-right: 6px;
vertical-align:middle;
}
To resolve the (appearance of) the issue, change the vertical alignment of the icon images contained in the menu:
.menu img {
display: inline;
vertical-align: top;
margin-top: 2px;
padding-right: 6px;
}
On the affected browsers, the additional image (with display: none;) was altering the height of the containing element. Setting the <img> to display: none; meant that the display: inline; setting no longer applied and was positioned underneath the first image.
Just having the extra <img> displaying in-line fixes the vertical alignment, but obviously doesn't fix the issue as the image needs to be hidden without changing the position of the text.
This fix changes the vertical alignment from a percentage (-25%) to a fixed position, avoiding any (spurious) differences in the height of the containing element. I've then set the top margin of the image to get the desired spacing from the top edge of the element.
Update
This fix breaks the display in IE9 - same appearance as IE7 without this fix.
You made a mistake with the line-height
instead of 35px give 23px
<ul class="menu">
<li><span>Li</span></li>
<li><span>Li</span></li>
<li><span>Li</span></li>
<li class="change"><span>Li</span></li>
<li><span>Li</span></li>
</ul>
ul.menu {
overlflow: hidden;
}
ul.menu li {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
margin: 0 0 0 -25px;
width: 152px;
line-height: 23px;
list-style: none;
height: 35px;
background: #ccc;
color: #0091c1;
}
ul.menu li span {
background: url(http://i.stack.imgur.com/dmHl0.png) no-repeat 5px 6px;
display: block;
}
ul.menu li.change span {
background-image: url(/red.png);
}
check the output
jsfiddle-link
I had the same issue with display:none; breaking my layout. I ended up just removing the style and using jQuery's:
$(".element").show();
$(".element").hide();
First i will show you the problem, wich only happens on IE6/IE7
As you can see, when the length of the innerHtml it's not long, no problem; but when it's 'longer' the sprite set as bg image gets repeated and the text jumps to the next line...
now, the CSS
.contButton {
list-style: none;
float: right;
}
.contButton p {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 0 0 10px !important;
}
.contButton a {
text-decoration: none !important;
float: left;
color: #FFF;
cursor: pointer;
font-size: 14px !important;
line-height: 21px;
font-weight: bold !important;
}
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
/*ESTADO NORMAL AZUL*/
.contButton p a {
background: url(../nImg/spriteBotones.png) no-repeat right -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat right -214px;
color: #FFF;
}
.contButton p a span {
background: url(../nImg/spriteBotones.png) no-repeat left -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat left -214px;
}
And the Html:
<div class="">
....
<div class="contButton mt10">
<p><a tabindex="" title="acceder" href="#"><span>ver disponibilidad</span></a></p>
</div>
...
</div>
This is the bg Image.
![the sprite][2]
Tried with:
<!--[if IE lte 7]>
<style type="text/css">
/*
.contNombrePrecioHtl .contButton p a{ height:20px; }
.contNombrePrecioHtl .contButton p a span{ height:20px; width:auto; } */
</style>
<![endif]-->
But that didn't solve the problem...
PS: class="mt10" it's only a margin-top:10px;
Any idea how to solve this for the glorious IE6/7?
Try adding white-space: nowrap to .contButton.
change this:
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
white-space: nowrap;
}
I don't think it is a problem with either IE versions, it's probably just the newer browsers being less strict about this particular thing. I haven't tested anything, but "display:inline-block" has helped me sometimes. Still it doesn't seem like the most effective solution. The width seems to be limiting here, you shouldn't give the thing a fixed width if you don't want the text to "jump" into a second line...
can you try to add overflow: hidden to each parent of element with float: left? in this case you will have to add it to each div, p and a. I am not sure whether your actual code is optimal.
Moreover, float: left; and display: inline together make no sense. This might be the reason of the strange behaviour. Delete display: inline (remember about adding overflow: hidden to its parent) and it should work.
Haven't tested though.
UPDATE:
apparently as the author of the question mentions float:left + display: inline fixes IE6 double margin bug for floating elements.
defining dimensions for elements like p oder span is always somewhere between tricky and impossible, because they are inline elements. I'd recommend modifying the surrounding block element div.contButton.
In addition to height you should set overflow to hidden:
.contButton {
height:20px;
width:219px;
overflow: hidden;
}
I apologize for the headline, I don't really know a better way of putting it (let me know if you have a better way, I will change it). Please consider the following code:
<html>
<head>
<title>IE 6 Menu Test</title>
<style type="text/css">
.nMenu {
border: 1px solid black;
}
.nMenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: bold;
text-decoration: none;
}
.nMenu a:hover {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="nMenu">
<ul>
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>
</div>
<hr />
<div class="nMenu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</body>
</html>
In firefox, both the top and bottom menus display exactly the same. But in IE6, the bottom version, which is identical to the top except for the carriage returns after each list element, displays with extra padding above each element. The top version, without the carriage returns does not. This is especially apparent (the extra padding) when rolling over the items in the bottom list.
It seems that IE6 is rendering the carriage returns for some reason. For now we have just resorted to formatting our code like the top example, but this is less than ideal. Is there something we can put in the CSS to make this look proper in IE6?
Apply display: block; to the li, tell IE6 to make the a 100% in width, and tell all browsers to display the a as a block instead.
.nMenu li {
display: block;
}
/* hack for IE6 */
* html .nMenu a
{
width: 100%
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight:bold;
text-decoration:none;
}
Tried it in IE6 and both lists look identical, and renders exactly the same in Firefox.
I don't have a solution to the main issue, but you could change your code formatting to look nicer and still work in IE 6.
<div class="nMenu">
<ul>
<li>One</li
><li>Two</li
><li>Three</li
><li>Four</li
><li>Five</li>
</ul>
</div>
Try adding overflow: hidden; to .nMenu li.