Layers in 'Design' view are in the wrong position

C

CJSnet

Hi all

I have FrontPage 2003, and have noticed that when I draw layers on a
left-justified page, they always appear about 20 pixels lower on the final
web page, than they do in Design view.

This makes life very difficult when adding layers over precise graphics, as
when they look right in Design view, they look wrong on the finished web
page.

Any ideas why this is and how to get around it?
--
Thanks.

CJSnet

(Remove TEETH to reply by e-mail.)
 
C

CJSnet

Hi Murray, I'm afraid I don't have any online yet, but here's a simple way
to recreate:

1) In a new html page, insert a picture in Design view
2) 'Draw layer' around a recognisable shape in that picture (e.g. a square
object)
3) Type some text or insert a picture in the layer and see where it
overlays the main picture
4) Preview in browser and note that it is about 15 pixels lower than Design
view shows

Hope this helps you help me :)
--
Thanks.

CJSnet

(Remove TEETH to reply by e-mail.)
 
M

Murray

I'm leaving my teeth in, thank you very much. 8)

Are you sure you mean "lower" and not "higher"?

Try this. On the new html page, change <body> to <body
style="margin:0;padding:0;">

and take another look - is it the same?
 
C

CJSnet

That is much better, thank you!

They are still a couple of pixels further to the left than the end result.
Any ideas?

I'm just disappointed FP doesn't fix this automatically.
--
Thanks.

CJSnet

(Remove TEETH to reply by e-mail.)
 
M

Murray

FP *shouldn't* do that automatically. What about if you don't WANT a 0px
margin on the page.

It is just proof that you should never rely on the 'preview' display....
 
R

Ronx

Try this:
<div style="position:relative;">
<img src="pic.jpg" width="250" height="100"><!-- add title and alt
attributes to suit -->
<div style="position:absolute;top:15px;left:10px;z-index:1;"><!-- add
width attribute -->
text to go over image
</div>
</div>

The relatively positioned layer wrapped around the image and layer
will remove the effects of margins and padding that apply to the page,
and will also keep the layer over the image if the image should move
around as the browser is resized or the browser text-size setting
changed. Also note that if the browser text-size is changed, the
layer will need more space - your design should allow for this; you
cannot fix a font size in any browser, unless the text is part of an
image.
 
C

CJSnet

I know, my point was just that FP is a WYSIWYG editor, yet in this case
WYSI*N*WYG!
--
Thanks.

CJSnet

(Remove TEETH to reply by e-mail.)
 
C

CJSnet

Thanks, couldn't get that to work, but the margin suggestion works fine, but
I also noted I needed to change the picture position to Middle rather than
Left in order for everything to line up.
--
Thanks.

CJSnet

(Remove TEETH to reply by e-mail.)
 
M

Murray

There is no such thing as WYSIWYG. There cannot be until there is only one
version of one browser in use. Don't believe what you read from anyone
saying that there is.
 

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

why does design view look different to preview in frontpage 03 2
Disappearing layers/<div> 3
Layers: Visibility Problems 4
Newbies. Layers & viewing in different monitors. 4
Limit on overlays? 1
unruly layers 2
Unruly layers 2
Front Page design Issue 4

Top