HTML code fragment alignment

[Chris]

Sorry for reposting but I never rec'd a response and didn't want my thread to
get lost.

I added HTML code fragments to two sites.
www.advancedaudioinc.com (See "Manufacturers Links")
www.chrissmithtest.com (See any of the pages w/ "add to cart" or "view cart")

In the design view I have to misalign the fragment up and to the left to
have it display correctly in IE. If you view the page in Netscape or Mozilla
(The rest of my site looks correct in these browsers), you can see where I
have had to position the fragments so that they correctly display in IE. As
you see it in Netscapre is exactly how I had to arange the fragment in
publisher

Another interesting note is that with the misaligned fragment, it will
display correctly in IE on a standard monitor but not in a widescreen monitor
such as my Dell 8600. My friend has an identical laptop and has the same
problem viewing these fragments (The rest of the site appears fine to him).

 

[David Bartosik [MSFT MVP]]

If I don't say anything it's because I have nothing to offer. Sorry dude.
Both the issues you report here have previously come up in a couple earlier
cases. However to date I have no understanding of the problem nor any
resolution. I have reported them to MS.

David Bartosik - [MSFT MVP]
www.publishermvps.com
www.davidbartosik.com

 

[DavidF]

Chris,

I read your original post but was unclear about what you were asking. You
say that you inserted a code fragment, but I didn't know what object, text,
or what...or perhaps I am too dense to understand (very possible). When I go
to the Manufactures page it all appears just fine in IE, but the list of
manufacturers are 'misaligned' in Firefox...is this what you are talking
about? And the other link...are you talking about the 'add to cart' icons?

If this is the case, one thing I have noticed is when I have tried to insert
a code fragment into a text box, it wouldn't work. I had to just insert the
code fragment directly into the pub page. Perhaps if you are inserting
directly into a text box along with other text, this is a problem? Maybe
describe more specifically what steps you are taking, and maybe then we can
help more.

As per the laptop problems, as David B. said, that issue has come up before
without an answer. I find my Dell laptop also produces the html code
differently than my desktop, but have never figured out why for sure. Some
have guessed that it has to do with resolution, different text sizing, etc,
but I haven't read anything definitive. Sorry.

DavidF

 

[Chris]

David,

I am not inserting HTML into a standard text box. I go to the Insert Menu
and select HTML Code Fragment. This then creates a box (Similar to, but not,
a text box) that you can insert your HTML into. On www.chrissmithtest.com,
the "Add to Cart" and "View Cart" buttons are not graphics but a piece of
HTML inserted. On www.advancedaudioinc.com, the "Manufactures Links" page
includes hyperlinks that open the links in their own windows. This was done
by inserting HTML fragments. As you see these buttons/links appear in
Firefox is the position of the HTML code fragment box in Pub2003.

This creates a tremendous amount of work in that it is not WYSIWYG (whereas
the rest of the page is). I have to guess (In general it is up and to the
left) at the placement of the code fragment in Pub so that it will display
correctly in IE. This takes quite a bit of trial and error to get the
desired result. Positioning the fragments in the WYSIWYG methedology will
generate a misaligned IE page (HTML fragments being shifted down and to the
right) but a correct looking Netscape/Firefox page.

Hope this helps

 

[DavidF]

Hey Chris,

I understand. I have found when inserting HTML code fragments with Pub 2000
that they can shift things around sometimes, and have had to adjust designs
to compensate. In my case the inserted code makes other elements shift, not
the code itself. I don't have a good answer for you. I'm sure you have tried
everything, but what happens if you create a blank web page with no
background and try inserting your code? Do you get WYSIWYG? Perhaps add one
element at a time around the code to see if you can identify what elements
don't like to play well. Are you using 'snap to'...have you varied the size
of the code box... Like I said, no good answer I am afraid. Isn't web design
fun?

DavidF

 

[Chris]

David,

I tried a blank design with just a bmp for positioning referrence and adding
a fragment below but not touching it. Still the same problem. I also tried
putting the fragment on the bmp and got the same problem.

I have tried to alter the size of the fragment box and it doesn't seem to
matter.

I haven't tried adjusting/turning off the snap to grid. While I will
entertain the idea (what else do I have to do with my time), but I am a
little pessimistic. Web design is fun!

BTW - I really appreciate your help - Thanks

 

[David Bartosik [MSFT MVP]]

DavidF,
on code frags - what you would be experiencing in 2000 would be different
from what I've seen with 2003. (due largely to CSS2 and VML in 2003) What
you want to be sure and do DavidF is to determine about what dimensions on
the output your html code is going to render at and use that in the layout
stage. You need to size the code fragment box at as close to output size as
possible when doing the layout. Because when the html code is rendered by
the browser the browser will size everything on the page accordingly in
relation (as opposed to 2003's absolution). It takes a good understanding of
traditional html tables and cells to fully grasp the concept but I'll try to
explain- if you create a text box with a single line of text on the pub page
and just to the right of it you place a code fragment with html code that
will render a graphic of 125 pixels by 125 pixels but you size the fragment
box to the same height of the text box to it's left then the rendered output
will be a 125 px tall graphic on the right and on the left a line of text
with tons of blank space under it (and pushing down any content you designed
below it). That is because the table cell containing the text has to be
sized by the browser to match the neighboring cell holding that graphic
which relationally sized the cells to 125 px height. So the best way to
design the layout is to size the fragment box at 125 x 125 on the pub page
and then size the text box to the same height and use that content area
accordingly. Unfortunately 2000 has no pixel measurement (I finally got it
into 2003) so you have to draw those fragment boxes at "roughly" the same
area, 100 pixels is "roughly" an inch. If you always draw code fragments at
about the same size has the output area then layout the page accordingly
then your rendered page (using version 2000) should be pretty accurate to
the design page.

David Bartosik - [MSFT MVP]
www.publishermvps.com
www.davidbartosik.com

 

[Chris]

I tried an interesting experiment last night and ended up with some success.

I loaded my copy of Pub2003 onto my other Dell laptop (Sorry MS for
violating the licensing policy but I'm at a dead end). My older laptop is a
Dell 8100 w/ a standard aspect ratio running Win2000, latest ver of IE, and
now Pub2003.

I brought over my files on a flash drive, opened them in pub, created a new
document, then dragged over one page for testing. I then aligned the
fragments with the WYSIWYG method, published to web, and it worked in both IE
and Netscape.

I then (from my 8100) realigned all the other HTML frags from my entire site
designed originally on the widescreen dell (8600), published to web from the
8100, and it works as it should.

The point of my story is that I can do all of the design on my 8600, align
all objects as they should be by WYSIWYG, save the pub file, put it on a
flash drive, open it on my 8100, publish to Web, then post that file to the
server and it works as it should. While this isn't an ideal work around, it
is exponentially better than the previous solution.

Turns out (i think at least) that I was correct with my original assumption
that there is a "build issue" with Pub2003 on the 8600. When it converts
these frags into the doc it doesn't build correctly. Maybe MS can use this
info to fix the problem and not sue me for my licensing violation

 

[David Bartosik [MSFT MVP]]

Hardware does not effect the code generation. It's a display issue with
laptops. Seemingly with Dells.

To be helpful we'd need you to post graphics details on both machines...

graphics card model
video driver with version
resolution setting
physical screen size

David Bartosik - [MSFT MVP]
www.publishermvps.com
www.davidbartosik.com

 

[Chris]

Since I use the 8600 ervery day, here it is:
Laptop: Dell 8600 w/ widescreen monitor
Video Card: NVIDIA GeForce FX Go5200
Driver Ver: 4.5.8.6
Resolution: WSXGA+ up to 1680 x 1050 (Used at 1280 x 800, I have adjusted
this to the other options and have seen no change wrt my problem)
Screen Size: 15.4" Widescreen

Please note that hooking up the 8600 to an external standard monitor, then
setting the resolution to a standard aspect (ie not widescreen) and using the
laptop as a tower does not produce any different of a result.

The 8100 resides at home on a shelf but what's below is what I recall -
sorry no driver version. I'll repost next time I see it.
Laptop: Dell 8100 w/ Standard Aspect Monitor
Video Card: Nvidia GeForce2 Go
Driver Ver: ?
Resolution: 1600 x 1200
Screen Size: 15" Standard Aspect Monitor

Hardware does not effect the code generation. It's a display issue with
laptops. Seemingly with Dells.

To be helpful we'd need you to post graphics details on both machines...

graphics card model
video driver with version
resolution setting
physical screen size

David Bartosik - [MSFT MVP]
www.publishermvps.com
www.davidbartosik.com

I tried an interesting experiment last night and ended up with some
success.

I loaded my copy of Pub2003 onto my other Dell laptop (Sorry MS for
violating the licensing policy but I'm at a dead end). My older laptop is
a
Dell 8100 w/ a standard aspect ratio running Win2000, latest ver of IE,
and
now Pub2003.

I brought over my files on a flash drive, opened them in pub, created a
new
document, then dragged over one page for testing. I then aligned the
fragments with the WYSIWYG method, published to web, and it worked in both
IE
and Netscape.

I then (from my 8100) realigned all the other HTML frags from my entire
site
designed originally on the widescreen dell (8600), published to web from
the
8100, and it works as it should.

The point of my story is that I can do all of the design on my 8600, align
all objects as they should be by WYSIWYG, save the pub file, put it on a
flash drive, open it on my 8100, publish to Web, then post that file to
the
server and it works as it should. While this isn't an ideal work around,
it
is exponentially better than the previous solution.

Turns out (i think at least) that I was correct with my original
assumption
that there is a "build issue" with Pub2003 on the 8600. When it converts
these frags into the doc it doesn't build correctly. Maybe MS can use
this
info to fix the problem and not sue me for my licensing violation

 

[DavidF]

David,

Thanks for taking the time to explain so well. I think I had learned some of
this through trial and terror, but it is good to understand the theory and
principles involved. As I have continued to use Pub 2000 to produce
websites, I have had to learn a bit about html, JavaScript etc., in order to
tweak as much as I can get from the program. I do wish it had pixel
measurement though. Now if we/you can just get Microsoft to take the best of
Pub 2000 web building function, add pixel measurements, and perhaps a couple
new features in Pub 200whenever, then I might just have to upgrade.

DavidF

DavidF,
on code frags - what you would be experiencing in 2000 would be different
from what I've seen with 2003. (due largely to CSS2 and VML in 2003) What
you want to be sure and do DavidF is to determine about what dimensions on
the output your html code is going to render at and use that in the layout
stage. You need to size the code fragment box at as close to output size as
possible when doing the layout. Because when the html code is rendered by
the browser the browser will size everything on the page accordingly in
relation (as opposed to 2003's absolution). It takes a good understanding of
traditional html tables and cells to fully grasp the concept but I'll try to
explain- if you create a text box with a single line of text on the pub page
and just to the right of it you place a code fragment with html code that
will render a graphic of 125 pixels by 125 pixels but you size the fragment
box to the same height of the text box to it's left then the rendered output
will be a 125 px tall graphic on the right and on the left a line of text
with tons of blank space under it (and pushing down any content you designed
below it). That is because the table cell containing the text has to be
sized by the browser to match the neighboring cell holding that graphic
which relationally sized the cells to 125 px height. So the best way to
design the layout is to size the fragment box at 125 x 125 on the pub page
and then size the text box to the same height and use that content area
accordingly. Unfortunately 2000 has no pixel measurement (I finally got it
into 2003) so you have to draw those fragment boxes at "roughly" the same
area, 100 pixels is "roughly" an inch. If you always draw code fragments at
about the same size has the output area then layout the page accordingly
then your rendered page (using version 2000) should be pretty accurate to
the design page.

David Bartosik - [MSFT MVP]
www.publishermvps.com
www.davidbartosik.com

Hey Chris,

I understand. I have found when inserting HTML code fragments with Pub
2000
that they can shift things around sometimes, and have had to adjust
designs
to compensate. In my case the inserted code makes other elements shift,
not
the code itself. I don't have a good answer for you. I'm sure you have
tried
everything, but what happens if you create a blank web page with no
background and try inserting your code? Do you get WYSIWYG? Perhaps add
one
element at a time around the code to see if you can identify what elements
don't like to play well. Are you using 'snap to'...have you varied the
size
of the code box... Like I said, no good answer I am afraid. Isn't web
design
fun?

DavidF

but
not, When
I go insert
the we
can sizing,
etc, left
to in
IE. the
same