Ficlkering Buttons when using IE7 and firefox

[gfoley952]

Hey guys,

Can anyone please help me with this problem i am having. I made this website but in IE and firefox the buttons on the right flicker and move. In Chrome its fine.

Here is the test link:

http://test.jaycadit.com.au

Thanks

 

[notarypublic]

Looking at your code, I see your navbar is put inside an unordered list <ul> tag. This is correct, but don't forget to include list <li> tags for each link inside.

<ul class="nav">
  <div align="center">
   
<li><strong><a href="index.html">Home</a></strong></li>
<li><strong><a href="about us.html">About Us</a></strong></li>
<li><strong><a href="Services.html">Services</a></strong></li>
<li><strong><a href="contact us.html">Contact Us</a></strong></li> 
  </div>
</ul>

Try it with this <li> tags included.

 

[gfoley952]

reply

Looking at your code, I see your navbar is put inside an unordered list <ul> tag. This is correct, but don't forget to include list <li> tags for each link inside.

<ul class="nav">
  <div align="center">
   
<li><strong><a href="index.html">Home</a></strong></li>
<li><strong><a href="about us.html">About Us</a></strong></li>
<li><strong><a href="Services.html">Services</a></strong></li>
<li><strong><a href="contact us.html">Contact Us</a></strong></li> 
  </div>
</ul>

Try it with this <li> tags included.

Thanks mate tried that but it didn't work it cam out like this:

Screenshot:

 

[PixelPusher]

Looking at your code, I see your navbar is put inside an unordered list <ul> tag. This is correct, but don't forget to include list <li> tags for each link inside.

<ul class="nav">
  <div align="center">
   
<li><strong><a href="index.html">Home</a></strong></li>
<li><strong><a href="about us.html">About Us</a></strong></li>
<li><strong><a href="Services.html">Services</a></strong></li>
<li><strong><a href="contact us.html">Contact Us</a></strong></li> 
  </div>
</ul>

Try it with this <li> tags included.

I may be missing something here...but if your gonna wrap the links in a strong tag, why not cut down the markup and add the css property { font-weight:bold }?

Also your code is incorrect, you cannot have a div element nested with in a list and not within an list item. This will not validate.

 

[PixelPusher]

OP,

Your code is invalid, and I am willing to bet that is the reason you are getting this jumping issue. Remove the div element from within your list. If the associated css properties of this div are needed, apply them to the list or list items respectively. Your code should look like this:

<ul class="nav">
   <li><a href="">Home</a></li>
   <li><a href="">About Us</a></li>
   <li><a href="">Services</a></li>
   <li><a href="">Contact Us</a></li>
</ul>

ul.nav a, ul.nav a:visited {
    background-color: #FFFFFF;
    display: block;
    width: 120px;
    padding: 5px 0;
    text-decoration: none;
    text-align:center;
    font-weight:bold;
}

Text is centered with text-align property. No need for left and right padding when text is centered and width defined. Font weight is set with font-weight property. Much cleaner, validates, and no flicker!

 

[gfoley952]

Thanks for the responses guys, i tried your code Pixel Pusher and it still flickers, also when i do that all my white areas turned into the background color. Would you like me to add the code you suggested and upload it to the test site?

 

[websonalized]

Hey guys,

Can anyone please help me with this problem i am having. I made this website but in IE and firefox the buttons on the right flicker and move. In Chrome its fine.

Here is the test link:

http://test.jaycadit.com.au

Thanks

I think the problem is from this code:

index.html (line 136)

ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background-color: #FFFFFF;
    border: thin solid #000000;
    color: #FFFFFF;
  [B]  display: none;[/B]
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 100%;
    height: 25px;
    list-style-type: none;
    padding: 4px;
    [B]width: 10px;[/B]
}

index.html (line 146)

ul.nav a, ul.nav a:visited {
    background-color: #FFFFFF;
    display: block;
    padding: 5px 5px 5px 15px;
    text-decoration: none;
   [B] width: 120px;[/B]
}

you are indicating that when the user hovers over link to not be display

display: none

also, you are changing the width of the link from normal state when no hovering (120px) to width 10px when hovering.

In my opinion these two snippets are contradicting each other. Check your code

In chrome the code is just not executing completely

test by deleting display: none, and width: 10px from first code snippet

 

[PixelPusher]

Thanks for the responses guys, i tried your code Pixel Pusher and it still flickers, also when i do that all my white areas turned into the background color. Would you like me to add the code you suggested and upload it to the test site?

Uploading it couldn't hurt. Not sure what you men by "white areas". Your links are blocks with a white background and black text.

Just as websonalized stated, remove the "display:none". That is definitely the cause of the flicker. I would ditch the "width:10px" also. Don't know how I missed those lol

Good catch websonalized!