Strange flicker when nav is clicked
Enthusiast
Posted: Thu, 2008-05-29 16:08
HI
I seem to have a strange flicker on my site when I click the navigation. I am not sure what is happening but wondered whether anyone could advise?
The site also seems not to validate as I have JavaScript I think, could anyone advise on this too please?
Mod edit: Link removed at author's request
Cheers
Andy
Regular
Posts: 15
Joined: 2008-05-28
What flicker
Posted: Thu, 2008-05-29 19:20
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
Enthusiast
Posts: 129
Joined: 2005-03-17
Yup... exactly what I
Posted: Thu, 2008-05-29 19:29
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
Moderator
Posts: 6781
Joined: 2004-05-01
Location: Brisbane
I'm not really seeing a
Posted: Thu, 2008-05-29 21:05
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.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Enthusiast
Posts: 129
Joined: 2005-03-17
I think George pointed it
Posted: Fri, 2008-05-30 16:23
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
Moderator
Posts: 6781
Joined: 2004-05-01
Location: Brisbane
AndyD wrote:The footer is
Posted: Fri, 2008-05-30 21:29
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.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 15
Joined: 2008-05-28
Firefox causes page to jump right
Posted: Fri, 2008-05-30 21:43
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
Enthusiast
Posts: 129
Joined: 2005-03-17
HI George, Here's the
Posted: Fri, 2008-05-30 21:59
HI George,
Here's the Gubbings....
XHTML
<!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" lang="en">
<head>
<title>Alpha Ecology :: Leadhills :: Lanarkshire :: </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="ecology, industry, assessment, reports, surveys, planning, badger, bat, reptile, mammal" />
<link rel="stylesheet" href="graphics/alphaecoTWO.css" type="text/css" />
<!--change to alphaecoTWO-->
<script language="JavaScript" type="text/javascript">
<!-- Idea by: Nic Wolfe -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=400,left = 440,top = 250');");
}
// End -->
</script>
</head>
<body>
<div id="wrapper">
<div id="one">
<img src="graphics/logo.gif" alt="Alpha Ecology logo"/><br />
<p class="address">T/F: 01659-74280<br />
M: 07525 047818<br />
E: <a href="mailto:info@alphaecology.co.uk">info@alphaecology.co.uk</a></p></div>
<br style="clear:both;" />
<!-- Main Menu -->
<div id="menu">
<ul class="nav IR clear">
<li class="link1">
<a href="http://www.alphaecology.co.uk/index.shtml"><em> </em> Home</a> </li>
<li class="link2">
<a href="habitat.shtml"><em> </em> habitat</a>
<ul>
<li><a href="http://www.alphaecology.co.uk/habitat.shtml#phase">Phase I Assessment</a></li>
<li><a href="http://www.alphaecology.co.uk/habitat.shtml">Extended Phase I</a></li>
<li><a href="http://www.alphaecology.co.uk/habitat.shtml#hedgerows">Hedgerows</a></li>
<li><a href="http://www.alphaecology.co.uk/habitat.shtml#nvc">NVC</a></li>
<li><a href="http://www.alphaecology.co.uk/habitat.shtml#invasive">Invasive Species</a></li>
<li class="bottomone"> </li>
</ul>
</li>
<li class="link3">
<a href="species.shtml"><em> </em> species</a>
<ul>
<li><a href="http://www.alphaecology.co.uk/species.shtml#protected">Protected Species</a></li>
<li><a href="http://www.alphaecology.co.uk/species.shtml#eps">European Protected Species (EPS)</a></li>
<li><a href="http://www.alphaecology.co.uk/species.shtml#licences">Development Licences</a></li>
<li class="bottomone"> </li>
</ul>
</li>
<li class="link4">
<a href="assessment.shtml"><em> </em>Assessment</a>
<ul>
<li><a href="http://www.alphaecology.co.uk/assessment.shtml#EcIA">Ecological Impact Assessment</a></li>
<li><a href="http://www.alphaecology.co.uk/assessment.shtml#AA">Appropriate Assessment</a></li>
<li class="bottomone"> </li>
</ul>
</li>
<li class="link5">
<a href="design.shtml"><em> </em> Design</a>
<ul>
<li><a href="http://www.alphaecology.co.uk/design.shtml#mitigation">Mitigation</a></li>
<li><a href="http://www.alphaecology.co.uk/design.shtml#enhancement">Habitat Enhancement</a></li>
<li><a href="http://www.alphaecology.co.uk/design.shtml#creation">Habitat Creation</a></li>
<li><a href="http://www.alphaecology.co.uk/design.shtml#planning">Management Planning</a></li>
<li><a href="http://www.alphaecology.co.uk/design.shtml#supervised">Site Supervision / Watching Briefs</a></li>
<li class="bottomone"> </li>
</ul>
</li>
</ul>
</div>
<div id="two">
<center>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="220">
<param name="movie" value="headertest.swf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="headertest.swf" width="750" height="220">
<param name="wmode" value="transparent" />
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</center>
</div>
<div id="fiveindex">
<h1>Home</h1>
<p class="content"><strong>Please be aware that our present website is in
the final stages of a re-launch.</strong> Welcome to Alpha Ecology’s website
where you will find a comprehensive range of services for your commercial
or research project needs. Alpha operates throughout the UK and Europe,
whether you need a specific survey for <a href="species.shtml">Badgers</a>
or <a href="species.shtml">Birds</a>, or a broad environmental assessment
such as a Scoping/Feasibility Study or <a href="habitat.shtml#phase">Phase
I Habitat Assessment</a>, an <a href="assessment.shtml#EcIA">Ecological
Impact Assessment (EcIA)</a>, or <a href="assessment.shtml#AA">Appropriate
Assessment (AA)</a> for instance.</p>
<p class="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.</p>
<p class="content">Alpha Ecology offers
<ul class="content">
<li><strong>Affordability</strong> to the public and private sectors, NGOs,
and residential needs</li>
<li><strong>Valuing your project</strong> and keeping you informed at all
stages, delivering to your requirements</li>
<li><strong>Quality Assurance</strong>, your work will be carried out by
Members of the <a href="http://www.ieem.org.uk/" target="_blank">Institute
of Ecology and Environmental Management (IEEM)</a> practicing under the
Code of Professional Conduct</li>
</ul></p>
<p class="content">If you need advice and guidance on any issue please call
- with no obligation to yourself - or submit an inquiry using our message
box</p>
<br />
</div>
<div id="three">
<p class="projects">Enquiries</p>
<p class="examples">Alpha Ecology<br />
110 Main Street<br />
Leadhills<br />
Biggar<br />
ML12 6XR</p>
<p class="examples">Telephone/Fax<br />
01659 74208</p>
<p class="examples">Mobile<br />
07525 047818</p>
<p class="services">
<input type="button" value="Enquiry" onclick="javascript:popUp('http://www.alphaecology.co.uk/popup.html')" />
<!--<a href="mailto:info@alphaecology.co.uk">
Make an Enquiry</a>--> </p>
</div>
<br style="clear:both;" />
<div id="bottomphoto"> </div>
<br style="clear:both;" />
<div id="footer"><a href="http://www.alphaecology.co.uk/index.shtml" title="Home">Home</a>
| <a href="http://www.alphaecology.co.uk/species.shtml" title="Species">Species
</a> | <a href="http://www.alphaecology.co.uk/habitat.shtml" title="Habitat">Habitat</a>
| <a href="http://www.alphaecology.co.uk/assessment.shtml" title="Assessment">Assessment</a>
| <a href="http://www.alphaecology.co.uk/design.shtml" title="Design">Design</a><br />
<span class="company">Company number SC340807 <br /> Registered Office: 110 Main Street,
Leadhills, Biggar ML12 6XR<br /> Tel: 01659-74280 Email: <a href="mailto:info@alphaecology.co.uk">info@alphaecology.co.uk</a></span> <br />
<br />
</div>
</div>
</body>
</html>
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
Regular
Posts: 15
Joined: 2008-05-28
Errors on page
Posted: Fri, 2008-05-30 22:02
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
Enthusiast
Posts: 129
Joined: 2005-03-17
I tried to edit the above
Posted: Fri, 2008-05-30 22:09
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
Enthusiast
Posts: 129
Joined: 2005-03-17
HI George,
Posted: Fri, 2008-05-30 22:19
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
Regular
Posts: 15
Joined: 2008-05-28
Errors found
Posted: Fri, 2008-05-30 22:16
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 "<property> : <value>" 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
Regular
Posts: 15
Joined: 2008-05-28
VS
Posted: Fri, 2008-05-30 22:21
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
Regular
Posts: 15
Joined: 2008-05-28
I agree getting late
Posted: Fri, 2008-05-30 22:23
Hi Andy
I agree, its getting late, let me know how you get on and have a good weekend
George
Enthusiast
Posts: 129
Joined: 2005-03-17
Slowly working my way
Posted: Fri, 2008-05-30 22:44
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
Moderator
Posts: 6781
Joined: 2004-05-01
Location: Brisbane
CssWebsite wrote:If possible
Posted: Sat, 2008-05-31 02:26
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.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 15
Joined: 2008-05-28
Possible cause of problem
Posted: Sat, 2008-05-31 08:41
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
<img src="graphics/logo.gif" height="150px" width="300px" alt="Alpha Ecology logo" />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
Enthusiast
Posts: 129
Joined: 2005-03-17
>> HI Tyssen, May I ask what
Posted: Sat, 2008-05-31 10:59
>> 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
Moderator
Posts: 6781
Joined: 2004-05-01
Location: Brisbane
AndyD wrote:>> HI Tyssen,
Posted: Sat, 2008-05-31 11:20
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 cr@p in it?
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Enthusiast
Posts: 129
Joined: 2005-03-17
Hi Tyssen,
Posted: Sat, 2008-05-31 11:43
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
Moderator
Posts: 6781
Joined: 2004-05-01
Location: Brisbane
AndyD wrote:Sun's out here
Posted: Sat, 2008-05-31 11:51
Ah year, but it's nice when it does.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Enthusiast
Posts: 129
Joined: 2005-03-17
It is.... and the grass
Posted: Sat, 2008-05-31 12:02
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