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.
Related
I'm trying to create a simple tabbed navigation menu in CSS. I am having a hard time getting the bottom border to go away on the active tab. Normally this would not be hard to do, but I also want a line height set.. so I'm using inline-block with various IE and FF fixes. This makes it display the way I want, with the exception of the bottom border.
I have tried numerous methods for getting this to work, including setting up some operators.. but I don't know enough about CSS to determine if I was using them correctly.
Here is my jsfiddle.
(Obviously my CSS skills need work and I could probably simplify the code greatly as well.)
Code:
#tab_menu {
width: 100%;
overflow: hidden;
color: #000000;
border-bottom: #dddddd solid 1px;
}
#tab_menu ul {
padding: 0px;
margin: 0px;
}
#tab_menu li {
list-style: none;
line-height: 42px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
display: -moz-inline-stack;
/* Firefox Fix */
display: inline-block;
/* Normal Function */
zoom: 1;
/* IE Fix */
*display: inline;
/* IE Fix */
}
.tab_menu_active {
color: #000000;
border-bottom: none;
border-left: #dddddd solid 1px;
border-right: #dddddd solid 1px;
border-top: #dddddd solid 1px;
}
.tab_menu_active a {
color: #000000;
text-decoration: none;
}
.tab_menu_not_active {
}
.tab_menu_not_active a {
color:#52a4d4;
text-decoration: none;
}
.tab_menu_not_active:hover {
background: #eeeeee;
}
HTML:
<div id="tab_menu">
<ul>
<li class="tab_menu_not_active"> Link 1
</li>
<li class="tab_menu_active"> Link 2
</li>
<li class="tab_menu_not_active"> Link 3
</li>
<li class="tab_menu_not_active"> Link 4
</li>
<li class="tab_menu_not_active"> Link 5
</li>
</ul>
</div>
DEMO
for the #tab_menu I removed the overflow:hidden;
#tab_menu {
/*overflow: hidden;*/
}
to the .tab_menu_active I have added this styles, that will add border bottom white and with position manipulation will overidre the gray border color.
.tab_menu_active {
border-bottom:solid 1px #fff;
position:relative;
top:1px;
}
.tab_menu_active a {
position:relative;
top:-1px;
}
The problem you have is your entire #tab_menu has a bottom border. There are a couple ways you could solve this, but first I'll give you some details about how to simplify your css.
Give the li's the class tab, that means that every tab you have will all get the same css. On the active one, give it a second class, active. In your css definitions, define that all tab's should have the same css (instead of having duplicate css in tab_menu_active and tab_menu_not_active).
I would recommend giving them all a border on the bottom, and then removing that border in the active one.
Here's a forked jsfiddle.
I have a CSS file that will display a background image in IE, but that same background image won't in firefox. Specifically, its the headerdoc image that's the problem, the one above the menu.
What I'm trying to do is create a main div section and then create the rest of the layout in sections.
Yes, I know you could do this with a table, yuck, ugly hard to manage and even more difficult to maintain not to mention its ugly, hard to manage and even more difficult to manage.
Any help with this would be greatly appreciated.
P.S. Here is what I'm trying to accomplish - I have a page that is the full width and heighth of the screen minus a 2.5% margin around the edges. No biggy here, that's working just fine.
within that container I have a header section called #headerDoc. That should be the full width of the parent container and x % in heighth. It is here that I want to have a background covering the full area of this container.
Within the header section I have a menu section that will comprise just the bottom edge of the #headerDoc parent. say 10% of the bottom. This has its own background so its colored correctly.
After that I'll finish building out the rest of the screen. But that is what I'm attempting to do here.
Here is the CSS data:
/************************* ID's *************************/
#mainDoc {
margin-top: 2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
margin-left: 2.5%;
background-color: #494948;
}
#headerDoc {
width="100%";
height="10%";
background-image: url('./images/bg1.jpg');
}
#menu {
/* position: relative;*/
width: 100%;
height: 32px;
margin-top: 50px;
/* font-size: 14px;*/
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
/* font-weight: bold;*/
text-align: center;
/* text-shadow: 3px 2px 1px #FFFFFF; */
background-image: url('./images/dpmenu.gif');
/* background-color: #8AD9FF;*/
background-color: #494948;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #ffffff;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #000000;
}
Here is the html use of the tags
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<title>Css Test</title>
</head>
<body>
<div id="mainDoc">
<div id="headerDoc">
<div id="menu">
<ul class="bdr-t bdr-b">
<li class="bdr-r ctr">HOME</li>
<li class="bdr-r ctr">CLASSIFIEDS</li>
<li class="bdr-r ctr">PLACE AD</li>
<li class="bdr-r ctr">DIRECTORY</li>
<li class="bdr-r ctr">HELP DESK</li>
<li>MANAGE ACCOUNT</li>
</ul>
</div>
</div>
</div>
</body>
Sorry about the "=" I missed that one (had a few others I forgot the syntax for, but even after changing those it still didn't make a diff.
Try
#menu ul { ... background-image: url('./images/dpmenu.gif'); .... }
by the way, whats in
bdr-t,
bdr-b,
bdr-r,
ctr css class?
Not solved but I think the problem is something else and not the css or pngfix.
Thanks for your replies.
Hi!
Don't know how to define the problem so I'll just show it to you.
I'm trying to set an image as a small background image of a link. for some reason on IE6 it inherits the background color of it's parent class...
Image here: http://lh4.ggpht.com/_Gj0LjMkd2XM/TOPp4gpuEzI/AAAAAAAAANE/0omEfRzIzho/2010-11-17_1637.png
CSS:
.tabbed-box .top li a {
background: none repeat scroll 0 0 transparent;
color: #8A8B86;
display: block;
float: left;
font-size: 11px;
font-weight: bold;
height: 16px;
margin: 0;
padding: 6px 0 3px 12px;
text-decoration: none;
}
.tabbed-box .top li.current {
background-color: white;
background-image: none;
border: 1px solid #95B776;
margin-top: -2px;
z-index: 10;
}
.tabbed-box .top li.current a {
background: url("quotes-arrow.png") no-repeat scroll 15px 24px transparent;
color: #006697;
position: relative;
height: 30px;
}
and the HTML:
<div class="top">
<ul>
<li id="tab-forex" class="current">
<span>Forex</span>
</li>
<li id="tab-commodities" class="">
<span>Commodities</span>
</li>
<li id="tab-indices" class="">
<span>Indices</span>
</li>
<li id="tab-stocks" class="">
<span>Stocks</span>
</li>
</ul>
</div>
Tried EVERYTHING! :)
would appreciate any help!
UPDATE:
also used iepngfix.htc script and put this on
<!--[if lte IE 6]>
<style>
.tabbed-box .top li.current a { behavior: url('iepngfix.htc'); }
</style>
<![endif]-->
I know the problem is related to the height: 30px; on .tabbed-box .top li.current a. when I remove it or lower the value I get different results but none of them solves the problem.
The problem isn't your CSS; it is that IE6 has broken support for transparency in PNG graphics.
My opinion would be just not to bother supporting IE6 because it has so many bugs and issues like this. But I understand that's not an option for everyone.
The good news is for this particular bug, that there is a hack to get around it:
http://www.twinhelix.com/css/iepngfix/
Hope that helps.
[EDIT]
If that doesn't work, I suppose the other option is to switch the graphic to be a GIF. Bit of a cop-out, but will sort out the problem quicker than trying to work around IE6's failures.
try the following:
.classname {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cnr-heading.png', sizingMethod='scale');background: none;
}
IE6 has an issue displaying png files which have transparent parts. The are some javascript workarounds. Check this site to see some options.
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.
How would I go about adding a dynamic ".........." to a restaurant menu in CSS? Like in printed ones they have the whole
"our food is made of blah blah blah.............$24.99."
How would you do that in CSS? Or is this even possible?
The best solution is this:
<ul>
<li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>
then CSS to match (untested, but tweakable to get the effect)
li {
width: 300px;
height: 20px;
border-bottom: 1px dotted black;
background-color: white;
}
.food, .price {
height: 22px; //key: just a bit taller than the LI
background-color: white;
}
.food {
float: left;
}
.price {
float: right;
}
So it basically fixes the rectangle of the LI and draws a border on the bottom, then the price and food name cover it up dynamically with their width. YMMV with browsers, but perhaps a negative margin-bottom will get the li border-bottom obscured for sure by the P elements.
It's possible but not well supported. You want the :after psuedo-selector and the content rule. See here: http://www.quirksmode.org/css/beforeafter.html Note that IE gets a big fat F for implementation.
You can do it in javascript. Or by creative use of the border-type 'dotted'. Or maybe a repeating background, as Brooks suggests, which would work by giving your price and descriptions spans that you apply a background color to to cover the repeating background.
Update What that might look like:
<ul class="menu">
<li><span class="name">Yummy stuff</span> <span class="price">$400</span></li>
</ul>
With CSS like:
.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; }
.menu li {
display:block;
overflow:hidden; //contain the float
background-image: url(dots.gif);
background-repeat:repeat-x;
}
.menu .name { background-color:#ffffff; }
.menu .price { float:right; clear:none; background-color:#ffffff; }
Alex's answer has one great drawback — multiline text in the .food hides bottom line.
Also there is a good old answer: http://www.search-this.com/2007/11/26/css-a-recipe-for-success/ (demo)
Here is live demo of a little modified old solution (try to resize): http://cssdesk.com/BqR96
And modified css:
.restaurant_menu__list {
min-width: 320px; /* For mobile devices */
max-width: 500px; /* Custom max width for readbility */
}
.restaurant_menu__row {
border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
position: relative;
float: left;
line-height: 1.2em;
margin: -.9em 0 0 0;
width: 100%;
text-align: left;
}
.restaurant_menu__meal span
, .restaurant_menu__price
{
background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}
.restaurant_menu__meal {
padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}
.restaurant_menu__meal span {
margin:0;
position:relative;
top: 1.6em;
padding-right:5px; /* Custom number for space between text and dotted line */
}
.restaurant_menu__price {
padding:1px 0 1px 5px;
position:relative;
top:.4em;
left:1px;/* ie6 rounding error*/
float:right;
}
And modified html:
<ul class="restaurant_menu__list">
<li class="restaurant_menu__row">
<!-- Inside div we need inline element, to handle multiline meals -->
<div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div>
<span class="restaurant_menu__price">€25</span>
</li>
<li class="restaurant_menu__row">
<div class="restaurant_menu__meal"><span>French Onion Soup</span></div>
<span class="restaurant_menu__price">€32</span>
</li>
</ul>
That's really graphics, not text, even if it's normally done as ASCII-art with dots. Thus, a repeating background image might do the trick appropriately?