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