21 replies [Last post]
AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 4 years 50 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

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

CssWebsite
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2008-05-28
Posts: 15
Points: 0

What flicker

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

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 4 years 50 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

Yup... exactly what I

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'm not really seeing a

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
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 4 years 50 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

I think George pointed it

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

AndyD wrote:The footer is

AndyD wrote:
The footer is imported as an ssi... could that be the problem?

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.

AndyD wrote:
The validation error seems somewhere different now that I have removed the form

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

CssWebsite
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2008-05-28
Posts: 15
Points: 0

Firefox causes page to jump right

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 Sad

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

George

AndyD
AndyD's picture
Offline
Enthusiast
Last seen: 4 years 50 weeks ago
Joined: 2005-03-17
Posts: 160
Points: 48

HI George, Here's the

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

Alpha Ecology :: Leadhills :: Lanarkshire ::


Alpha Ecology logo

T/F: 01659-74280

M: 07525 047818

E: [email protected]





  •  



  •   species

  • European Protected Species (EPS)

  • Development Licences

  •  





  •  Assessment
    • Ecological Impact Assessment

    • Appropriate Assessment

    •  




    •    Design
    •  











    • Alternative content








      Home

      Please be aware that our present website is in
      the final stages of a re-launch.
      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 Badgers
      or Birds, or a broad environmental assessment
      such as a Scoping/Feasibility Study or Phase
      I Habitat Assessment, an Ecological
      Impact Assessment (EcIA), or Appropriate
      Assessment (AA) for instance.

      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






      Enquiries


      Alpha Ecology

      110 Main Street

      Leadhills

      Biggar

      ML12 6XR



      Telephone/Fax

      01659 74208


      Mobile

      07525 047818




      Make an Enquiry-->





       





      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

      CssWebsite
      Offline
      Regular
      Last seen: 13 years 34 weeks ago
      Joined: 2008-05-28
      Posts: 15
      Points: 0

      Errors on page

      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 Sad

      George

      AndyD
      AndyD's picture
      Offline
      Enthusiast
      Last seen: 4 years 50 weeks ago
      Joined: 2005-03-17
      Posts: 160
      Points: 48

      I tried to edit the above

      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

      AndyD
      AndyD's picture
      Offline
      Enthusiast
      Last seen: 4 years 50 weeks ago
      Joined: 2005-03-17
      Posts: 160
      Points: 48

      HI George,

      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

      CssWebsite
      Offline
      Regular
      Last seen: 13 years 34 weeks ago
      Joined: 2008-05-28
      Posts: 15
      Points: 0

      Errors found

      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

      CssWebsite
      Offline
      Regular
      Last seen: 13 years 34 weeks ago
      Joined: 2008-05-28
      Posts: 15
      Points: 0

      VS

      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 Smile
      George

      CssWebsite
      Offline
      Regular
      Last seen: 13 years 34 weeks ago
      Joined: 2008-05-28
      Posts: 15
      Points: 0

      I agree getting late

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

      AndyD
      AndyD's picture
      Offline
      Enthusiast
      Last seen: 4 years 50 weeks ago
      Joined: 2005-03-17
      Posts: 160
      Points: 48

      Slowly working my way

      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

      Tyssen
      Tyssen's picture
      Offline
      Moderator
      Brisbane
      Last seen: 7 years 15 weeks ago
      Brisbane
      Timezone: GMT+10
      Joined: 2004-05-01
      Posts: 8201
      Points: 1386

      CssWebsite wrote:If possible

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

      There was a link provided in the first post.

      AndyD wrote:
      Could anyone advise on some of the error calls?

      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
      Post a link. If you can't post a link, jsFiddle it.
      My blog | My older articles | CSS Reference

      CssWebsite
      Offline
      Regular
      Last seen: 13 years 34 weeks ago
      Joined: 2008-05-28
      Posts: 15
      Points: 0

      Possible cause of problem

      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

      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

      AndyD
      AndyD's picture
      Offline
      Enthusiast
      Last seen: 4 years 50 weeks ago
      Joined: 2005-03-17
      Posts: 160
      Points: 48

      >> HI Tyssen, May I ask what

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

      Tyssen
      Tyssen's picture
      Offline
      Moderator
      Brisbane
      Last seen: 7 years 15 weeks ago
      Brisbane
      Timezone: GMT+10
      Joined: 2004-05-01
      Posts: 8201
      Points: 1386

      AndyD wrote:>> HI Tyssen,

      AndyD wrote:
      >> HI Tyssen, May I ask what browser etc. you are using?

      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).

      AndyD wrote:
      The "_" and "." were code was sourced from an IR navigation method I read.

      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? Shock

      How to get help
      Post a link. If you can't post a link, jsFiddle it.
      My blog | My older articles | CSS Reference

      AndyD
      AndyD's picture
      Offline
      Enthusiast
      Last seen: 4 years 50 weeks ago
      Joined: 2005-03-17
      Posts: 160
      Points: 48

      Hi Tyssen,

      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.. Wink

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

      Cheers
      Andy

      Tyssen
      Tyssen's picture
      Offline
      Moderator
      Brisbane
      Last seen: 7 years 15 weeks ago
      Brisbane
      Timezone: GMT+10
      Joined: 2004-05-01
      Posts: 8201
      Points: 1386

      AndyD wrote:Sun's out here

      AndyD wrote:
      Sun's out here in Scotland which doesn't happen too often

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

      How to get help
      Post a link. If you can't post a link, jsFiddle it.
      My blog | My older articles | CSS Reference

      AndyD
      AndyD's picture
      Offline
      Enthusiast
      Last seen: 4 years 50 weeks ago
      Joined: 2005-03-17
      Posts: 160
      Points: 48

      It is.... and the grass

      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