My navigation is changing position in windows explorer 9. It should sit under the heading of the site and works perfectly in Chrome and newer versions of internet explorer. In 9 it appears over the main heading at the top of the page. I tried adding a border around the .nav class and in explorer it adds a border where the nav should be and its new position at the top of the page, weird! Hope someone can help.
link below is a jsbin showing the problem.
Joe
HTML5
http://jsbin.com/lehul/1/edit?html,css,output
This is very problematic because it's entirely encased in an anchor, so in theory, none of the menu links should work correctly either.
http://jsbin.com/lehul/1/edit#/zuvaxubo/1/edit
This should fix it:
<div class="background_nav"></div>
<div id="InvisHeader">
<div class="container">
<a href="index.html" style="text-decoration: none;">
<div id="heading">
<h1>Suzi Mclaughlin Design</h1>
<p>Designing flowers and stuff since forever like u know and stuff!</p>
</div> </a>
<div class="nav">
<ul>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Related
I am having an issue with IE positioning for li items position:absolute; . The structure works fine in all other browsers like this:
HTML
<div class="container">
<div class="container-nav">
<ul class="nav">
<a href="#">
<li id="an-item">Hi</li>
</a>
<ul>
</div>
<div>
All parent containers are position:relative and work fine in other browsers. In IE with this format the items start the positioning relative to outside the container. The only way I got it to be right is adding position:absolute; to the <a> tag. When I do this though it throws off all the other browsers. Any way to fix this? Should I use conditional CSS or is that not a standard anymore?
you can't put an anchor tag inside a ul IE doesn't allow that other browser are way friendly with some invalid HTML structure but not the case with IE what you can do is the following :
<div class="container">
<div class="container-nav">
<ul class="nav">
<li id="an-item">Hi</li>
<ul>
</div>
<div>
put your anchor tag inside the li
I think it'll be best for anyone wanting to help to check my website and see the issue for him or herself. (iPad required..)
www.....net
As you see, I have 2 sections, one top section and one lower section, both have height 100%.
The lowest section has 4 div's with different shades of blue as background-color. Now..
on the iPad (and only in safari,) I get this issue where the background-color of the lowest section div's of my website get totally messed up or collapses when I change from portrait to landscape or in reverse.
My guess is that because safari has this new feature (as of ios 8) where when you scroll down the tabs section disappears, this in fact makes the viewport or height of the website really higher than the 100% that was previously sufficient, that is, before it disappeared, now if you make the tab come back when you're all the way down my page (by tapping it,) you'll see that this is true..
Is there some way to fix this?
If you need code here please ask but I think it'll be best for you to check it out yourself first.. because I have no idea where to start..
EDIT:
(by the way.. strange enough this does not happen on my iphone 6..)
Bowser.
<div id="bl-main" class="bl-main">
<section>
<a href="http://www.blog.elliotwagner.net">
<div class="bl-box">
<h2 class="bl-icon bl-icon-about">Blog</h2>
</div>
</a>
</section>
<section id="bl-work-section">
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-works">Résumé</h2>
</div>
</a>
</section>
<!-- For this section you need to set the top to be 50% not -50% -->
.bl-main > section:nth-child(3) {
top: 50%;
left: 0;
background: #5071B8;
}
<section>
<a href="books.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-blog">Books</h2>
</div>
</a>
</section>
<section>
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-contact">About</h2>
</div>
</a>
</section>
<div style="clear: both;"> </div>
</div>
I am in the middle of creating a website using Dreamweaver CC 2014. The Homepage scrolls fine, but the About page and Calendar page doesn't scroll at all and cuts off the bottom half that should be displaying. I've read the other threads that say to add the overflow: scroll code to the CSS. I have done that, but it still isn't working and I'm wondering if I have placed the code in the wrong place?
Here is the link to the Calendar page:
http://normajdougherty.com/Calendar.html
Would you look at the CSS and HTML code and let me know what the problem is? Thanks so much.
You have
position:fixed;
Specified in your navigation bar, which is effectively "locking" the page in place. If you set its position to relative, your menu items (which should also not be set to "fixed") are no longer going to be attached to the navbar.
But the way you have implemented the navbar in the first place is kind of kludgy. You don't need a separate div for the blue bar in the background.
Instead of having two overlapping fixed divs, which is a bad practice for several reasons, just place your navigation buttons in a single div with a background color, using the "background-color" property.
Also, the reason it looks "cut off" halfway down is because that's just the size of the image you're using in the background. Consider setting up a color gradient or something, or honestly just leave the background a solid color. Unless you do something particularly fancy, a big static image like that is not going to look the way you want it to.
EDIT: Okay, at second glance, it looks like your entire page is wrapped within the navigation bar div. That's why the whole page is locked in place when "position:fixed" is set. Make sure you close the tag for the navbar before the rest of the page content starts.
But still, you shouldn't have a fixed navbar like that in the middle of the page, as it will scroll down with the rest of your content and just end up looking really bad.
It is because you set
positon:fixed;
in navbar class.
remove it and page will work fine
So remove
position:fixed
from .navbar class in calendar.css
You're facing this problem because the content part of your page is wrapped inside the navbar div which has been assigned a fixed position. You will need to add the intro div and the <iframe> after the navbar div for your website to function properly.
This is how that particular part of code currently looks like on your website (notice <div class="intro"> and the <iframe> is inside <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br>
<center>
<iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</center>
</div>
And this is how you should modify it (both <div class="intro"> and the <iframe> are added after <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br/>
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>
Add this two styles in at header section of Calendar.html (this code is writing as internal css, because this code don't affect other pages)
#menu {position: absolute; }
.navbar {position: static;}
So i have a 'meganav' in my site that is essentially a side nav in an area, that is floated left and takes up a 3rd of the site, then once a parent anchor is clicked, it opens up its child div with a class of 'meganav-div', which opens up to the right and takes up the other 2/3rds of the wrapper area appearing above whatever is in that area.
Currently i have it all working in all browsers, apart from ie6 and ie7, where you can open the first item (div#one) and click on everything just fine, however, anything underneath this (div#two, div#three etc) are not working in that any links inside these divs are not clickable. I have a close button in each div that works on all browsers but not ie6 and 7. The cursor even changes to a pointer on all the anchors, but just will not click. Im assumint that this is something to do with z-index due to the first one working and then not the ones further down the nav list, but i have added the same z-index for all .meganav-div's and still no joy.
Please find the code below. Any help would be much appreciated. thanks. Please find a link to jsfiddle: http://jsfiddle.net/tomiswoot/vqJnY/1/
<section id="herocontainer">
<div class="hero-white">
<aside>
<ul id="mainnav">
Nav item 1
<!--===MEGANAV one====----->
<div id="one" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 2
<!--===MEGANAV two====----->
<div id="two" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 3
<!--===MEGANAV three====----->
<div id="three" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 4
<!--===MEGANAV four====----->
<div id="four" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 5
<!--===MEGANAV five====----->
<div id="five" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
</ul>
</aside>
</div>
</section>
It's caused by the fact that you have multiple close buttons with the same id=close1 - which makes your html invalid. I changed it to class=close1, now it seems to be working (i also changed positioning a bit for more easy testing)
http://jsfiddle.net/vqJnY/7/
I am using the following rule to display a dot when the web is visited by a IE.
However, I don't know why the li.iedot doesn't work for IE6.0. In other words, all #nav-primary li displays the dot rather than #nav-primary li which has class .iedot.
#nav-primary li.iedot
{
font-size:110%;
color:#666;
*background:url(http://static02.linkedin.com/scds/common/u/img/bg/bg_grey_dotted_h-line_3x1.png) no-repeat 0 7px;
padding-right:2px;
*padding-right:6px;
*padding-left:6px;
*zoom:1;
}
<body>
<div class="member" id="header">
<div class="wrapper">
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab iedot" id="nav-primary-home">
<span>Home</span>
</li>
<li class="tab iedot" id="nav-primary-profile">
<span>Profile</span>
</li>
<li class="tab" id="nav-primary-about">
<span>About</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
1> How to fix it? Or IE just cannot do it.
2> Where I can find some website that indicates which css feature is supported by IE?
Thank you
Quirksmode by ppk is the place to learn about the browser inconsistencies.
Added: why it doesn't work --
I think the IE 6 bugs with elements that have multiple classes may be tripping you up.
Test this out by changing your html to be
<li class="iedot" id="nav-primary-home">
instead of
<li class="tab iedot" id="nav-primary-home">
If that's the problem, then you'll need to use only one class name in the element. You could either invent a bunch of new class names or add a wrap div/span with the iedot class.