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

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:

Code:
padding-top: 5px

and the actual links:

Code:
#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..
 
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:

Code:
background:url("images/logos.gif") no-repeat scroll right 10px transparent;height:52px;margin:25px auto 0;overflow:hidden;padding-top:15px;width:980px;
 
WOW in 8 minutes thanks so much Harry I'll try this out.

Cos the way those other logos are built in is absolutely shocking

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!
 
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…
 
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):

<div id="footer">
<ul class="social">
<li><a id="facebook" href="http://www.facebook.com/pages/Sanya-China-Travel-Tailormade-Holidays-and-Small-Group-Travel-to-China/140368249019" title="Sanya China Travel Facebook">Sanya China Travel Facebook Fan Page</a></li>
<li><a id="twitter" href="http://twitter.com/sanyatravel" title="Sanya China Travel Twitter">Sanya China Travel on Twitter</a></li>
</ul>

<ul id="sitemap">
<li class="list"><strong>Useful Information</strong>
<ul>
<li><a href="<? echo $dir; ?>legal/privacy-policy.php">Privacy Policy</a></li>
<li><a href="<? echo $dir; ?>legal/terms-conditions.php">Terms and Conditions</a></li>
<li><a href="<? echo $dir; ?>legal/anti-spam-policy.php">Anti Spam Policy</a></li>
</ul>
</li>
<li class="list"><strong>Quick Links</strong>
<ul>
<li><a href="<? echo $dir; ?>tailor-made-holidays/">Tailor Made China Holidays</a></li>
<li><a href="<? echo $dir; ?>tourist-attractions-china/">Tourist Attractions in China</a></li>
<li><a href="<? echo $dir; ?>hotels-in-china/">Hotels for your China Tours</a></li>
<li><a href="<? echo $dir; ?>contact/">Contact Us</a></li>
</ul>
</ul>
And my css for the ul and li:

Code:
#footer ul.social {float:right;margin-right:520px;}#footer ul.social li {padding-top:5px;}

And for the facebook and twitter links:
#footer ul.social {
float:right;
margin-right:520px;
}

#footer ul.social li {
padding-top:5px;
}
 
Hmm, perhaps try giving:

Code:
#footer{position:relative;}#social{position:absolute;top:~px;right:~px;}
 
Oh! the screenshots sorry I forgot those!
 

Attachments

  • Picture-1.jpg
    Picture-1.jpg
    23.1 KB · Views: 5
  • Picture-2.jpg
    Picture-2.jpg
    6.1 KB · Views: 5
Woah…

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?
 
What is your involvement? Just inherited it? What are you to the client/project?

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?
 
If your the junior, send it back up the chain of command.
whoever coded it should take responsibility for sorting out that mess!
 
Harry said:
Hmm, perhaps try giving:

Code:
#footer{position:relative;}#social{position:absolute;top:~px;right:~px;}

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..
 
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 :)
 
Sunburn said:
If your the junior, send it back up the chain of command.
whoever coded it should take responsibility for sorting out that mess!


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!
 
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."
 
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 :)
 
emmaburge said:
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."

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 :(
 
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
 
Okay Emma, really don't want to sound patronising here, so apologies if it seems that way, but picture this:

hb6x0nb62g-FID3.jpg


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 :)
 
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
 
LOL thanks Harry. Okay.

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