Different positioning on browsers?

HTML & CSS
1

Why is this youtube subscribe button moving itself about 10 pixels in Firefox and IE, compared to Chrome? I need it to show in the same spot on all 3 browsers! Please help.

<div id="youtube2"><div id="youtube"><a href="//www.youtube.com/subscription_center?add_user_id=OYYq1HZyyMf6GyPoPmwwCw&feature=creators_cornier-//s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_61x23_red.png"><img src="//s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_61x23_red.png" alt="Subscribe to me on YouTube"/></a><img src="//www.youtube-nocookie.com/gen_204?feature=creators_cornier-//s.ytimg.com/yt/img/creators_corner/Subscribe_to_my_videos/YT_Subscribe_61x23_red.png" style="display: none"/></div></div>

<style>
#youtube2 {
position: relative;
top: -263px;
left: -180px;
z-index: 1001;
}

#youtube {
position: absolute;
}

</style>
2

Hi sgsecret. It’s not easy to tell just from a code sample, so seeing this in context would be useful if you can provide a link. You probably don’t need to bother with the position: absolute on #youtube, as it will just go wherever #youtube2 goes.

3

The button is on the top left of every page of my website. - http://www.sentinelgaming.net. Notice the positioning difference in chrome vs firefox.

Well the reason I put #youtube as absolute is to get rid of the invisible blank space that appears when I position the div somewhere else. Thought that was the only way.

4

OK, thanks for the link. At first, I couldn’t see any YouTube link. Then I noticed that the logo seemed cut off. I’m on a big screen, with a wide browser window, but I made the browser window wider to discover the rest of the logo and the YouTube link. This is a big problem. Many users will have the whole left side of the header cut off, so you really need to restrict its width first, before worrying about the YouTube link.

5

Unfortunately thats something I cant control “easily”. The host that provides my website has a simple website editor which allows me to simply input the background of my website and its supposed* to stretch it to any screen. But I guess its not working properly. What resolution are you using? I guess I would have to figure out what the info in the source and edit it using css, which im not too familiar with.

Im still a bit confused about the youtube button though. I wouldent think the background would have anything to do with the youtube button.

6

K I think I fixed the background problem. Still need help with the positioning of the youtube button on the top left! Please help. http://www.sentinelgaming.net

7

Probably a better solution for the header image is to reduce its size. It’s way too wide. The part of it where the logo is should be as wide as the page wrapper.

Anyhow, the YouTube button is way off screen for most users. It needs to be somewhere inside the wrapper area. So the question is, where do you want it?

8

Right now the header image is 1800x350. If I reduce that, then wouldent people like you with resolutions of 1920 stretch it so wide it would look bad?

9

You can make it any width you like. What I should have said is that you should apply is as a background image, and restrict the main part of it (the logo etc.) to the same width as the page wrapper. If any of the writing in the image is outside the middle 1060px of the image, it’s like to get hidden in a lot of people’s browsers.

10

The logo is actually apart of the background. I think I can fix this by simply making the logo separate from the background. I will fix this and reply to this in a couple of days for a check up.

11

Generally, that’s a better idea anyway. All the same, what I meant was that you should open the graphic in your editor (such as Photoshop) and mark the center point. Then measure 530px either side of that, and make sure you don’t place the logo, or anything else, outside of those boundaries. That way, the logo will appear within the boundaries of your wrapper, which people will see even in narrow browsers.

But yes, separating the logo (and any text) from a background image is a good idea. Ideally, the logo should be in the HTML, with fallback text for those without images on, and for search engines etc.

12

Okay I have separated the logo from the background and made the background stretch to any size. I also found my problem with the youtube button so I think everything is fixed. Thanks!

13

Cool, glad you are happy. The position of the YouTube button is much better now. There are still problems with the page, which are worth fixing. Presumably you are on a wide screen, with your browser set quite wide. It’s worth narrowing your browser to see what most people will see. At least I would recommend changing this

.body-wrap-3 {
overflow-x: hidden;
min-width: 954px;
}

to this:

.body-wrap-3 {
overflow-x: hidden;
min-width: [COLOR="#FF0000"]1260px[/COLOR];
}

to avoid some of your buttons being hidden. Most people are also going to see the buttons on the right peeking from behind the body content, which also needs addressing. Anyhow, these aren’t major things.

14

Alright I just implemented that code you gave me. See if you can tell a difference. And thanks for that btw, I didnt think of doing something like that.

15

Yep, much better. I would also recommend changing this:

p.pos_absolute {
right: 5px;
top: 325px;
position: fixed;
}

p.pos_absolute2 {
right: 5px;
top: 375px;
position: fixed;
}

p.pos_absolute3 {
right: 5px;
top: 425px;
position: fixed;
}

to this

p.pos_absolute {
[COLOR="#FF0000"]left[/COLOR]: 5px;
top: 325px;
position: fixed;
}

p.pos_absolute2 {
[COLOR="#FF0000"]left[/COLOR]: 5px;
top: 375px;
position: fixed;
}

p.pos_absolute3 {
[COLOR="#FF0000"]left[/COLOR]: 5px;
top: 425px;
position: fixed;
}

That code could be a lot more efficient, but anyhow, keeping those buttons on the left is much safer, as it will prevent a lot of people seeing this: