Forum Moderators: not2easy

Message Too Old, No Replies

Fouc Help!

Fouc, Css, Problem, Doh !

         

diegomh7

10:34 am on May 23, 2006 (gmt 0)

10+ Year Member



help me guys, ive got a flsh of unstyled content and i cant find a solution,

my head section is here :

<!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">

<!-- Web Design is what we do and by the look of it so do you -->

<head>
<title>UK Web Design, Internet Marketing, Sheffield, Rotherham, Web, Design,South Yorkshire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="web, design, uk, website, internet, services, logo design, sheffield, yorkshire, webdesign, ecommerce, rotherham, doncaster, barnsley, uk web design, professional, graphic design, flash, bespoke, accessibility" />
<meta name="Description" content="Wan2Design.co.uk - Professional web design in sheffield, your future is our present." />
<meta name="author" content="diego@wan2design.co.uk" />
<meta name="robots" content="index,follow" />
<meta name="copyright" content="Wan2design 2003-4" />
<meta name="revisit-after" content="7" />
<meta name="rating" content="global" />
<meta name="Classification" content="Computers/Internet/Web_Design_and_Development/Designers/Full_Service/W/" />
<link rel="Shortcut Icon" href="images/favicon.ico" />

<!-- FUNCTION FOR MAKING ROLLOVER WORK IN IE.-->
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

<!-- FIX THE FOUK -->
<link rel="stylesheet" type="text/css" media="screen" href="css/w2d.css" />

<link href="css/demo.css" rel="stylesheet" type="text/css" media="screen" />
</head>

THE CSS IS HERE

body,td,th, html {
margin-left:0;
margin-top:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;

/* SCROLL BAR */
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CCCCCC;
scrollbar-3Dlight-color: #E1E1E1;
scrollbar-arrow-color: #0099CC;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #666666;
}

a.nav:link {
color: #1B4D72;
text-decoration: none;
}
a.nav:visited {
text-decoration: none;
color: #1B4D72;
}
a.nav:hover {
text-decoration: underline;
color: #FFAD07;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FFAD07;
}
a:active {
text-decoration: none;
color: #FF3300;
}

#uk_web_design {
display: block;
width: 775px;
padding: 5px;
font-size: 9px;
text-align: center;
}

#website {
display: block;
width: 780px;
height: 100px;
}
#holder {
padding-top: 0px;
padding-right: 15%;
padding-left: 20%;
}
#navigation {
float: left;
width: 150px;
background-color: #78B3E0;
padding: 10px;
clear: left;
}
#right {
padding: 10px;
background-color: #78B3E0;
width: 150px;
float: right;
clear: both;
}

#body {
padding: 10px;
float: left;
clear: right;
}

#web {
display: block;
width: 150px;
float: left;
padding: 5px;
height: 300px;

}

#web2 {
display: block;
width: 150px;
float: left;
padding: 5px;
height: 400px;

}

#design {
background-color: #F9F9F9;
display: block;
float: left;
width: 450px;
padding: 5px;
height: 300px;
overflow: scroll;
overflow-x:hidden;
}

#design2 {
background-color: #F9F9F9;
display: block;
float: left;
padding: 5px;
height: 400px;
overflow-x:hidden;
width: 610px;
}
#design2 #design_c1_pic {
float: left;
}
#design2 #design_c1 {
width: 400px;
padding: 0px;
float: left;
height: 250px;
}

#design2 #design_c1b {
width: 400px;
padding: 0px;
float: left;
height: 250px;
background-color: #E8F1F9;
}

#website_design {
background-color: #FFFFFF;
display: block;
width: 150px;
float: left;
padding: 5px;
height: 300px;
}

#ecommerce {
width: 780px;
clear: both;
background-color: #F7F7F7;
height: 120px;
}

#sheffield_web_design {
display: block;
width: 775px;
padding: 5px;
font-size: 9px;
text-align: center;
}

.titles_blue_bg {
font-weight: bold;
color: #1B4D72;
text-align: center;
font-style: italic;
font-size: x-small;
}
#design_portfolio_online {
width: 780px;
display: block;
}
.search_box {
color: #1B4D72;
background-color: #F5F5F5;
}

.titles {
font-size:inherit;
}
.sub_headers {
color: #78B3E0;
}
.orange {
color: #FFAD07;
}

/* NAVIGATION */

#nav, #nav ul { /* all lists */
padding: 1px;
margin: 5px;
list-style: none;
float : left;
width : 11em;
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
width: 10em;
w\idth : 10em;
display : block;
color : #1B4D72;
text-decoration : none;
background-color : #F5F5F5;
border : 1px solid #A2CBEA;
padding : 0 0.5em;
z-index:auto;
}

#nav li a:hover {
color : #FFAD07;
background-color : #F5F5F5;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : 12em;
}

.blue {
color: #1B4D72;
}
.white {
color: #FFFFFF;
}
.lblue {
color: #78B3E0;
}
#people {
float: left;
width: 125px;
}

cant fix it, ive seen bluerobot and builder.com

please help

regards,

Diegomh7

doodlebee

3:56 pm on May 23, 2006 (gmt 0)

10+ Year Member



I've had to fix this a couple of times. I've seen three solutions:

1) change your "son of Suckerfish script (the one that makes IE recognize li:hover stuff) to an external javascript and link to it in the head of your document.

2) change the @import for your stylesheet to a link (which you've already done)

3) add this meta tag:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)">

Those are the only three things I've found to work for it. HTH!