The Website:

 

http://www.ashleymosuro.com/anntoniaredding1/about.html

 

The problems:

 

- When clicking on the image buttons on the main menu, I can see a dotted lined box appear which I think exists because of the text-indent css property

 

- The jquery I have used on the home page (EasySlider) doesn't seem to load correctly all the time, sometimes it just shows the slider cropped to just a thin rectangle

 

- I have a large amount of space underneath the footer, but why is it there? I have tried a number of ways to get rid of this space, so that my footer is at the bottom but no luck

 

- I am probably missing something very obvious with this one, but on the about page I am finding it very difficult to move the flash movie and image into the center

 

 

If anyone could help

1) Add this to css : outline:none;

2) Try absolute positioning

 #footer {
  position:absolute;
  width:900px;
  left:300px;
  bottom:0px;
}

I looked at your page in IE7 and there were no image inks to Home About, etc. because you have the text-indent on the "a" and a:hover styles so IE is throwing the images as well as the text links off-screen.

 

You need to delete text-indent from those styles and add a span with margin-left (not text indent):-

<li id="home"><a href="home.html" ><span>Home</span></a></li>

 

and edit the CSS with margin-left for the span style:-

#home a { 
background:url(../images/home.png) no-repeat;
display:inline-block; 
width:52px;
height:40px;
/*text-indent:-9999px;*/
margin-top:75px;
padding:15px;
}
#home a:hover {  border: 1px solid red;
background:url(../images/home_over.png) no-repeat;
display:inline-block; 
width:52px;
height:40px;
/*text-indent:-9999px;*/
margin-top:75px;
padding:15px;
}
#home a span { margin-left: -9999px; }

 

Firefox was showing a very wide red border around the extended box containing the image button. The codes above get rid of the red border which was caused by the text-indent on the a:active style when you press the mouse but I've added a border to the a:hover style which is now only the size of the box. You can delete the border if you don't want it.

 

The other links would need the same edits.

Great help guys!

 

Tried changing the position to absolute and didn't seem to work, but I will have another look and see if it can solve this problem.

 

J Query issue is really bugging me!

Sorry to re-post but can anybody help with the other problems?

 

Thanks

Try this

#flash_intro a:link,#flash_intro a:visited

 

main_footer change height to 100px remove top padding

rss_icon a change height to 25px top margin to 35px same on rss_icon a:hover

main_footer p change padding top to 70px