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.
Related
I created social media icons in my navbar as below. It works fine in my browsers (Chrome, Edge) but for my partner, in South Africa: it does not show at all for them, using the same browsers.
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
Within NAVBAR:
<ul class="social-icons">
<li></li>
<li></li>
<li></li>
</ul>
Custom CSS:
.social-icons {
padding: 0px;
margin: 0px;
}
.social-icons li {
display: inline-block;
list-style: none;
background: #00917C;
margin: 10px 0px 0px 0px;
border-radius: 5px;
}
.social-icons li a {
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
padding: 10px 15px;
text-align: center;
transition: all 0.4s ease-in;
}
.social-icons li a:hover {
background: #d54ab6;
color: #fff;
}
As currently displayed, it works fine in my browsers, here in the USA. So strangely enough, it does not work in my partners browser in South Africa.
As i tried to display them on my pc, they aren't displayed on one of my browsers. So i moved this outside of it and it wont display it. Then i tried to change the a to i and it wont display. So on, the problem must be that the css sheet of font-awesome isn't properly loaded into it or they are premium icons. I don't know if that's correct, but it's just an idea to check.
Link to another question handling with font-awesome:
Font Awesome icons are not working, I have included all required files
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 web site (http://www.interactstaging.net/clients/tozzi/) with drop down menus which works perfectly under Firefox and Chrome but not IE10.
An example HTML code for menu part looks like:
<div class="navi"><em class="hover"></em><span>Home</span></div>
and CSS for that part:
.navi a span {
position: relative;
display: block;
padding: 0 7px;
line-height: 28px;
z-index: 100;
height: 45px; }
Any clue why that CSS is not working under IE10?
Thanks
Try this CSS rule:
.sf-menu li {
background-color: #fff;
}
This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:
But on Internet Explorer, it looks fine:
Here's my CSS:
div.hideSkiplink {
background-color: #000;
width: 100%;
display: block;
height: 42px;
font-size: large;
font-weight: bold;
background: transparent url('../images/redslate_background.gif') repeat-x left top;
font-family: 'Times New Roman' , Times, serif;
text-transform: uppercase;
color: #000000;
}
div.menu ul {
position: absolute;
margin: 0px;
padding: 0;
list-style-type: none;
width: auto;
}
div.menu ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
div.menu ul li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 14px 22px 0 22px;
height: 42px;
}
div.menu ul li a:hover, div.menu ul li a.current {
color: #fff;
background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}
Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?
Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues
There are hundreds of articles related to this topic so you should google things like
IE and CSS compatibility
IE and CSS issues
It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.
It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...
I made a new website and my problem is that the menu is ok in FF and other browsers, but not in IE.
The problem is, it wont list the list elements, no hover , no color, and not inline.
here is the code
nav {
margin-top: 15px;
}
nav ul {
position: relative;
left: 297px;
}
nav li {
float: left;
padding: 0 20px;
font-size: 12px;
line-height: 65px;
background: url(images/line.png) no-repeat right 10px;
height: 72px;
text-transform: uppercase;
}
nav li a {
color: #656464;
text-decoration: none;
display: block;
}
nav li:hover {
background: url(images/hover.png) repeat-x 0 35px;
color: #242424;
}
could please someone could give me a hint?
nav is an HTML5 element; old IEs will not recognize it and thus won't apply your styles.
To make IE recognize HTML5 markup, place the HTML5 shiv on your page, then declare a rule for nav and any other HTML5 elements you use, giving them a display: block style, just above the CSS that you have now.
<nav> is fine to use on a page, but you will run into problems with it when you try and style it as many browsers simply skip the tag if they don't understand it.
Wrap the <nav> tag in a wrapper div and style that instead, and strip away any styling from the semantic tags so they are naked.