Ficlkering Buttons when using IE7 and firefox

gfoley952 · 03-28-2011, 09:48 AM

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 · 03-28-2011, 03:15 PM

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.

HTML Code:

<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 · 03-29-2011, 08:28 AM

Quote:

Originally Posted by 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.

HTML Code:

<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 · 03-30-2011, 07:28 PM

Quote:

Originally Posted by 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.

HTML Code:

<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 · 03-30-2011, 07:39 PM

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:

HTML Code:

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

Code:

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 · 03-31-2011, 08:39 AM

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 · 03-31-2011, 02:43 PM

Quote:

Originally Posted by 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

I think the problem is from this code:

index.html (line 136)

Code:

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

index.html (line 146)

Code:

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

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 · 03-31-2011, 04:29 PM

Quote:

Originally Posted by 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?

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!

03-28-2011, 09:48 AM	#1
gfoley952 New Member Join Date: Mar 2011 Posts: 5	Ficlkering Buttons when using IE7 and firefox 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

03-28-2011, 03:15 PM	#2
notarypublic Silver Member Join Date: Feb 2011 Posts: 191	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. HTML Code: <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. __________________ http://www.joshualoves.com/

03-30-2011, 07:39 PM	#5
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	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: HTML Code: <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> Code: 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! __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

03-31-2011, 08:39 AM	#6
gfoley952 New Member Join Date: Mar 2011 Posts: 5	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?