why does my menu collapse in IE 11 (do not know how it is with other ) and Chrome and not in Firefox?
www.jonasfotograf.se
Apologize that I did not leave enough information, here it comes:
<nav id="uBlogsy_nav" class="main-navigation">
<ul>
<li>Home</li>
<li><a class="uBlogsy_nav_item" href="/blogg">Blogg</a></li>
<li><a class="uBlogsy_nav_item" href="/livsstil">Livsstil</a></li>
And so on..
</ul>
css:
nav.main-navigation {
float: right;
margin: 15px 40px 10px 0;
display: inline-block;
}
nav.main-navigation ul {
display:inline-block;
margin-right: 17px;
}
nav.main-navigation li {
display: inline-block;
list-style: none;
}
nav.main-navigation li a {
text-decoration: none;
color: #fff;
font-family: Arial, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
display:inline-block;
padding-right: 4%;
}
Thanks,
Jonas
that change should work in Chrome, worked in mine
nav.main-navigation li a {
...
display: block;
...
}
but somehow it does not work in my IE 11
I got it work. I´m using padding-right: 5px insted of padding-right: 4%; So it didn´t have anyting to do with display: inline-block but it was padding-right in %. Can anyone explain that?
Related
Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.
My links have these dots in them. As the picture shows.
My code is simple:
HTML
<div id="nav-wrapper">
<div id="navbar">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and the CSS
#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}
#navbar {
}
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}
My question is what is causing these dots? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.
You want to use the code - list-style: none;
so your code will look like
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}
Add this style:
list-style-type: none;
To this selector:
ul#nav li
Modify your declaration for ul#nav li to include this property
list-style:none;
http://jsfiddle.net/bcDDk/
I have inherited a site that has significant issues when displayed in IE8. Looks like a lot of them are div related, but I could use some help in fixing the problem.
The issue I am working on right now is that the divs for the phone numbers and flags are being displayed on two lines, instead of one. This ends up pushing down the content of the nav bar.
URL: fertileweb.com/demosite (slightly dated copy, latest is hosted locally)
IE8 view: !http://i.imgur.com/HaENEvu.jpg
IE10/firefox/chrome view: !http://i.imgur.com/q3mK5Bh.jpg
HTML
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/USA.png">
(425) 646-4700
</li>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/canada.png">
(800) 394-2402
</li>
</ul>
</div>
CSS
.addressBox {
float: right;
padding-top: 35px;}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;}
.addressBox ul {
float: left;
list-style: none outside none;
margin-bottom: 10px;
width: 100%;}
.addressBox li {
color: #231F20;
display: inline;
float: left;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding-left: 17px;}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;}
Thanks!
Try to add this in your CSS styles
.addresBox ul, .addresBox ul li {
white-space:nowrap;
}
The problem seems to be about browsers size instead of browsers version.
If a wordwrap doesn't make it, I would suggest using the display: table; option, as such:
.addressBox { display: table; width: 500px; }
.addressBox li { display: table-cell; }
That usually solves floating errors.
working full code with demo here
jsFiddle
html code:
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li><img src="http://images.apple.com/global/elements/flags/22x22/usa.png"> (425) 646-4700</li>
<li><img src="http://images.apple.com/ca/global/elements/flags/22x22/canada.png"> (800) 394-2402</li>
</ul>
</div>
css code:
.addressBox {
float: right;
padding-top: 35px;
}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;
}
.addressBox ul {
float: left;
list-style: none outside none;
margin: 0 0 10px 0;
padding:0;
width: 100%;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
.addressBox li {
color: #231F20;
display: block;
float: left;
list-style: none outside none;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding: 0 0 0 17px;
margin:0;
}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;
display:block;
}
Not 100% sure why, but adding the code below fixed the problem by making sure the element didn't get too small for the content - which would cause the text to wrap.I made sure to add it to a conditional style so it wouldn't have any other adverse effects.
.addressbox li {
width:133px;
}
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
The nav bar displays the correct way (horisontally) in IE 8 and above and every other browser. However only IE 5.5, 6 and 7 it displays diagonally. Can any body help?
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
}
.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}
HTML
<div class="top-nav">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li class="current_page_item"> Contact</li>
</ul>
</div>
Instead of floating each link, why not use display:inline on your li, display: inline works on IE 5.5
Also you need to remove "display: Block" as this is what is causing the links to move down.
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
display: inline;
}
.top-nav a {
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #aaa;
}
http://jsfiddle.net/YJjya/
If you need to have your items be blocks, then use inline-block. Workaround to make it work on older version or IE can be found here: Work Around Inline Block
Also here is a handy piece of code to place immediately after your first head tag. It will only display is the user is using IE 7 or later and will tell them get their sh*t together and download a new browser. It is really not worth the time trying to make your site work on every IE version as you'll end up pulling your hair out to please a few people who obviously aren't internet savvy to begin with. As Mario said only 6% of the world still use IE6... But if you take a closer look at countries such as the US or UK that number is below 1%
After Head
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
CSS
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
I've seen this problem many times. You want to float the LI and not the A that's inside the LI.
All you need to do is remove [float:left] from [.top-nav a] class and add it to the [.top-nav li] class. Your CSS would be:
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
float: left;
}
.top-nav a {
display: block;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}
I am using this code:
#menu {
margin: 0;
padding: 0;
display: block;
overflow: auto;
}
#menu li {
margin: 1px;
padding: 0;
float: left;
}
#menu li a {
display: block;
padding: 2px;
padding-left : 15px;
padding-right: 15px;
font-family: "Tahoma";
font-size: 18px;
color: #8f8b20;
text-decoration : none;
}
#menu li a:hover {
background-color: #dad68c;
padding: 2px;
padding-left : 15px;
padding-right: 15px;
}
#menu li a:active {
color: #ffffff;
background-color: #dad68c;
padding: 2px;
padding-left : 15px;
padding-right: 15px;
}
<ul id="menu">
<li>Home</li>
<li>Foods</li>
<li>Gallery</li>
<li>Site Map</li>
<li>About us</li>
<li>Contact us</li>
</ul>
For a Horizontal CSS menu which is working fine on jsFiddle but when i am using it in my site.. it is giving me bullets of the list, see the image below....
HOW TO GET RID OF THESE BULLETS
F1 F1
Help !!!
Any Key
Modify this style:
#menu li {
margin: 1px;
padding: 0;
float: left;
}
Like this: (You are missing list-style property)
#menu li {
margin: 1px;
padding: 0;
float: left;
list-style:none; // this should remove the bullets
}
More Info:
http://www.w3schools.com/CSS/pr_list-style-type.asp
Have you tried list-style?
ul {
list-style: none;
...
...
}
The CSS code is missing a rule for ul setting list-style: none
You need to override the default <li> style by adding list-style: none; to #menu. Adding that to #menu li will have the same effect, but it takes 3 extra characters. :)
The reason jsFiddle looks fine is that the CSS they're applying to the whole page is dealing with it for you.
Read more about list-style-type, and the short-hand list-style (used above).