PDA

View Full Version : Display issues with Firefox / Google Chrome when using Background-position: (Help)



TDISport.com
Apr 23rd, 2009, 03:25 PM
Hey people,

Let me introduce myself, my name is Aaron and i joined the site a few moments ago as i thought being a website designer (somewhat of a novice compared to most) i could do with some tips and more knowledge.

My first problem is this:
When i visit www.TDISport.com using Internet Explorer the navigation menu on the right hand side of the page is displayed correctly.
However, when i use google chrome or firefox it is displaying incorrectly, it appears as if it is re-sizing the table to display the whole background image.

I am using background-position: within a style.css sheet to give the illusion that the grey logo turns to a coloured one, however as i mentioned, this is not working, perhaps someone could shed some light onto this for me?

Regards

Aaron

Rowsdower!
Apr 23rd, 2009, 03:49 PM
Hello and welcome to the forums!

I'm confused for a few of reasons. For one thing, the page looks exactly the same to me in IE7 and FF2. For another thing, I don't see any logo that turns from grayscale to colored. And lastly, I don't understand how background-position would create the appearance of a grayscale-to-color gradient.

I'm having a slow day today so maybe I'm underthinking something. Can you please explain what it is you are seeing that is inconsistent? Also, just to get first dibs before anyone else says it, "you shouldn't use tables for layout."

More to come on that, I'm sure. :D

Rowsdower!
Apr 23rd, 2009, 04:02 PM
After further inspection I'm fairly convinced this is an SEO building attempt. I don't see any background positioning being used in any of the main parts of the page and the question is pretty illogical and vague to begin with. If I'm wrong I apologize, but for now I have reported this thread as a possible SEO spam message... :mad:

I'll let the mods decide if I'm crazy or not.

TDISport.com
Apr 23rd, 2009, 04:08 PM
Thankyou for your welcome and your reply.

Below is a Fire Fox Screen print:
http://www.TDISPort.com/FF.JPG

Here is an IE screen print (The correct way):
http://www.TDISPort.com/IE.JPG

I am using the background-position: routine to move the background image a certain amount of pixels to the left (to swap the grey logo to the red logo) when hovered over.

Basically to me it looks like FF and google chrome both re-size the table to display the whole of the background image. Where as IE displays the part i set (therefore the bit it swaps to is hidden - until hovered over).
Is that any clearer?

What is the best way to layout a website then other than using tables?

TDISport.com
Apr 23rd, 2009, 04:09 PM
After further inspection I'm fairly convinced this is an SEO building attempt. I don't see any background positioning being used in any of the main parts of the page and the question is pretty illogical and vague to begin with. If I'm wrong I apologize, but for now I have reported this thread as a possible SEO spam message... :mad:

I'll let the mods decide if I'm crazy or not.

No not at all, i am honestly in need of help, its not some sort of plug.

Rowsdower!
Apr 23rd, 2009, 04:26 PM
OK, sorry for jumping the gun! I see what you're talking about and I feel like an *** now.

Let me see if I can find the issue...

TDISport.com
Apr 23rd, 2009, 04:35 PM
I have created a far far simplier version to narrow it down, but still no success:
http://www.tdisport.com/sitetesting/index.htm

Rowsdower!
Apr 23rd, 2009, 04:42 PM
Well, it's side-stepping the problem but you could use a vertical shift instead of horizontal with the attached image. You would just have to shift -26px vertically on hover instead of -181px horizontally. You could leave the rest of your code the same.

I'm still curious to figure out the problem in FF though. It doesn't make sense on the face of it...

drhowarddrfine
Apr 23rd, 2009, 04:43 PM
Apparently you cut/paste this from somewhere else. Much of this is misplaced markup and it's never going to work in modern browsers like FF. Validate your html and css for those lists of errors.

TDISport.com
Apr 23rd, 2009, 04:45 PM
Apparently you cut/paste this from somewhere else. Much of this is misplaced markup and it's never going to work in modern browsers like FF. Validate your html and css for those lists of errors.

I cut and pasted what from somewhere else?

How do i find the list of errors?

TDISport.com
Apr 23rd, 2009, 04:46 PM
Well, it's side-stepping the problem but you could use a vertical shift instead of horizontal with the attached image. You would just have to shift -26px vertically on hover instead of -181px horizontally. You could leave the rest of your code the same.

I'm still curious to figure out the problem in FF though. It doesn't make sense on the face of it...

Thankyou, i will give it a go.
I really cant work out why it wont work properly though, very annoying.

Rowsdower!
Apr 23rd, 2009, 04:49 PM
It definitely has something to do with the 30px of padding used on the <a> elements. I know IE and FF/other browsers handle padding differently and I think this is the root of it. IE adds padding to the OUTSIDE of elements while FF/others add padding to the INSIDE (essentially making your <a> elements 211px wide, hence the red part showing). -- Come to think of it, this is the beginning and end of the problem. Mystery solved! I told you it was a slow morning for me... Sheesh!

Anyway, you can get around this with a separate stylesheet for IE that has the width at 181px while the FF/other stylesheet has the 151px width, but that gets to be a pain when enough items need tweaking. For now I'd just stick with the vertical shift background.

TDISport.com
Apr 23rd, 2009, 04:52 PM
Well, it's side-stepping the problem but you could use a vertical shift instead of horizontal with the attached image. You would just have to shift -26px vertically on hover instead of -181px horizontally. You could leave the rest of your code the same.

I'm still curious to figure out the problem in FF though. It doesn't make sense on the face of it...

Well... that appears to have worked... but not sure why the text is somewhat smaller??? : www.tdisport.com/sitetesting/index.htm

Rowsdower!
Apr 23rd, 2009, 04:58 PM
Hmm... it shows up as 8pt font in both locations for me in both browsers. Changing BG images shouldn't have any effect at all on font size.

TDISport.com
Apr 23rd, 2009, 05:06 PM
Changing the image didnt do it, it was alter the font size to begin with. It's no problem though really, i am just pleased the image part is working now, many thanks!

Moderator : Thread could be closed now.

Rowsdower!
Apr 23rd, 2009, 05:10 PM
...
What is the best way to layout a website then other than using tables?

People (especially around here) buzz about what is called "semantic" HTML markup. This means that elements (such as tables, headings, paragraphs, etc.) are used for their logically intended purpose. Zealots will hold that using tables to display non-tabular data (like spreadsheet data) is not semantic and should not be used. This is one argument, to be sure. The two more compelling arguments (or the two that I pay attention to) are that


people with visual disabilities are not able to view pages with table layouts very well at all
table layouts take much more code, are less flexible, and take longer to load than other layouts (all biggies for me)


For these reasons it is wisest and kindest to your users for you to use <div> elements combined with margins, padding, and float styling in CSS. The link to w3schools in my sig is a great place to brush up on the CSS you'll need but you can take any basic design and turn it into what are essentially modular blocks of content that can be shifted around and redesigned simply by using a different CSS file. The CSS Zen Garden (http://www.csszengarden.com/) is a neat place to visit to see exactly what I mean by that. They take the same exact page with the same exact content and re-style it a whole bunch of ways by linking to a different style sheet for each example.

There is a small learning curve at first, but once you get the hang of it your designs will be a breeze to implement.

drhowarddrfine
Apr 23rd, 2009, 08:27 PM
IE adds padding to the OUTSIDE of elements while FF/others add padding to the INSIDENot true at all. IE only does this when it's in quirks mode but no one should ever be in quirks mode. [/QUOTE]

drhowarddrfine
Apr 23rd, 2009, 08:42 PM
Zealots will hold that using tables to display non-tabular data (like spreadsheet data) is not semantic and should not be used.

Also, it's a fixed, pre-defined grid that has parts that cannot move.

Rowsdower!
Apr 23rd, 2009, 10:11 PM
Not true at all. IE only does this when it's in quirks mode but no one should ever be in quirks mode.

Never ever? Ha! I never trust anyone that speaks in absolutes, ever!

:rolleyes: Ok doc, so then it's true when in quirks mode. That doesn't make it not true at all. Besides, did you see the code that we're working with here? Trust me, we're in quirks mode.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tdisport.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

Result: 528 Errors, 278 warning(s)

Not only that, but I'm pretty sure I typed that backwards to begin with (as far as inside/outside -- which is a bad way to even describe it).

Anyway, please continue proof-reading! ;)