Click to See Complete Forum and Search --> : Absolute Positioning Problem


mumford
11-16-2004, 05:45 AM
Hi

Could someone take a look at this please http://dmumford.bizhat.com/rca/

When viewed in Firefox it is how it should look, but when viewed in IE6 where it says "The Trade association of Britain’s Racecourses" it cuts off the top white border above it, when viewed in IE 5.5 it cuts the top and bottom border off.

Here is how it is supposed to look http://dmumford.bizhat.com/rca/mockup.gif

Your help is much appreciated.

Also in IE 5.5 there is a 2px gap to the right, i tried the pixel jog hack but it did not seem to work!

vinoth
11-16-2004, 06:05 AM
First of all it is not the prob of browsers, it is all bcoz of your coding work , i did not even look at the page.

By reading your post, i give out this. check for the others reply too.

mumford
11-16-2004, 06:30 AM
how do you know it is my coding work if you have not looked at the page?

toicontien
11-16-2004, 10:29 AM
Originally posted by vinoth
First of all it is not the prob of browsers, it is all bcoz of your coding work , i did not even look at the page.

By reading your post, i give out this. check for the others reply too.
If it's his coding work (assuming you mean the HTML code), point him to the W3C's free online markup validator (http://validator.w3.org/). Don't just say it's his coding, tell him what's wrong.

http://validator.w3.org/check?verbose=1&uri=http%3A//dmumford.bizhat.com/rca/

Even then, he's only got one error - he's missing the forward slash at the end of the <img /> tag. That won't affect the layout because browsers are still rendering his XHTML document using an HTML parser.

mumford, I've also attached a screen shot of your layout in Firefox, but I've increased the text size to around 300 percent. You'll notice that your text spills over the edges of the boxes, and the boxes don't grow to encase your content.

The first thing you have to realize about absolute positioning is that those elements do not exist on the same layer as each other. Instead, you'll want to use floats.

http://www.w3.org/TR/CSS21/visuren.html#floats

http://www.positioniseverything.net/

A few links to get you started.