Strange flicker when nav is clicked

Hi AndyD

I viewed your site in IE7 and seems OK, only thing i noticed was your red border at the bottom of the page appears before rest of page content and then moves down and into position, is that what you mean?

George

Yup... exactly what I meant.... so it is sort of a flicker, well kinda, well, may be not so much of a flciker, well, maybe not at all.... lol

Andy

//mod edit: dupes cleaned up --gary

I'm not really seeing a flicker. And your validation error is because your form has no action. You don't need a form to pop up another window - just use a normal anchor.

I think George pointed it out more correctly than myself... it looks as though the bottom red margin is appearing earlier in the page than the rest of the contents.... does anyone have any suggestion as to remedy the problem? Should a height be set for each of the pages perhaps? The footer is imported as an ssi... could that be the problem?

The validation error seems somewhere different now that I have removed the form tags....this now

Someone has told me that there are problems with the position of the navigation bar on Macs.... can anyone advise? I don't use Macs at all.

Cheers
Andy

No. A browser only reads the code on a page after it's been parsed; it doesn't care which or how many pieces were used to put it together.

You can't wrap an unordered list in a paragraph.

Hi AndyD

Sorry for delay in getting back, i checked your site in firefox and the red border does not jump up, but your main content jumps to the right and then centres when navigating from page to page

If possible could you post your css and html and i'll take a closer look for you.

George

HI George,
Here's the Gubbings....
XHTML

Alpha Ecology :: Leadhills :: Lanarkshire ::

• Phase I Assessment


• Extended Phase I


• Hedgerows


• NVC


• Invasive Species

 

  species

• Protected Species

European Protected Species (EPS)

Development Licences

 

 Assessment

Ecological Impact Assessment

Appropriate Assessment

 

   Design

• Mitigation


• Habitat Enhancement


• Habitat Creation


• Management Planning


• Site Supervision / Watching Briefs

 

Alternative content

Alpha can complete surveys for European Protected Species
(EPS) such as Otter, all Bats and Dormouse amongst others, and can compile
EPS Licence applications on your behalf. We can work with your architect
or engineer to design a range of enhancement, mitigating and compensatory
measures and provide a full on-site supervisory and briefing service to
suit your project and timescale.

Alpha Ecology offers

• Affordability to the public and private sectors, NGOs,
  and residential needs


• Valuing your project and keeping you informed at all
  stages, delivering to your requirements


• Quality Assurance, your work will be carried out by
  Members of the Institute
  of Ecology and Environmental Management (IEEM) practicing under the
  Code of Professional Conduct

If you need advice and guidance on any issue please call
- with no obligation to yourself - or submit an inquiry using our message
box

CSS:body { font-size: 62.5%; font-family: arial, verdana, sans-serif; /*padding: 5% 0 0 0;*/ background: #e7e7e7;/*#FCE6DC*//*#f8eae4;*/ height: 100%; /*added to try to remove flicker*/ } /*navigation start*/

/*-------------------------------------------
- NAV
-------------------------------------------*/
* { margin: 0; padding: 0; }

.nav a {text-decoration: none;}
.nav a:hover { text-decoration: none;}

.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clear { display: inline-block; }

/* Hides from IE-mac \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* End hide from IE-mac */

/* image replacement general properties */
ul.IR li {
position: relative;
/* The original method recommends setting this so that the text doesn't peak out if you resize the text.
But overflow also includes our dropdown list, so we need the overflow to be visible. */
/*overflow: hidden; */
font-size: 0.9em;
}

.IR em {
display: block;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

/* For IE5.x mac only */
* html>body .IR {
position: static;
overflow: visible;
font-size: 10px;
}
* html>body .IR em { position: static; }

/* image replacement specific properties */
.nav { list-style: none; }
.nav li { float: left; padding-bottom: 10px; } /* add a little bottom padding to make sure the sub menus don't disappear before selecting them */
.nav li, .nav li em {height: 29px; }/*{height: 40px; }*/

* html>body ul.nav li em { margin-bottom: -40px; } /* for ie5.x/mac only */

.link1 em, .link2 em, .link3 em, .link4 em, .link5 em, .link6 em, .link7 em, .link8 em {
background: url(../images/links.gif) no-repeat;
cursor: pointer; width: 5px;
/* IE5 requires cursor: hand; however this is not valid CSS2 */
}
.link1 { left: 0; width: 101px; margin-right: 0px;}/*width was 101 { left: 0; width: 61px; margin-right: 1px;}*/
.link1 em { background-position: 0 0; width: 101px;}/*{ background-position: 0 0; width: 61px;}*/
.link1:hover em { background-position: 0 -30px; }/*{ background-position: 0 -40px; }*/
.link2 { left: 0px; width: 100px; margin-right: 0px}/*width 102 { left: 0px; width: 81px; margin-right: 1px}*/
.link2 em { background-position: -105px 0; width: 100px;}/* -103{ background-position: -71px 0; width: 81px;}*/
.link2:hover em { background-position: -105px -30px; cursor: default;}/*{ background-position: -71px -40px; cursor: default;}*/
.link3 { left: 0px; width:100px; margin-right: 0px}/*{ left: 0px; width: 75px; margin-right: 1px}*/
.link3 em { background-position: -209px 0; width: 100px;}/*-207{ background-position: -162px 0; width: 75px;}*/
.link3:hover em { background-position: -209px -30px; cursor: default;}/*{ background-position: -162px -40px; cursor: default;}*/
.link4 { left: 0px; width: 99px; margin-right: 0px}/*width 120 { left: 0px; width: 83px; margin-right: 1px}*/
.link4 em { background-position: -314px 0; width: 99px;}/* -313{ background-position: -247px 0; width: 83px;}*/
.link4:hover em { background-position: -314px -30px; cursor: default;}/*{ background-position: -247px -40px; cursor: default;}*/
.link5 { left: 0px; width: 104px; margin-right: 0px}/*width 83{ left: 0px; width: 96px; margin-right: 1px}*/
.link5 em { background-position: -418px 0; width: 104px;}/*bg position -435{ background-position: -340px 0; width: 96px;}*/
.link5:hover em { background-position: -418px -30px; cursor: default;}/*{ background-position: -340px -40px; cursor: default;}*/

.nav a { display: block; font-weight: normal; }
* html .nav a { height: 1%; }

.nav li ul {
position: absolute;
z-index: 10; /* show the dropdowns above the images */
top: 30px; /* top:40px position the dropdowns a set distance from the top of the image */
left: -999em;
list-style: none;
width: 191px;/*191px*/
margin: 0px 0px 0px 0px;/*0px 0px 0px -9px;*/
padding: 20px 0px 0px 0px;
background-image:url(../images/submenutop_bg2.gif);
background-repeat:no-repeat;
background-position: top;
z-index: 100;/*try bring position of dropdowns above movie*/

}

.nav li:hover ul { position:absolute; left: -9px; .left: -8px; width: 190px; _left: -16px; z-index: 100;/*try bring position of dropdowns above movie*/
}

.nav li li {
height: auto; /* reset the height and padding set on the IR list items */
padding-bottom: 0;
font-size: 110%;
width: 191px;
z-index: 100;/*try bring position of dropdowns above movie*/

}

.nav li ul a {
font-family: Arial, Helvetica, sans-serif;
color: #dadada;
width: 162px;
margin: 0px 0px 15px 8px;
_margin-left: 16px;
padding: 5px 0px 5px 13px;
_padding: 5px 0px 5px 11px;
.padding: 5px 0px 5px 11px;
font-size: 11px;
z-index: 100;/*try bring position of dropdowns above movie*/

}
.nav li ul a:hover {
color: white;
background-color: #b9d08c;/*#420302*/
}

.bottomone {
background-image:url(../images/submenubottom_bg.gif);
background-repeat:no-repeat;
margin-left: 7px;
.margin-left: 6px;
_margin-left: 7px;
margin-bottom: -20px;
padding: 0px;
z-index: 100;/*try bring position of dropdowns above movie*/
}

#menu {
position: absolute;
left: 231px;/*31px*/
top: 80px;/*72px*//*226, 300*/
height:35px;/*added to bring down to sit on movie in IE*/
z-index: 100;

}
/*carwashend*/

/*h1 {
font-size: 1.5em;
color:#af0606;
padding: 0 0 0 5px;
}*/

h1 {
font-size: 1.4em;
color:#000;
padding: 5px 0 0 0px;/*5 0 0 0*/
margin: 0 0 0 5px;/*0 0 0 15*/
}
h2{
font-size: 1.2em;
color:#af0606;
text-decoration: underline;
padding: 10px 0 0 5px;/*6May change from 10 0 0 5 to 10 0 0 0*/
margin: 0 0 0 15px;/*6May change from 0 0 0 15 to 0 0 0 0*/
}

h3{
font-size: 1.1em;
color:#000;
text-decoration: underline;
padding: 10px 0 0 5px;/*6May change from 10 0 0 5 to 10 0 0 0*/
margin: 0 0 0 15px;/*6May change from 0 0 0 15 to 0 0 0 0*/
}
.test {
font-size: 1.0em;
line-height: 1.4;
color:#fd8b59;
padding: 0 0 0 5px;
}

#wrapper{
position: relative;
border-top: 10px solid #af0606;/*to remove phototop div*/
border-bottom: 10px solid #af0606;/*to remove bottomred div*/
width:750px;
margin: 0 auto;
background-color: #fff;
height:100%; /*to try to remove flicker on loading*/
}

#wrapperthanks{
position: relative;
border-top: 10px solid #af0606;/*to remove phototop div*/
border-bottom: 10px solid #af0606;/*to remove bottomred div*/
width:450px;
margin: 0 auto;
background-color: #fff;
}

/*-------------------------------------- Main text content boxes -------------------------------------------- */

#one {
width: 750px;
background: #ffffff;
font-size: 1.0em;
padding: 0;
}
#one img{
float:left;
}

#two {
position: relative;/*relative*/
width: 750px;
height:220px;
font-size: 1.3em;/*1.5*/
font-weight: bold;
/*background: url(hills.jpg);*/
float: left;
font-family: arial, verdana, sans-serif;
color:#fff;
padding: 38px 0 0 0px; /*22 0 0 0 30th April 08*//*(0)*/
margin: 0px 0 0 0; /*added this to try to move the movie down and reposition menu in IE*/
/*text-align: justify;*/
/*z-index: 1;*/
}

#three {
position: relative;
width: 150px;
height: 470px;/*270 b4 form*/
background: #af0606;
float: right;
font-size: 1.2em;
color: #fff;
}

#four {
/*float: left;
width: 750px;
height: 33px;*/
/* original working position: relative;
width: 720px;
height: 33px;
background: url(../graphics/navbgimage.jpg);*/
}

#fiveindex {
width: 500px;/*650px without div three*/
font-size: 1.2em;
position: relative;
background: #fff;
float: left;
margin-left: 50px;
height: 100%;/*added to try to remove bg flicker*/
/*margin-right: 5%;*/
/*height: 628px;*/

}

#fivethanks {
width: 400px;/*650px without div three*/
font-size: 1.2em;
position: relative;
background: #fff;
float: left;
margin-left: 50px;
/*margin-right: 10%;*/
/*height: 628px;*/

}

#five {
width: 650px;/*650px without div three*/
font-size: 1.2em;
position: relative;
background: #fff;
float: left;
margin-left: 50px;
height: 100%;/*added to try to remove bg flicker*/
/*margin-right: 10%;*/
/*height: 628px;*/

}

#six {
position: relative;
width: 750px;/*30px, 750px*/
height: 10px;
background-color: #af0606;
}

#six img{
/*float: right;*/
}

/*#phototop {
position: relative;
width: 750px; was 30px, 750px
height: 10px;
background-color: #af0606;

}*/

/*#bottomred {
position: relative;
width: 750px;30px, 750px
height: 10px;
background-color: #af0606;
/*background: url(/graphics/topright.jpg);*/
}

#clientimage {
position: relative;
width: 400px;
height:270px;
font-size: 1.5em;
font-weight: bold;
/*background: url(../graphics/trainersW400H270.jpg);*/
float: left;
font-family: arial, verdana, sans-serif;
color:#fff;
padding: 0 0 0 0px;
/*text-align: justify;*/
}

#clientdescription {
position: relative;
width: 350px;
height: 270px;
background: #000;
border-width: 10px 1px 1px 1px;
border-color: #f7d0bf;
float: left;
font-size: 1.2em;
color: #fff;
}
/*------------------------------------- GRAPHICS FORMATTING -- Photos included within the content area -------------------------*/

div.img
{
margin: 12px 10px 2px 2px;/*2px*/
/* border: 1px solid #0000ff;*/
height: auto;
width: auto;
float: right;
text-align: center;
}
div.img img
{
/*display: inline;*/
margin: 3px;
/*border: 1px solid #ffffff;*/
}

div.imgb
{
margin: 12px 2px 2px 15px;
/* border: 1px solid #0000ff;*/
height: auto;
width: auto;
float: left;
text-align: center;
}
div.imgb img
{
/*display: inline;*/
margin: 3px;
/*border: 1px solid #ffffff;*/
}
/*div.img a:hover img {border: 1px solid #0000ff;}*/
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}

img {
border: none;
}

img.floatLeft {
float: left;
margin: 4px;
}
/*----------------------photo at the bottom of the page------------------*/
#bottomphoto {
width: 750px;
height: 102px;
background: url(../graphics/forth.jpg);
}
/*-------------------------------------------------------FORM Processing ------------------------------------------*/

.form { height:30px; margin-bottom:5px; }
.form input {width:100px; padding:2px 0px 4px 3px; border-color:#DBDBDB; color:#444444; }
textarea { width:120px; height:100px; padding-left:2px; border-color:#DBDBDB; color:#444444; overflow:auto;}

.auto { width:auto; height:auto;}

/*------------------------------------------------------- FOOTER styling -----------------------------------------*/
#footer {
background: #fff;
text-align: center;
font-size: 1.0em;
font-weight: normal;
color:#000;
margin: 10px 0 0 0;
padding: 10px 0 0 0;
}

#footer a {
font-family: verdana, arial, sans-serif;
font-size: 1.1em;
font-weight: bold;
color:#000;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

/*-------------------------------------------------------- Text formatting ---------------------------------------------------*/

.projects {
font-size: 1.4em;
color:#fff;/*fd8b59*/
padding: 10 0 0 10px;
}

.services{
font-size: 1.0em;
line-height: 1.4em;/*added to add space between lines of text*/
color:#fff;
padding: 20px 0 0 10px;
font-weight: bold;
/*text-decoration: underline;*/
}

.content {
font-family: verdana, arial, sans-serif;
font-size: 1.0em;
padding: 10px 0px 0 0px;/*top padding 10 added 23rd-04-08 to 10 20 0 20 - 6May change to 10 0 0 0*/
text-align: justify;/*justify*/
}

.company {
font-family: arial, verdana, sans-serif;
color: #000;
}
.examples {
font-family: verdana, arial, sans-serif;
font-size: 1.0em;
color:#fff;
padding: 10px 0 0 20px;/*000 10*/
}

.orange {
color: #ff6600;

}
.address {
font-family: arial, verdana, sans-serif;
font-size: 1.1em;
padding: 0 0px 0 0;
margin: 0 0 0 570px;
}
.address a {
text-decoration: none;
}


/*------------------------------------------------------------ Links --------------------------------------------------------*/

a {
color: #0070C0;
}

h2 a {
color: #af0606;
}

.services a {
color: #fff;
font-weight: bold;
}

.examples a {
font-family: verdana, arial, sans-serif;
font-size: 1.0em;
font-weight: bold;
color:#fd8b59;
text-decoration: none;
}

.examples a:hover {
text-decoration: underline;
}

/* ------------------------------------------Additional Lists-----------------------------------------------*/
#five ul {
padding: 0 0 0 50px;
width: 450px;
}

ul.content {
font-family: verdana, arial, sans-serif;
font-size: 1.0em;
line-height: 1.1em;
padding: 10px 20px 0 20px;/*top padding 10 added 23rd-04-08*/
text-align: justify;
}

ul.content li {
font-family: verdana, arial, sans-serif;
font-size: 1.0em;
line-height: 1.1em;
padding: 10px 20px 0 20px;/*top padding 10 added 23rd-04-08*/
text-align: justify;
}

ul.references {
width:200px;
float:left;
}
ul.references li {
/*float:left;*/
line-height:26px;
height:26px;
width:100px;
list-style-type: none;/*added to remove disk*/
}
ul.referencesr {
width:200px;
float:right;
}
ul.referencesr li {
float:right;
line-height:26px;
height:26px;
width:100px;
list-style-type: none;/*added to remove disk*/
}

/*----------------------------------------------Validation----------------------------------------------*/
#validation{
position: relative;
/*border: 1px solid #fd8b59;*/
width:750px;
margin: auto;
/*background-color: #fff;*/
}
/* --- Weblinks RULES --- */

#weblinks
{
clear: both;
padding: 20px 4% 2em;/*35px 4% 2em;*/
background: #fff url(topnav.jpg) repeat-x 0 10px;
font-size: 110%;
}

#weblinks div
{
float: left;
width: 20%;
padding-right: 2%;
margin-right: 2%;
background: url(dots-vertical.gif) repeat-y 100% 0;
}

#weblinks p
{
clear: both;
width: 59%;
margin: 0;
padding: 2em 0;
}

#weblinks ul
{
margin: 0 0 1em 0;
padding: 0;
list-style-type: none;
}

#weblinks li
{
background: url(arrow.gif) no-repeat 0 .4em;
padding-left: 10px;
}

Any advice respectully appreciated...

Andy

Hi Andy

I'm viewing your css in VS, i'll post the errors it has found in a few minutes, you have a few

George

I tried to edit the above post but was disallowed, being told I did not have the authorisation level required... anyway, what I wanted to add was that the Home page and Species page transitions do not seem to suffer from the described problem for some reason (on Win/Moz2).

Andy

HI George,
Thanks, looking through the W3C Validator at the moment...
But it's gone 23:15 so think I'll have to log off soon or the wife with launch the laptop into orbit...

Andy

Hi Andy
If you can check your css and fix the following warnings and errors, it may solve your problem

Warning 2 Another object on this page already uses ID 'menu'. (You should only use 1 id per page)
Warning 7 Validation (XHTML 1.0 Transitional): Empty elements such as 'param' must end with />
Error 23 Validation (CSS 2.0): 'inline-block' is not a valid value for the 'display' property.
Error 24 Unexpected character sequence. Expected a property name for the " : " declaration. (It means these .left:-8px; .padding:5px0px5px11px;.margin-left:6px;)

If i remember correctly, class and ids can only contain letters and number, the . is not valid unless its in your css file

Error 27 The closing brace ('}') does not match an opening brace ('{').

/*#phototop { position: relative; width:
750px; was 30px, 750px height: 10px; background-color: #af0606; }*//*#bottomred
{ position: relative; width: 750px;30px, 750px height: 10px; background-color: #af0606;
/*background: url(/graphics/topright.jpg);*/

THIS ONE >>>>> }

Also in your html you have a class called "nav IR clear" but this does not exist in your css.

Hope the above helps
George

Hi
Sorry VS is Visual Studio, i'm using VS2008

I have a feeling error 27 have be whats causing your page to flicker, but i could be wrong, i'm more of a .NET programmer than designer
George

Hi Andy
I agree, its getting late, let me know how you get on and have a good weekend
George

Slowly working my way through he W3C reports... perhaps someone could advise on the "_blahblah" css calls...? They don't seem to be validating.

Could anyone advise on some of the error calls?
105 .nav li:hover ul Parse Error .left: -8px;
105 width Parse Error width: 190px;
105 _left Parse Error _left: -16px;
106 _left Parse error - Unrecognized }
122 .nav li ul a Property _margin-left doesn't exist : 16px
124 .nav li ul a Property _padding doesn't exist : 5px 0 5px 11px
125 .nav li ul a Parse Error .padding: 5px 0px 5px 11px;
127 font-size Parse Error font-size: 11px;
129 font-size Parse error - Unrecognized }
139 .bottomone Parse Error .margin-left: 6px;
140 _margin-left Parse Error _margin-left: 7px;
141 margin-bottom Parse Error margin-bottom: -20px;
143 padding Parse Error padding: 0px;
144 padding Parse error - Unrecognized }
Cheers George and Tyssen have a good weekend yourselves

There was a link provided in the first post.

It's pretty obvious really: any rules that start with _ or . in front of them are invalid.

As far as your original problem goes, the reason I haven't tried to offer any solutions is because I don't actually see it.

Hi Andy
Try this and it may solve your problem, fix all css errors by replacing all classes and ids in your html by renaming the one that start with . and _

Remove the curly braces { that have no starting/ending brace.

All your images give them a height and width i.e

Reason for this is as follows, when a page loads its sets aside the correct amount of space for text images etc, as you have no height and width on your images/flash your page does not know how much space to set aside and this may be your problem, if you use dynamic images and cannot set the height and width in code, create a div and set it height etc to the size of the images and put the image/flash inside the div.

Same goes for any flash you have on the page, set its height and width to the size of the media or place the flash in a div

George

>> HI Tyssen, May I ask what browser etc. you are using? I see the bottom red line appear and then quickly disappear when the rest of the page loads. At present it is visible on all pages except Home and Species going to go through the source code to see if there are any differences compared to the other "flickering" pages. **EDIT: I've beenr efreshing the pages a few times and the effect seems somewhat intermittent** The "_" and "." were code was sourced from an IR navigation method I read. Many thanks for your input mate.

>>Hi George, I'll give your suggestions a try... sun's out today so it might not be until later....

Cheers Guys

Andy

I thought the problem was supposed to be with IE7 so that's what I've been looking in (although I've been looking at it first in FF as that's my default - haven't seen it in that browser either).

Well it looks very much like the code you're using is copied from the article on my site, but my code definitely doesn't include all that invalid CSS so does that mean someone else has republished the code elsewhere with all that [email protected] in it?

Hi Tyssen,
I use FF as my default too, but I am seeing it in both FF2 and IE7. It looks like the bottom red border loads with the wrapper and is pushed to the bottom of the page as the other content fills up the wrapper. I don't suppose it really matters to the page, but I find it annoying...

Sun's out here in Scotland which doesn't happen too often so think I'll have to dessert the forum and get some gardening done..

removing all the "crap" from the css has resulted in validation....

Cheers
Andy

Ah year, but it's nice when it does.

It is.... and the grass starts to grow and the pesky weeds too...

I really like the IR navigation, and want to keep away from the likes of likno, etc. so trying my best to sort this out, just in case I'm screwing up the navigation and having a knock on effect elsewhere...

Cheers
Andy