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


bamme

Senior Member
#1
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..
 

Harry

Senior Member
#2
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;
 

bamme

Senior Member
#3
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!
 

Harry

Senior Member
#4
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…
 

bamme

Senior Member
#5
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;
}
 

Harry

Senior Member
#8
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?
 

bamme

Senior Member
#9
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?
 

bamme

Senior Member
#11
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..
 

Harry

Senior Member
#12
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 :)
 

bamme

Senior Member
#13
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!
 

bamme

Senior Member
#14
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."
 

Harry

Senior Member
#15
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 :)
 

Harry

Senior Member
#16
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 :(
 

Renniks

Senior Member
#17
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
 

Harry

Senior Member
#18
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 :)
 

bamme

Senior Member
#19
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