Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Positioning of these links.. across browsers..ughh help..

Discussion in 'Website Design Forum:' started by bamme, Oct 12, 2010.

  1. bamme

    bamme Senior Member

    hi guys

    sorry this is an annoying question. but i wondered if you could help me with the placement of some links in different browsers on this site (the Facebook and Twitter links in the footer):

    Sanya China Travel - Tailor Made Holidays to China and the Far East

    I think im just using the wrong technique altogether to place them here (they were both meant to be positioned next to the other footer logos but cannot be a flat background image like the logos because theyre links) so I used relative positioning for them.

    If you reduced the size of the browsers it also moved the twitter and
    facebook logos over to the left (in line with how much you reduce the
    browser size).

    So then i tried to place them in <li>'s with the rest of the list items in the footer.

    The li has a simple style rule of:

    padding-top: 5px
    and the actual links:

    #footer a#facebook {width:80px; height:29px; background:url("images/facebook.gif"); text-indent:-9000px; display:block;}#footer a#twitter {width:108px; height:25px; background:url("images/twitter.gif"); display:block; text-indent:-9000px;}
    on Firefox these are now fine, but on Safari theyre incorrect - theyre at the bottom left of the screen if you have a look. I know I dont truly need lots of hacks and things as I know im just not coding this correctly.

    Can anyone help me position them correctly on all browsers? They just need to look like they do on Firefox

    Thanks so much.. help would be greatly appreciated on this one..
  2. Harry

    Harry Senior Member

    Am I right in thinking you didn't build this site? Cos the way those other logos are built in is absolutely shocking :(

    Anyway. Break the two logos out of that <ul> and put them in their own <ul id="social">.
    Then just float this <ul id="social"> right and put on some margin-right to move it away from covering the other logos.

    Make sense?

    Change #footer #sitemap to:

    background:url("images/logos.gif") no-repeat scroll right 10px transparent;height:52px;margin:25px auto 0;overflow:hidden;padding-top:15px;width:980px;
  3. bamme

    bamme Senior Member

    WOW in 8 minutes thanks so much Harry I'll try this out.

    Im glad now that I can honestly say no I didn't build this bit :) I'll try that styling out too.

    Do you have any idea of how to sort these out (screenshots) in Opera?? (I didnt build these bits either, im not really sure how they were put together so it's hard for me to troubleshoot these although I think it might just be an overflow:hidden or something..)

    THANKYOU SO MUCH for such a quick reply!
  4. Harry

    Harry Senior Member

    It's okay :)

    Yeah, placing elements (those logos) as backgrounds when they're objects in their own right a) is lazy b) incorrect and c) (as you've discovered) blood awkward to work with :(

    I see no screenshots in this thread… do they need uploading?

    Do yourself a favour and drop support for any sites you didn't build yourself haha ;)
    Some developers, they like to build sites like they know what they're doing, but really they're just being stubborn and idiotic…
  5. bamme

    bamme Senior Member

    I tried the float:right thing you suggested unfortunately this works on Firefox but again Opera doesnt display it correctly, nor does Chrome. Sorry to ask again but i really am not sure how to fix this at all.

    Here is my code (the facebook/twitter bit in bold):

    And my css for the ul and li:

    #footer {float:right;margin-right:520px;}#footer li {padding-top:5px;}
    And for the facebook and twitter links:
  6. Harry

    Harry Senior Member

    Hmm, perhaps try giving:

  7. bamme

    bamme Senior Member

    Oh! the screenshots sorry I forgot those!

    Attached Files:

  8. Harry

    Harry Senior Member


    I hate to say it but a recode may well be needed here :(
    That's properly broken!

    What is your involvement? Just inherited it? What are you to the client/project?
  9. bamme

    bamme Senior Member

    These people are my fulltime employers - I am their junior designer. My senior (is that what you call it? im not sure.. colleague anyway) build the site, i added bits and pieces here and there like the Twitter and Facebook logos, but I have no idea where to start on fixing that in those screenshots.. can anyone point me to any resources or any hints on where the problem lies?
  10. Sunburn

    Sunburn Active Member

    If your the junior, send it back up the chain of command.
    whoever coded it should take responsibility for sorting out that mess!
  11. bamme

    bamme Senior Member

    Okay i tried this, it looks like it works, then, when you resize the browser.. the Facebook and Twitter logos stay where they are :/ In Safari, they go right outside of the content aswell, all the way to the right..

    Wow is this really hard or what..
  12. Harry

    Harry Senior Member

    Okay, just say that you can't work with this as it's already broken. Go to your line manager and ask them to give the work back to those who 'built' it and rectify the mistakes they made (also say that they'll have a better chance of fixing it as they understand why they coded it that way) and once it's all rectified, then you can begin your bit.

    That's really poor that a) your seniors are so bad and b) they expect you to fix their mistakes.

    Best of luck :)
  13. bamme

    bamme Senior Member

    Yeahh but it's me who put the Facebook and Twitter links in.. so I guess it's my job to make them fit.

    As for that ugliness in the screenshots, I'll flag that up but can anyone tell me what the error is that's been made? Just makes the process quicker; the admin people and the boss boss look to me for maintaining this site. So in their eyes my prob!
  14. bamme

    bamme Senior Member

    At least if i can say I asked some people and they told me whats wrong I'll look like i did make effort and I didnt just go "here you have it not my problem too hard."
  15. Harry

    Harry Senior Member

    As for the screenshots I'd suggest running it through the validator, and selectively removing elements until it fixes itself, then add those elements back in to see at what point they cause things to break :)
  16. Harry

    Harry Senior Member

    This is the thing though, it isn't your problem.
    And the problem is it's poorly built, end of. There's no secret/mysterious answer. Something as bad as that doesn't have a 'fix', it's totally broken. That is the problem :(
  17. Renniks

    Renniks Senior Member

    As has been said, either recode it without telling them, ask them if they want to fix it / recode it, or ask them if they want you to recode it.

    It's just a mess
  18. Harry

    Harry Senior Member

    Okay Emma, really don't want to sound patronising here, so apologies if it seems that way, but picture this:


    What's wrong there? How do I fix it?

    It's kind of obvious what's wrong, but where the hell would you begin fixing it?!

    If you look at it like that then it makes it easier to see the issue haha :)
  19. bamme

    bamme Senior Member

    Hmm well i managed to fix one of the 2 screenshots. The one i have left is the indented field in the contact box, and those Facebook and Twitter links.

    To be honest I do want to say that but i do think those 2 things cant be that hard and I must just be overlooking something.. Im very wary of that validator to be honest, i know its probably the best way, but i just need to do these things quick, and guaranteed it'll pull out loadsa other stuff and ill end up going round in circles with it all
  20. bamme

    bamme Senior Member

    LOL thanks Harry. Okay.

    What i think im gonna do is just ask someone to fix it for me. Thanks for the help :)

Share This Page