Centralising an Image in a new window

T

Trevor L.

BlankI am possibly flogging a dead horse here, but ...

I have finally got the slideshow on my site working more or less as I want it, but there is still one problem

Here is the scenario.

From the page album.html, I open a new window using Spawn
<input type="button"
value="Slideshow - Family"
onclick="spawnJimcoPopup
('slideshowauto.html?firstslide=1&lastslide=15','',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no',
'600','615','0','0','pixel');return false;">

In slideshow.html, I have this code
<body id="slide" ...>
<div id="Image">Image here
</div>
<div id="caption">
<span id="ImgText">START</span> <br>

The general style for body is
body, frameset
{font: 16px Times New Roman,Arial,Helvetica,sans-serif ;
background-color: #66CDAA ;
background-image: url(images/04-08-24-1-bird-bath.jpg) ;
border-collapse: collapse ;
width: 790px ;
margin: 0 auto ; padding: 0 ;}

The ID #slide simply sets the background
body#slide {background: white ;}

The ID #Image is used to overwrite the HTML using this Javascript
document.getElementById('Image').innerHTML =
'<img src=" ' + Slides[ImgNum] + ' " alt=" "><br>'

The ID #caption is
div#caption{font: 16px Verdana,Arial,Helvetica,sans-serif ;
position: relative ;
top: 0 ; width: 600px ;
text-align: center ;}

The result is an image top left positioned with the caption centred

The question is how can I get the image to centre?

I have other code which does it, but I can't seem to adapt it to this situation
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au




I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
M

Murray

Trevor:

I'm still getting two js errors on your site -

1. From the home page, I'm getting preload_images is undefined (line 71
char 5).
2. From the Picture album page, I'm getting Object expected (line 77 char
1).

I expect the latter error is due to a missing writeMsg function in either of
your external js files. The former message is due to a missing setup of the
preload_images array - most likely caused by your attempt to preload the
images in the frameset file.

I still don't understand why you want frames for this site. And I really
don't understand why you have that huge right frame with a large (tiling)
background image, and essentially no content.

But - that aside....

Why are you defining CSS rules for the frameset tag, a "non-printing" tag?

Why are you *still* floating the image? There is no need to float it.

Change this -

BODY, FRAMESET {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND-IMAGE: url(images/04-08-24-1-bird-bath.jpg);
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
FONT: 16px Times New Roman,Arial,Helvetica,sans-serif;
WIDTH: 790px;
PADDING-TOP: 0px;
BORDER-COLLAPSE: collapse;
BACKGROUND-COLOR: #00ffcc
}

to this -

BODY { /* no reason for frameset */
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND-IMAGE: url(images/04-08-24-1-bird-bath.jpg);
PADDING-BOTTOM: 0px;
MARGIN: 0px; /* no reason for auto */
FONT: 16px Times New Roman,Arial,Helvetica,sans-serif;
/* WIDTH: 790px; */ /* get rid of this - it's causing you problems */
PADDING-TOP: 0px;
/* BORDER-COLLAPSE: collapse; no reason for this on the body tag */
BACKGROUND-COLOR: #00ffcc
}

Why positoin absolute on this table, and then no coordinates?

TABLE.menu {
VISIBILITY: hidden;
POSITION: absolute
}

You like floats, I see!

DIV#column1 {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FLOAT: left;

Be aware that they are tricky - about the trickiest thing in CSS.

Now to your question.
The question is how can I get the image to centre?
Click to expand...

Use the code I suggested.

CSS -
#bodyContent { width:400px; text-align:center; margin:0 auto; }

#bodyContent img { display:block; }

#bodyContent p { font:bold 13px arial,helvetica,sans-serif;
margin:10px; }HTML -
<body>
<div id="bodyContent"><img...><p>Caption here</p></div>
</body>

When I look at your slideshow in Firefox, where you cannot fix the size of
that popup window, if I make it more than 790px wide, the image begins to
move away from the left margin. That means you have got a 790 px container
on that page that will always force things to left align - looks like the
width on the body tag - get rid of it, as recommended above.


--
Murray
============

BlankI am possibly flogging a dead horse here, but ...

I have finally got the slideshow on my site working more or less as I want
it, but there is still one problem

Here is the scenario.

From the page album.html, I open a new window using Spawn
<input type="button"
value="Slideshow - Family"
onclick="spawnJimcoPopup
('slideshowauto.html?firstslide=1&lastslide=15','',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no',
'600','615','0','0','pixel');return false;">

In slideshow.html, I have this code
<body id="slide" ...>
<div id="Image">Image here
</div>
<div id="caption">
<span id="ImgText">START</span> <br>

The general style for body is
body, frameset
{font: 16px Times New Roman,Arial,Helvetica,sans-serif ;
background-color: #66CDAA ;
background-image: url(images/04-08-24-1-bird-bath.jpg) ;
border-collapse: collapse ;
width: 790px ;
margin: 0 auto ; padding: 0 ;}

The ID #slide simply sets the background
body#slide {background: white ;}

The ID #Image is used to overwrite the HTML using this Javascript
document.getElementById('Image').innerHTML =
'<img src=" ' + Slides[ImgNum] + ' " alt=" "><br>'

The ID #caption is
div#caption{font: 16px Verdana,Arial,Helvetica,sans-serif ;
position: relative ;
top: 0 ; width: 600px ;
text-align: center ;}

The result is an image top left positioned with the caption centred

The question is how can I get the image to centre?

I have other code which does it, but I can't seem to adapt it to this
situation
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au




I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Trevor L.

Murray,
Some answers in red
=====
----- Original Message -----
From: "Murray" <[email protected]>
Newsgroups: microsoft.public.frontpage.client
Sent: Friday, March 18, 2005 11:34 PM
Subject: Re: Centralising an Image in a new window
Trevor:

I'm still getting two js errors on your site -

1. From the home page, I'm getting preload_images is undefined (line 71
char 5).
2. From the Picture album page, I'm getting Object expected (line 77 char
1).

I expect the latter error is due to a missing writeMsg function in either of
your external js files. The former message is due to a missing setup of the
preload_images array - most likely caused by your attempt to preload the
images in the frameset file.

I have fixed these

I still don't understand why you want frames for this site. And I really
don't understand why you have that huge right frame with a large (tiling)
background image, and essentially no content.

I am thinking about removing frames but to date it has been useful in that I don't have to amend the entire code when altering only the heading or sidebar. By using includes in FP I can avoid this, but I have been doing other things. The image doesn't actually tile because it is large. If it were smaller I assume it would tile. I am still thinking about what content I am going to put here.

But - that aside....

Why are you defining CSS rules for the frameset tag, a "non-printing" tag?
I don't know. I thought it was useful at the time

Why are you *still* floating the image? There is no need to float it.
I thought I needed it to get the image and text aligned properly. I am now putting the image and text in different <div> for the slideshow so I probably don't need to do it here.
Change this -

BODY, FRAMESET {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND-IMAGE: url(images/04-08-24-1-bird-bath.jpg);
PADDING-BOTTOM: 0px;
MARGIN: 0px auto;
FONT: 16px Times New Roman,Arial,Helvetica,sans-serif;
WIDTH: 790px;
PADDING-TOP: 0px;
BORDER-COLLAPSE: collapse;
BACKGROUND-COLOR: #00ffcc
}

to this -

BODY { /* no reason for frameset */
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND-IMAGE: url(images/04-08-24-1-bird-bath.jpg);
PADDING-BOTTOM: 0px;
MARGIN: 0px; /* no reason for auto */
FONT: 16px Times New Roman,Arial,Helvetica,sans-serif;
/* WIDTH: 790px; */ /* get rid of this - it's causing you problems */
PADDING-TOP: 0px;
/* BORDER-COLLAPSE: collapse; no reason for this on the body tag */
BACKGROUND-COLOR: #00ffcc
}
I have removed frameset and auto (what does auto do?)
I have removed width and border-collapse.
I have set padding:0 . Does this cover all 4 paddings ?

Why position absolute on this table, and then no coordinates?
TABLE.menu {
VISIBILITY: hidden;
POSITION: absolute
}
The suggestion that I read stated that absolute was needed to get the dropdown effect.
I have now removed it.

You like floats, I see!

DIV#column1 {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FLOAT: left;
I used float here to position the image to the left of the text correctly.
Interestingly, I had set this in my style.css
div#column1{float: left;
width: 16% ; height: 100%;
border: 0 ; margin: 0 auto;
padding: 0 ;}
which is slightly different than you have.
Do different browsers interpret css differently?
Or did I change it at some time? I don't recall ever typing border-top-width

Be aware that they are tricky - about the trickiest thing in CSS.
Thanks. I need to learn

Now to your question.
The question is how can I get the image to centre?
Click to expand...

Use the code I suggested.

CSS -
#bodyContent { width:400px; text-align:center; margin:0 auto; }
#bodyContent img { display:block; }
#bodyContent p { font:bold 13px arial,helvetica,sans-serif; margin:10px; }
HTML -
<body>
<div id="bodyContent"><img...><p>Caption here</p></div>
</body>
Hey, wunderbar and other exclamations of joy.
I used this:
body#slide {background: white ; width: 600px ;}
div#Image {width: 400px ; margin: 0 auto ;}
div#caption{font: 16px Verdana,Arial,Helvetica,sans-serif ;
position: relative ; top: 0 ; width: 600px ; text-align: center ;}

<body id="slide" onload="chgImg(firstslide-1);GenButtons()">
<div id="Image">Image here</div>

<div id="caption">
<span id="ImgText">Caption here</span> <br>

The image is now centred in IE6. width : 400px seems to be the vital clue, because this is actually less than the window width and the image pushes over to the right. This is another little trick I will have to take note of.

When I look at your slideshow in Firefox, where you cannot fix the size of
that popup window, if I make it more than 790px wide, the image begins to
move away from the left margin. That means you have got a 790 px container
on that page that will always force things to left align - looks like the
width on the body tag - get rid of it, as recommended above.
I have now downloaded Firefox, and in it, the image is centred for wide pictures with the text below it.
For narrow pictures, the pictures with the text to the right is centred as a whole. The spec width:790px has been removed
I have experimented with quite a few things and it is difficult to think of what to try next that will work in both browsers

Thanks for all the advice. I am taking it all on board and trying all the suggestions
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
M

Murray

Trevor:

See comments in heavily heavily edited content below -

--
Murray
============

Murray,
Some answers in red
=====
----- Original Message -----
From: "Murray" <[email protected]>
Newsgroups: microsoft.public.frontpage.client
Sent: Friday, March 18, 2005 11:34 PM
Subject: Re: Centralising an Image in a new window
Trevor:
I have fixed these
Good!

I am thinking about removing frames but to date it has been useful
in that I don't have to amend the entire code when altering only the
heading or sidebar. By using includes in FP I can avoid this, but I have
been doing other things.
Click to expand...

Makes sense - includes would be the right thing to do here.
The image doesn't actually tile because it is large.
Click to expand...

It does tile. Making it dimensionally large only makes it harder to see it
tile, and heavier to download. The only way to prevent it from tiling is to
use CSS's background-repeat style.
I thought I needed it to get the image and text aligned properly.
I am now putting the image and text in different <div> for the slideshow
so I probably don't need to do it here.
Click to expand...

That would work, but there is no need to even use different <div>
containers. If you make the image display:block, it will force adjacent
content to the next line. That's why I structured my CSS recommendation the
way I did.
I have removed frameset and auto (what does auto do?)
Click to expand...

Auto says to make that particular value equal to the available space -
that's why

#wrapper { width:600px; margin:0 auto; } /* see below to understand why only
2 values do this */

will center the element with ID of wrapper.
I have set padding:0 . Does this cover all 4 paddings ?
Click to expand...

Yes. The sequence of shorthand values is TOP-RIGHT-BOTTOM-LEFT. A single
value applies to all. Two values apply to TOP and BOTTOM for the first and
RIGHT AND LEFT for the second. Three values apply to TOP for the first,
RIGHT and LEFT for the second, and BOTTOM for the third.
The suggestion that I read stated that absolute was needed to get the
dropdown effect.
I have now removed it.
Click to expand...

Curious suggestion, that.
Do different browsers interpret css differently?
Click to expand...

Unfortunately, yes. But on the whole, they agree on most of it.
Or did I change it at some time? I don't recall ever typing
border-top-width
Click to expand...

It could be an artifact of my CSS recovery tool.
Hey, wunderbar and other exclamations of joy.
I used this:
body#slide {background: white ; width: 600px ;}
Click to expand...

Don't assign a width to your body tag. It causes some of your problems.
div#Image {width: 400px ; margin: 0 auto ;}
Click to expand...

This is good.
div#caption{font: 16px Verdana,Arial,Helvetica,sans-serif ;
position: relative ; top: 0 ; width: 600px ; text-align:
center ;}
Click to expand...

You do not need to position this element. Just make it this and you will
see -

div#caption{font: 16px Verdana,Arial,Helvetica,sans-serif ;
width: 600px ; text-align: center ;}

But you are still overly complicating the issue.

Consider this CSS -

body#slide { background: white; text-align:center; }
div#image { width: 400px; margin: 0 auto; }
#slide p { font: 16px Verdana,Arial,Helvetica,sans-serif; width: 600px; }

with this HTML -

<body id="slide" onload="chgImg(firstslide-1);GenButtons()">
<div id="Image">Image here</div>
The image is now centred in IE6. width : 400px seems to be the
vital clue, because this is actually less than the window width and
the image pushes over to the right. This is another little trick I will
have to take note of.
Click to expand...

It's not a trick. It's a proper use. What got you in trouble was your
assignment of a width to the body tag.

If you want something to center, you have to give it a width.
I have now downloaded Firefox, and in it, the image is centred
for wide pictures with the text below it. For narrow pictures, the
pictures with the text to the right is centred as a whole. The spec
width:790px has been removed
Click to expand...

Yes - that text to the right thing would be fixed by adopting my CSS
recommendations and by getting rid of the float on the image. See when you
float things, if the container is too narrow to place the floated thing and
the content side by side (as it *should be*) then the content will wrap
below the floated element in its entirety. What you were seeing as "normal"
was in fact an anomaly of the explicit body width. By removing that, you
allow the float to work as it would have always worked, which is to put the
image to the left of the caption. By removing the body width AND the float,
you allow the text caption to drop below the image, which is where you
wanted it all along.
Thanks for all the advice. I am taking it all on board and trying all the
suggestions.
Click to expand...

Good going - glad you could stick with me on this.
 
T

Trevor L.

Murray.
I think I see light at the end of the tunnel.

I have used this code
CSS
General styles
body { .......... margin: 0 ; padding: 0 ;}
img {border: 0} - this did have a float: left
Special ID
body#slide {background: white ;
font: 16px Verdana,Arial,Helvetica,sans-serif ;
text-align: center ;}

HTML
<body id="slide" onload="chgImg(firstslide-1);GenButtons()">
<div id="Image">
Image here
</div>
<div>
<span id="ImgText">START</span> <br> /* The caption goes here (in place of START)*/
.....

There is no width spec at all. I found I needed a new <div> for the caption as otherwise it was behind the image.

The only thing I would like to fix is the top and left margins in Firefox - I don't want any, but I can't seem to get rid of them.

This has been a great learning experience. I will definitely retain this thread in my OE newsgroup for future reference

Many thanks that you have stuck with me
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
M

Murray

Trevor:
body { .......... margin: 0 ; padding: 0 ;}
Click to expand...

Do you have a width defined for body? You should not.

This is for the pop-up page?
img {border: 0}
Click to expand...

The image is not a link, so you do not need a border for it, but you may
want to put margin:0; padding:0; in there. In addition, if you add
display:block, to the img rule, that will force the paragraph to the next
line, and you won't then need the div wrapper on the caption.

<div>
<span id="ImgText">START</span> <br> /* The caption goes here (in place
of START)*/

You could change this to <p><span id.... if you use display:block on the
image. And you need the span because of your js replacement routine? If
not, then you can get rid of it altogether, and apply that id to the
wrapping <p> tag, e.g.,

The only thing I would like to fix is the top and left margins in
Firefox -
I don't want any, but I can't seem to get rid of them.
Click to expand...

If there are no margins on the body tag, and none on the image tag, I can't
see where they would be coming from. Looking at both your code and your
CSS, I do not see a reason for the TOP margin - you are not getting a side
margin in FF. I'll have to think about this one....

By the way, I disagree with this suggestion -


/****

hint on FP NG states to add the following

3 styles for all float definitions in IE

display: block; margin: auto; position: relative;

***/ Adding display:block has no advantage I can think of for a floated
element, since it is removed from the flow by the float. It can, however,
sometimes be useful to position:relative a floated element so that you can
then move it around a bit.


div#content{top: 0 ; float: left ; }



An element can't be positioned unless you have applied a positioning style,
i.e., position:absolute | relative | fixed | static.
Many thanks that you have stuck with me
Click to expand...

You're welcome!

--
Murray
============

Murray.
I think I see light at the end of the tunnel.

I have used this code
CSS
General styles
body { .......... margin: 0 ; padding: 0 ;}
img {border: 0} - this did have a float: left
Special ID
body#slide {background: white ;
font: 16px Verdana,Arial,Helvetica,sans-serif ;
text-align: center ;}

HTML
<body id="slide" onload="chgImg(firstslide-1);GenButtons()">
<div id="Image">
Image here
</div>
<div>
<span id="ImgText">START</span> <br> /* The caption goes here (in place
of START)*/
.....

There is no width spec at all. I found I needed a new <div> for the caption
as otherwise it was behind the image.

The only thing I would like to fix is the top and left margins in Firefox -
I don't want any, but I can't seem to get rid of them.

This has been a great learning experience. I will definitely retain this
thread in my OE newsgroup for future reference

Many thanks that you have stuck with me
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Trevor L.

Murray,
My responses in red.
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

----- Original Message -----
From: "Murray" <[email protected]>
Newsgroups: microsoft.public.frontpage.client
Sent: Monday, March 21, 2005 12:03 AM
Subject: Re: Centralising an Image in a new window

Trevor:


Do you have a width defined for body? You should not. NO

This is for the pop-up page?
Click to expand...
Are you asking whether the img style is for the pop-up page?
It is the general img style which is also used for images in hyperlinks.
The image is not a link, so you do not need a border for it, but you may
want to put margin:0; padding:0; in there. In addition, if you add
display:block, to the img rule, that will force the paragraph to the next
line, and you won't then need the div wrapper on the caption.
Click to expand...
Doesn't border:0 remove the border (i.e. what I have is correct)?
I have added the other three to the general img tag.
<div>
<span id="ImgText">START</span> <br> /* The caption goes here (in place
of START)*/

You could change this to <p><span id.... if you use display:block on the
image. And you need the span because of your js replacement routine? YES
If not, then you can get rid of it altogether, and apply that id to the
wrapping <p> tag, e.g.,

<p id="ImgText">START</p> <!-- no need for the <br> then -->
Click to expand...
When I changed <div><span id="ImgText">... to <p><span id="ImgText">... it worked but there was a line break between the caption (added by JS between <p> and </p>) and the buttons created by <input type="button", etc.
So I now have <span id="ImgText">START</span><br> which works

Removing <br> here causes the following buttons to remain on the same line, not on the next line as I want.
Not adding </div> after the image causes the caption and buttons to disappear (behind the image I assume). This seems to imply that display:block does not force the text to the next line after image when both are in the same <div>.
Because the code for the image is pased from JS I changed what was passed to :
document.getElementById('Image').innerHTML = '<p align="center">'
+ '<img display="block" src="' + Slides[ImgNum] + '" alt=" "></p><br>'
If there are no margins on the body tag, and none on the image tag, I can't
see where they would be coming from. Looking at both your code and your
CSS, I do not see a reason for the TOP margin - you are not getting a side
margin in FF. I'll have to think about this one....
Click to expand...
The only margins anywhere are margin:0 in the general body and img styles in style.css
I see a small left margin and a larger top margin in FF1.0.1 when compared with IE6.0
By the way, I disagree with this suggestion -

/****
hint on FP NG states to add the following
3 styles for all float definitions in IE
display: block; margin: auto; position: relative;
***/
Adding display:block has no advantage I can think of for a floated
element, since it is removed from the flow by the float. It can, however,
sometimes be useful to position:relative a floated element so that you can
then move it around a bit.
Click to expand...
I am not sure that I understood it either, but I haven't implemented this suggestion anyway. I have a feeling that I tried some of these once and didn't notice any change so removed them.
div#content{top: 0 ; float: left ; }

An element can't be positioned unless you have applied a positioning style,
i.e., position:absolute | relative | fixed | static.
Click to expand...
Thank you. This div definition hasn't been used as yet. It is for the right hand side of the index_main page.
I will add positon:relative, I think
You're welcome!
Click to expand...
Everything is working out fairly well now, apart from the small problems of the margins in FF, and the line break between the image and the text which I also don't want.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
S

Stefan B Rusynko

FYI
most newsreaders are text only (and should be)
so using rich formatted or html is blocked and most readers never see your "red" markup




Murray,
My responses in red.
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

----- Original Message -----
From: "Murray" <[email protected]>
Newsgroups: microsoft.public.frontpage.client
Sent: Monday, March 21, 2005 12:03 AM
Subject: Re: Centralising an Image in a new window

Trevor:


Do you have a width defined for body? You should not. NO

This is for the pop-up page?
Click to expand...
Are you asking whether the img style is for the pop-up page?
It is the general img style which is also used for images in hyperlinks.
The image is not a link, so you do not need a border for it, but you may
want to put margin:0; padding:0; in there. In addition, if you add
display:block, to the img rule, that will force the paragraph to the next
line, and you won't then need the div wrapper on the caption.
Click to expand...
Doesn't border:0 remove the border (i.e. what I have is correct)?
I have added the other three to the general img tag.
<div>
<span id="ImgText">START</span> <br> /* The caption goes here (in place
of START)*/

You could change this to <p><span id.... if you use display:block on the
image. And you need the span because of your js replacement routine? YES
If not, then you can get rid of it altogether, and apply that id to the
wrapping <p> tag, e.g.,

<p id="ImgText">START</p> <!-- no need for the <br> then -->
Click to expand...
When I changed <div><span id="ImgText">... to <p><span id="ImgText">... it worked but there was a line break between the caption
(added by JS between <p> and </p>) and the buttons created by <input type="button", etc.
So I now have <span id="ImgText">START</span><br> which works

Removing <br> here causes the following buttons to remain on the same line, not on the next line as I want.
Not adding </div> after the image causes the caption and buttons to disappear (behind the image I assume). This seems to imply that
display:block does not force the text to the next line after image when both are in the same <div>.
Because the code for the image is pased from JS I changed what was passed to :
document.getElementById('Image').innerHTML = '<p align="center">'
+ '<img display="block" src="' + Slides[ImgNum] + '" alt=" "></p><br>'
If there are no margins on the body tag, and none on the image tag, I can't
see where they would be coming from. Looking at both your code and your
CSS, I do not see a reason for the TOP margin - you are not getting a side
margin in FF. I'll have to think about this one....
Click to expand...
The only margins anywhere are margin:0 in the general body and img styles in style.css
I see a small left margin and a larger top margin in FF1.0.1 when compared with IE6.0
By the way, I disagree with this suggestion -

/****
hint on FP NG states to add the following
3 styles for all float definitions in IE
display: block; margin: auto; position: relative;
***/
Adding display:block has no advantage I can think of for a floated
element, since it is removed from the flow by the float. It can, however,
sometimes be useful to position:relative a floated element so that you can
then move it around a bit.
Click to expand...
I am not sure that I understood it either, but I haven't implemented this suggestion anyway. I have a feeling that I tried some of
these once and didn't notice any change so removed them.
div#content{top: 0 ; float: left ; }

An element can't be positioned unless you have applied a positioning style,
i.e., position:absolute | relative | fixed | static.
Click to expand...
Thank you. This div definition hasn't been used as yet. It is for the right hand side of the index_main page.
I will add positon:relative, I think
You're welcome!
Click to expand...
Everything is working out fairly well now, apart from the small problems of the margins in FF, and the line break between the image
and the text which I also don't want.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
M

Murray

Doesn't border:0 remove the border (i.e. what I have is correct)?
I have added the other three to the general img tag.
Yes.

So I now have <span id="ImgText">START</span><br> which works
Click to expand...

That would work too - the display:block forces the next page element to a
new like, and that's what you want. Of course you could also just change
the margin on the p tag, which would then eliminate the need for the <br>
tag following -

p.caption { margin-top:0px; }

and then -

<p class="caption" id="ImgText">START</p>

--
Murray
============

Murray,
My responses in red.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position image displayed from a link? 1
CSS Problems 9
Positioning of image from link - if that makes sense! 3
problem with css and picture 2
Top of image lopped off & border/space on right hand side of image between text? 1
please help me fix my code. it will not work in ie but worksperfectly in firefox 5
css and images 7
IE 7 table colapse problem 4

Top