IE7 did show my navbar horizontally instead of vertically. Searching the web I found an excellent solution on stackoverflow: IE7 does not understand display: inline-block
Everything worked fine with IE7 - navbar appeared horizontally - but with addition of the IE7 script appearance of IE8 is completely abolished (blank page) - if I remove the script IE8 is working fine again.
So this is the script I add to the head section:
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
and this the corresponding stylesheet:
ie7.css:
nav ul li {
display: inline-block;
*display: inline;
zoom: 1;
}
the stylesheet for the nav
main.css:
nav {
font-family:'freestyle script', sans serif;
font-weight:1000;
background-color: transparent;
text-align:left;
display:block;
}
nav ul {
list-style: none;
margin: 0px 0px 0px -15px;
}
nav ul li {
float: inside;
display: inline-block;
border-radius: 20px;
margin: 23px;
padding: 0px 23px 0px 0px;
}
What is the explanation for this unexpected problem with IE8. And is there a solution to get IE8 working again.
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?
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();
I'm trying to integrate a responsive menu to my website here but I also have a colorbox script running on it. The thing is, The css of the responsive menu ( which i got here) is messing up my colorbox css. the css is as follows:
colorbox css:
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;
overflow:hidden; }
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
the Responsive menu css is as follows:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 90%;
margin: 50px auto;
}
nav ul {
list-style: none;
text-align: right;
/* overflow: hidden; */
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover , nav li a.current{
background: #222;
}
nav li a:visited {
color:#FFF;
}
nav li:last-child a {
border: none;
}
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
...more responsive css STUFF ( unimportant)
I've located the Issue. I need help fixing it. when I open up the colorbox pictures, the box itself is smaller than the rest of the popup. so It looks aweful, I'm testing it in FireFox 18.0.1 but if I use Chrome Version 24.0.1312.56 m and it works in Chrome ( it shows teh whole thing)
The issue is with this line in the menu css:
-moz-box-sizing: border-box;
and I'm not too familiar with it to know what its doing, but I know If I take it out, my resposive design menu doesn't work preperly, but my colorbox does. I'm thinking of taking it away from the "*" portion of the css and add it somewhere else, but how can I do this? can I hard code it to a div or something? here is my html:
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/menu-css.css">
<link rel="stylesheet" href="colorboxjs/colorbox/colorbox1.css" />
<script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="colorboxjs/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".gallery3").colorbox({rel:'gallery3', transition:"none", width:"75%", height:"75%"});
});
</script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
</div><!-- container -->
<div class="container" style="background:lightgray; padding: 15px">
<h3> 5 menu right </h3>
<nav>
<ul>
<li><a class="current" href="#">First</a></li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
</div>
<div class="container" style="background:lightgray; padding: 15px">
<P>THIRD TYPE - No Transition + fixed width and height (75% of screen size)</P>
<a class='gallery3' href='images/slider-1.jpg'>Pic 1</a>
<a class='gallery3' href='images/slider-2.jpg'>Pic 2</a>
<a class='gallery3' href='images/slider-3.jpg'>Pic 3</a>
</div>
<br/><br/>
<!-- End Document
================================================== -->
<script>
jQuery('a.gallery').colorbox();
</script>
</body>
</html>
THanks for all the help in advanced. ~Myy
What box-sizing: border-box; does is, it will include all border and padding widths/length in your content-width. so instead of 1px border + 50px width = 52px total width, border-box will always force the total-width to be 50px.
You can always use media-queries and start using the border-box from a certain screen-size, that would seperate your normal and mobile css pretty well, but it will cause similar errors on the small screen which you need to fix.
Here's a quick intro about media-queries: http://css-tricks.com/css-media-queries/
Alternatively you can get rid of the border-box and manually nudge any changes you see back in place (use FF's firebug or Chrome developer tools for this). But I do want to add that border-box is pretty cool & handy, you should consider leaving it in and nudging your default code.
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.