Pixel perfect in Chrome and Safari, but IE and Firefox trouble!

HTML & CSS
1

Hello everyone!

I’ve been racking my brains on this one but can’t work out what I’ve done (or not done) :confused:

This page I’m working on is spot on in Chrome and Safari however in IE (8) and Firefox (3.6) my numbers and previous and next buttons are moving up slightly and therefore out of line.

Here is a linky. http://aminternetdesign.co.uk/test/testpage.html

Anyone got any ideas?

2

Ah, right, the jQuery slideshow script is looking for elements and ids that no longer exit. That’s a pain. (That’s the problem with scripts you didn’t write yourself. Not always easy to work out what they need to function.)

I’m not sure which of those ids/elements are required by the script to make the functionality of the slideshow work. If you look through the slideshow scripts, you will be able to see the elements, classes and IDs it is looking for, and maybe will have to replace them or refashion them. :confused:

3

Hi, instead of absolutely positioning the Arrows, the next and previous numbers, and then the last arrow, place htem using floats. I could easily just tell you to change the margin-top to be greater on the numbers although that would be unjust of me to tell you how to do this poorly :slight_smile:

I’d recommend changing it to floats to get them all on the same line and not AP. Most of your site is in absolute positioning though, get away from that :slight_smile:

You’re shooting for pixel perfection and browsers just won’t give you taht with AP

4

this is the new version with the float and divs and ul removed.
http://aminternetdesign.co.uk/test/testpage.html
The links no longer work though, am I applying the classes correctly?

Here is the original with beautifully working links and not so beautiful alignment. :mad:
http://aminternetdesign.co.uk/test/nspcc-ie2.html

If anyone has any ideas it’ll be virtual high fives all round!

5

Wow, thank you for such quick replies. I’ll have a go at floating that lot.

6

Well, the float seems to have got things inline across all browsers but it’s destroyed all the functionality of the number links and the previous and next. I tried to apply the classes which were originally part of the divs.

Any idea how I can retain that functionality?

7

I would suggest removing all those divs, ULs and absolute positioning within #controls, as I don’t see the point of them. It looks like this would work as one line of text with links for the back and forward buttons.