Can someone take a look at this sample HTML page and tell me what is wrong with it?

Hi,

I am just practicing with a website design and you will notice at the top where the folds are on the header there is a small line at each side which I am trying to get rid of.

The images were just slices from a design in fireworks so all shading etc should be compatible.

Thanks
style.css
Images.zip
index.html
LVL 2
jazz__manAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
All looks good to me. Any change of a screenshot. I've viewed it in FireFox and IE and it's fine.
0
jazz__manAuthor Commented:
Top Left Hand Corner of Web Page

Can you see the subtle line at the page edge near where it meets the header. These are taken from firefox design that was sliced so why is the shading different? Perhaps this is a fireworks question rather than CSS.
0
Chris StanyonWebDevCommented:
OK. See what you mean. It's because of the way you've overlayed transparent PNGs. Your little 'wings' (bgHeader.png) have a shadow that is partially transparent. That sits over the shadow from your content background (bgContainer.png).

Couple of ways around it: You could split the header and content so they butt up to each other rather than overlaying each other:

<div id="header">
    <div id="wings"></div>
</div>

<div id="content"></div>
<div id="footer"></div>

You could also bin the shadows from your images and use CSS3 instead. You can use border-radius to give you your rounded corners, and box-shadow to give your shadows.

Another more radical option is to re-think your design. Coding webpages by slicing mockups like that makes your site very rigid, and was certainly a popular way of coding a few years back. Things have moved on and flexibility is more important than ever. Your site will be viewed across all sorts of devices that all have very different screen resolutions, so this method of coding may not stand up well on modern devices..
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I second the slicing.  Take a look at these responsive libraries.   http://getbootstrap.com/ and http://foundation.zurb.com/.  They both contain a css grid system along with preset responsive media queries and some other js goodies.   There is a short re learning curve but they both make it easy to design sites for multiple devices.
0
jazz__manAuthor Commented:
Thanks, much appreciated!

As you mentioned, I need to start thinking about the vast array of potential end user devices. This was just a wee test template that won't be getting developed any further, it was just a training exercise more than anything.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.