I have a need to put a phone number in a web page. Each individual digit that comprises the phone number is actually an image created in Photoshop. So, I built the phone number by positioning each image using absolute values to place them in order. I felt for some reason that it would be easier to code the style info inline with the HTML rather than in the CSS file. The code is listed below.
The code works fine when I view it in Firefox, with the most important attribute being that the phone number is centered on the page (roughly). But, when I view it in IE the number is all the way over to the right side of the page not even close to centered.
Hm, that makes for a lot of redundant code that’s harder to update—especially if you have this on multiple pages. Also, your method of positioning this is going to fail in a lot of situations anyway, as positioning something in relation to the browser window is fraught with problems.
If you show us this in context, we can provide a better way to do this. Preferably post a link to your site, or post the page code here (but test the code first to make sure if gives us a clear idea of the page layout.
Thanks for the helping hand. The code I have is just on my development box and not out on the web as yet. but the reason I am writing this, is to replace an existing page. You can see that page at www.andersonhorsetransportation.com. on that site you will not see any problem with the phone number which is on a page called “About_us”. You will see it at the top of the page as a nav button.
As outdated as the code is on that page, the number positioning works because it is carefully placed in relation to the other content. It is inside a container 700px wide, and that container has “position: relative”, which gives a better positioning context. It’s also inside another div with position: absolute, so ultimately, the numbers are positioned in relation to that box. But either way, when using position: absolute, you need a container around that—which holds its natural place in the document flow—that is set to position: relative.
You can observe the HTML/CSS relationship of the page elements by using the web developer tools in your browser. For example, right click on your page and select Inspect Element in Chrome.
Why didn’t you create the whole number as a single image? What’s the benefit of having multiple images? Unless there’s a good reason for it then one image would be the better choice.
You are making the browsers fetch multiple images when one would have been suitable and a much smaller file size than the multiple images anyway. Then all you need to do is center one image which can be done simply with text-align:center on the parent and no extra rules. This cuts your code down by about 1000% percent.
Secondly it looks as though this number is one of the most important things you want people to see yet should images be turned off then no one will see it. Screen readers get nothing as you supplied no alt attribute and devices that read and dial phone numbers (iphones etc) will not be able to auto dial for their users. Also users that have the skype add on will not be able to dial and lastly those users that want to use copy and paste can’t do it either because it is an image.
For content you should at least be adding the information into the alt attribute to make it accessible.
But, when I view it in IE the number is all the way over to the right side of the page not even close to centered
You have not supplied any co-ordinates for the left position so IE will determine that to be where it thinks it is depending on the text-alignment of the parent. If the text has been centred or right aligned then the auto position will be offset to the center or the right unlike other browsers.
You could have just given your div a width and height to match the number’s total width and then centred it with auto margins. The images could then have just been floated:left with one css rule.
Well, I have come to a conclusion, and fixed this problem in the best way possible after listening to everyone’s input. For Paul’s information, I did not do the original design work on this page. so the phone number being broken down like it is was not my idea, but still you make a very valid point.
So I did some work in Photoshop and put all the individual gif images into one single jpg file that is not the phone number. Then, centering it in CSS was a simple matter of telling it the size of the phone number and used auto margins, left and right. Bingo it works. AND the whole thing is much simpler. I have one more problem to solve and my work is done. so look for my next thread, it’s going to be a real head scratchier I promise.
