Forum Moderators: not2easy
I have a couple of issues.
1) My site is experiencing FUOC in IE7.
2) After I have visited each link once, the upload gets increasingly slower with each additional click.
After a recommendation to add an empty script, the FUOC stopped in Safari, but not IE7.
I have used absolute positioning for almost every element on the page. I'm not sure if that matters.
I guess I'll start with this for my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>homepage</title>
<base href="http://www.example.com/" />
<link type="text/css" rel="stylesheet" href="style.css" />
<style type="text/css" media="screen">@import "style.css";</style>
<meta name="" content="generic">
<meta name="description" content="generic ">
<meta name="keywords" content="generic">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript"> </script>
</head>
[edited by: swa66 at 1:06 pm (utc) on May 4, 2009]
[edit reason] example.com /.org/.net only as a generic domains please [/edit]
How big is the file and how fast can your server hand it out?
When I added the empty script, <script type="text/javascript"> </script>, the FUOC stopped in Safari but not IE7.
My whole site is 7.99MB. I think my server should be able to handle it.
My site was originally an HTML/table based creation. My server handled that just fine. When I decided to "get smart" and join the CSS revolution...haha...that's when the uploads started slowing down and FUOC kicked in.
I really haven't heard much about this "bug" recently, the last 3 years, and all in all both method tables and CSS work better with caching. Your table site would render slower but incrementally whereas your CSS site should render fully albeit without some full graphics, then both will render quicker once cached, though CSS should then be faster
If your site has a background image, remember to also state a background color that closely matches your background graphic as a color should always render quicker until superceded by the graphic. It's by design with CSS that the unimportant graphics load last, the goal is to make sure the content is instant, pretty pictures for those using PC browsers is an added extra :)
I was having problems with using an unordered list for my nav bar. So I threw everything in its own div tag. As far as having a background color...the body background is white because the middle content is white. All elements, (my nav bar, nav buttons, a couple frilly pics), have been placed as background images within the id tags. My site is pretty basic. There really isn't THAT much going on.
Changing the Internet Options- Temporary Internet Files Option in the IE Browser certainly lessons the flicker action. However, I can't count on every person I don't know...to change that option.
I noticed..on my page...I have one link to an outside source...guess what...no flicker. So, yes, my navigation is most likely the culprite of the awful flicker. (I expected the navigation problem to only affect navigation, not the whole site.)
I've tried putting the image on the element and the anchor. Didn't work.
I'm using the type of navigation where you use one image and change the background positioning. Whenever I try to place all of the common information, (i.e. text-decoration: none, display: block, ETC) My buttons usually disappear. Err. Frustrated.
CSS:
#LeftNav {
margin: 0px;
padding: 0px;
height: 100%;
width: 343px;
position: absolute;
left: 0px;
top: 0px;
background: url(images/btn_below2.jpg) repeat-y;
float: left;
display: table-cell;
overflow: hidden;
}
#body_home #nav_hom a {
background-position: url(images/nav_bar.jpg) no-repeat -686px 0px;
display: block;
margin: 0px;
padding: 0px;
height: 43.5px;
width: 340px;
left: 0px;
top: 274px;
text-decoration: none;
float: left;
}
#nav_hom a {
background: url(images/nav_bar.jpg) no-repeat;
width: 340px;
height: 43.5px;
display: block;
left: 0px;
text-decoration: none;
background-position: 0px 0px;
position: absolute;
top: 274px;
text-indent: -1000em;
float: left;
}
#nav_hom a:hover {
background: url(images/nav_bar.jpg) no-repeat;
height: 43.5px;
width: 340px;
background-position: -343px 0px;
left: 0px;
float: left;
}
HTML:
<div id="LeftNav">
<div id="nav_img1"></div>
<div id="nav_img2"></div>
<div id="nav_img3"></div>
<div id="nav_hom"><a href="index.html"><span>Home</span></a></div>
<div id="nav_proj"><a href="projects.html"><span>Projects</span></a></div>
<div id="nav_cont"><a href="contact.html"><span>Contact</span></a></div>
<div id="nav_links"><a href="links.html"><span>Links</span></a></div>
</div>
[edited by: aguaagua at 6:09 am (utc) on May 5, 2009]
Also: While CSS allows for fractions of a pixel in height, I don't think you'll have luck with any browser actually going to render it that way, best to stick to whole pixels IMHO.
Add to CSS code:
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
OR
Add to HTML:
<script type="text/javascript">try { document.execCommand('BackgroundImageCache', false, true);} catch(e) {}</script>
However, neither are working for me. The frustrating part for me is that the Dreamweaver preview thinks that these solutions are perfect. BUT, IE doesn't agree when I load the new CSS.
I did find a website that described the fouc as having a flicker on hover. My hovers are perfect. My flicker happens on upload...unless I change the internet options/browser history settings/"check for newer versions of stored pages" to never.
Still searching...
