positioning is getting me down - please help

[cantona7]

hello all.

i'm new to both css and this forum.

sorry if this topic has been discussed before but i was unable to find the solution via searching the posts.

ok, to the issue.

i have put together a website which mixes tables and css positioning. all is well expect for a element (red bar graphic) on the page which does not sit in the correct place when viewing via IE6/XP. i have checked in firefox and the red bar looks correct. On the page, the red bar graphic should be 15px from the bottom. therefore the bottom of the salon image and the bottom of the red bar should be level. (both are set to display 15px from the bottom of the page.

i designed the site on a mac using dreamweaver mx 2004. the page, viewed via both safari and IE5/Mac looks correct also.

what can i do to make the issue on IE6/XP work as in the other browsers?

thanks in advance for your help.

[edited by: cantona7 at 9:22 pm (utc) on Oct. 15, 2004]

[edited by: SuzyUK at 2:21 pm (utc) on Oct. 16, 2004]
[edit reason] sorry no URLs : see TOS #13 [webmasterworld.com] [/edit]

[encyclo]

Welcome to WebmasterWorld [webmasterworld.com], cantona7.

Firstly, you should review the terms of service [webmasterworld.com] for the forum, particularly the part about posting links to your site. You should also check out this thread [webmasterworld.com] about posting snippets of markup.

If you can, edit your post by clicking the "owner edit" button to the left, underneath your user name (the edit button disappears after an hour).

After all that, my first suggestion is to remove this:

<?xml version="1.0" encoding="iso-8859-1"?>

from the top of your page. The XML prolog pushes IE6 into quirks mode, and this can play havoc with positioning. Once that is out of the way, are things any better?

[cantona7]

thanks encyclo for the quick reply.

first, i have removed the code from my post. sorry about that.

secondly, i removed the line and tested. unfortulately, this did not work as far as my issue is concerned. it did however break the page more by not displaying the page to be centered both vert. and horiz.

i have tried to do this in css before but never could get it to work.

i'm willing to try anything so please let me know if you can think of anything else.

thanks again.

[cantona7]

ok, let me put it this way..

css is..

#image {
position: absolute;
z-index: 1;
bottom: 15px;
right: 0;
height: 382px;
width: 600px;
margin: 0px;
padding: 0px;
}

#redbar {
left: 15px;
height: 7px;
width: 600px;
z-index: 4;
position: absolute;
bottom: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

html is..

<div id="image"> <img src="graphics/myimage.jpg" /> </div>
<div id="redbar"> <img src="graphics/redbar.jpg" /> </div>

although the redbar and image are set to sit 15px from the bottom of a content holding box, the redbar sits about 18px from the bottom when viewed with IE6/XP.

thanks again.

[SuzyUK]

not too sure cantona7,

the code you posted is displaying fine (as in both items are aligning to the bottom, although the red div is displaying too tall so it could be IE's default line-height (approx: 16-18px) coming into play

if you add line-height: 7px to #redbar.. does that help your layout? if not you can post the (summarized) page code

Suzy