Image Placement

HTML & CSS
1

Hi,

I’m an html beginner, and I am using the html code below, to position an image: TAB_CONTACT.jpg, on my site.

<img src=“http://www.ae35design.com/resources/TAB_CONTACT.jpg” style=“position:absolute; top:40px; left:0px; width:900px; height:20px” border=“0” />

The position of this image is misaligned in a Firefox browser. The Safari browser is positioning the image correctly for my site design.

QUESTION: Can I insert some code to correct this ? It looked like you had a solution for this, but I’m not sure.

Thank you very much,
Jay

2

Hi tomolini welcome to Sitepoint:)

It is unlikely that the code above will do what you want as you have absolutely placed the image which means it will be placed in relation to the nearest parent that has a position applied (position:relative or position:absolute).

If no such parent exists then the the image is placed in respect of the viewport which is unlikely to match the position that you want as that would depend on your viewport width and how your layout is organised (e.g. if centred).

We would need to see the html that goes with page and the rest of the css to determine what you need to do. Do you have a link to the page in question?

As it stands the code you have shown above will render exactly the same in all browsers so is in fact no real use to us because it’s all the other things that you didn’t show that will affect this element :slight_smile:

3

Hi, Thank you for following up with my question.

I have used the RapidWeaver/+Plugin Website Creation Tools to create a site:JAY’S ART SERVICE

There are 5 ‘Tabs’ across the top.

The code included just below, positions a ‘Shadow’ under the ‘About Tab’, and it, and the other Tab shadows line up in Safari, and they are shifted to the Left ~5 pixels in Firefox. The misalignment increases as you move to the Right, with the ‘Context Tab’ being the most misaligned.

The other components, BOOK_ABOUT.jpg, RIGHT.jpg, LEFT.jpg, are all correct in both browsers.

This is why I wonder If there is something I could add to this html, to make the TAB_ABOUT.jpg position correctly in Firefox, like it is in Safari.

  • I might change my design, in the time being, just to move forward.

However, It works in Safari perfectly, so this is a little bit of a challenge, and I want to get it to work if possible.

Thank you for any assistance you may be able to provide.



<img src="http://www.ae35design.com/resources/TAB_ABOUT.jpg" style="position:absolute; top:40px; left:0px; width:900px; height:20px" border="0" />

<img src="http://www.ae35design.com/resources/BOOK_ABOUT.jpg" style="position:absolute; top:60px; left:0px; width:900px; height:414px" border="0" />

<img src="http://www.ae35design.com/resources/LEFT.jpg" style="position:absolute; top:474px; left:0px; width:440px; height:126px" border="0" />

<img src="http://www.ae35design.com/resources/RIGHT.jpg" style="position:absolute; top:474px; left:440px; width:460px; height:126px" border="0" />
4

Hi,

The issue is that you are absolutely placing the shadow and expecting it to match up with an unrelated fluid element such as text. The tab is sized by its content which is its text and its em padding.

The width of text varies considerably between browsers and between resolution (and dpi settings) combined with em padding (which is a rounded measurement) which all results in a line of text that will vary between browsers and resolution by as much as 10px in some case.

Therefore you cannot reliably place your shadow using the method that you have undertaken.

What you should do is apply the shadow as a background to each tab element itself and then you don’t need to worry about how big or small it is as the background will always be in the right place as it is attached to the element concerned.

In practice you would rarely add empty elements to the html for decoration especially when you have plenty of existing elements to hang the images on anyway.

I also notice that you have 26 css files linked in the head of the page! For a site that small it should just be 1 css file. You are actually very close to IE’s CSS file limit which IIRC is 31 files and then it gives up.

On another matter your site is nearly all images without alt text and no real text or headings. This will all but make it invisible as far as SEO is concerned and certainly totally inaccessible to screen readers and the like.

Using inline css is also a big no no and you should add a class to the element and then style it from the stylesheet. This keeps the html clean and allows you to control things from the stylesheet. Also avoid inline javascript where possible as that should be unobtrusive.

One last thing to remember is that quite a number of users surf with images and javascript turned off so that they get a quicker safer experience and your site would be unusable to those users.

As you are a beginner its not surprising that you don’t know about all these issues and creating a site does take experience and learning which will come after time.

I can’t offer a “silver bullet fix” because the nav needs to be redesigned and as you said you were changing things anyway I didn’t want to spend time changing something that may never be used.

I have attached a screenshot showing your site in 3 different browsers and pointing out where the discrepancy will occur.

Hopefully the above will be some help without frightening you away :slight_smile:

5

Very helpful,

I’m overhauling the design to address these issues.

Thank you very much for your feedback.

Jay