IE woes! Please help

After spending two days overhauling our church website, my Dad sent me some screen shots of what it looks like on his PC - he’s using IE running XP. I’m exasperated! Would someone with access to a PC running IE take a look at this page:

http://home.comcast.net/~buck-test-site/New%20Here/thebasics.html

The left (“The Basics”) and right (“Welcome to Christ’s Church”) html boxes should be level. They are on my Mac when viewing the page in Safari and Firefox. What do I need to do to fix it in IE?

One of the reasons I am moving to Freeway from RapidWeaver is because I grew very tired of dealing with IE woes. Is it just a fact of web design?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I should have been more specific. . . My father is running IE7 and I am only interested in supporting that version and up for the time being.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have checked the site in IE8 and the boxes are perfectly level - I even checked them with a screen guide. Fine in Firefox on Windows as well.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Buck,

I’ve taken a screen grab of how the site looks on IE7 for you, it can be seen here:-

http://s3.amazonaws.com/scrnshots.com/screenshots/70378/IE7_PC_Screengrab.jpg

Hope this helps.

Craig


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Craig - as you were able to see, the right html box containing “Welcome to Christ’s Church” has dropped down below the left box containing “The Basics” - they should both be parallel to each other (and are when viewing the page in Safari and Firefox).

That’s my question. . . What is causing it to drop in IE7 and how to do I fix it?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The same here.
I don’t see the addition ‘px’ after the dimensions for heigth, width and so on. Why is that? Could this be the issue?
And it is a table layout? Why not using DIV’s?
Place a child div aligned left, and one right aligned in a container div, and you should be fine.

Dan created a very nice tutorial here:
http://danjasker.blogspot.com/2008/07/fw5-understanding-box-model.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Buck,

I agree with Richard. Learning all about the Box Model and understanding how to use DIVs would be much better for the future.

Right now though, I have looked at your code and taken it into Dreamweaver to show exactly where the problem lies…

Skitch | Evernote shows the problem and highlights how it can be rectified.

Hope this helps,

Craig


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Craig - the link you provided is very helpful. To make sure that I understand the fix you are suggesting. . . all I need to do is simply lower the width on either left or right (or both) html boxes, correct?

I thought I was using the “Box Model” in that my page is laid out within html boxes as suggested by someone else here in the forums. Being a newbie, I am not familiar with what a DIV is, but I have bookmarked the link to Dan’s tutorial and will try to get my mind around the concepts when I have more time.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, that should do the trick.

Unfortunately, the Box Model method is very different to using tables to lay out pages, but once you grasp the ideas behind it, you will find it a lot easier. There are still some issues regarding different browsers, but generally Freeway allows you to produce code which works very well in most browsers.

It is definitely worth spending some time learning, I’m still learning every day. There’s always something in a design which will throw a spanner in the works in one of the browsers (usually IE6).

Best,
Craig


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just finished watching Dan’s two screencasts on the Box Model and they raise a question. I started with an html box just like he did and inserted additional boxes within, etc. Why did I end up with tables while he ended up with DIV’s?

I noticed in the screencast that the CSS button was on the entire time he was designing. Is that what makes the difference? If so, other than having the CSS button on, is there anything else I need to be aware of to ensure that I am working with DIV’s?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Indeed the CSS button must be on all the time when working this way. Otherwise you will end up with the page being made up of tables as you have encountered.

Unfortunately, you cannot just swith on the CSS button and export the page again (that would be too easy wouldn’t it?) You must recreate the page again with the CSS button on.

It’s a bit of a pain after laying it all out seemingly the correct way, only to have to do it all over again. I found this out the hard way too.

Craig


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 8/10/08 (at 15:11 -0400) Craig Paterson said:

Unfortunately, you cannot just swith on the CSS button and export
the page again (that would be too easy wouldn’t it?)

How about selecting each item in turn and checking the Layer checkbox
in the Inspector palette? Doing that for an item makes it be output
as a div (layer) with no further work required.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, all you have to do is go through the page, click on each element,
note if the Layer checkbox is checked, and make it so if it isn’t.
You may have to re-order some things front-to-back after you do this,
but that’s really simple using the Site panel or the menu commands
for send forward/back etc.

The big button controls what will happen NEXT, but as you have seen,
it doesn’t modify what has already happened.

Walter

On Oct 8, 2008, at 3:11 PM, Craig Paterson wrote:

Unfortunately, you cannot just swith on the CSS button and export
the page again (that would be too easy wouldn’t it?) You must
recreate the page again with the CSS button on.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Buck, Walter (and everyone else), my apologies for the wrong information regarding the recreation of your page using CSS. If only I knew that the first time I made the mistake of not using the CSS method of creating pages. I never switch the CSS button off now.
I shouldn’t always be so hasty in posting when I don’t know as much as some of the longer standing FW users.
Sorry again,
Craig


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 8 Oct 2008, 8:18 pm, waltd wrote:

No, all you have to do is go through the page, click on each element,
note if the Layer checkbox is checked, and make it so if it isn’t.
You may have to re-order some things front-to-back after you do this,
but that’s really simple using the Site panel or the menu commands
for send forward/back etc.

Thanks for the tip, Walter. Turning on the Layer checkbox for each of the elements was easy enough, but the “re-ordering” is turning out to be quite the challenge. It seems that now my boxes are somewhat goofed up. Is there a simple way of editing/altering the sizes, either by pixel or percentage, without making things worse?

At this point I am wondering whether it would be quicker for me to start over.

  • Buck

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Click on the label at the top of the Site pane, and it will change to
Page. Now you should see a hierarchical list of all elements on the
page. Each element you click on in the design view will highlight in
this list. Dragging an element in the list will allow you to change
its position on the page. Lower items (further away from the page
name, which is always at the top) are closest to the “top” z-index
(closest to your eye). If this doesn’t make it easier, then yes, re-
creating the layout might be faster.

Walter

On Oct 8, 2008, at 5:23 PM, Buck wrote:

On 8 Oct 2008, 8:18 pm, waltd wrote:

No, all you have to do is go through the page, click on each element,
note if the Layer checkbox is checked, and make it so if it isn’t.
You may have to re-order some things front-to-back after you do this,
but that’s really simple using the Site panel or the menu commands
for send forward/back etc.

Thanks for the tip, Walter. Turning on the Layer checkbox for each
of the elements was easy enough, but the “re-ordering” is turning
out to be quite the challenge. It seems that now my boxes are
somewhat goofed up. Is there a simple way of editing/altering the
sizes, either by pixel or percentage, without making things worse?

At this point I am wondering whether it would be quicker for me to
start over.

  • Buck

freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I’m starting to get the hang of this. But I’ve run into a couple of snags:

  1. Now that I am working with CSS divisions, the html boxes no longer automatically expand as I add content (text), whereas they did before I turned the CSS button on. I am having to manually and continually adjust the height and length of all the html boxes.

  2. The size of the pasge isn’t automatically expanding to keep up with the addition of text, etc.

  3. Now that the site has been uploaded, when I increase the size of the fonts, the text overflows out of the frame.

I’m sure I’m missing something somewhere. Can someone help me out? Here’s the new trial page in question:

http://home.comcast.net/~buck-test-site/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

  1. Do your HTML items have undefined heights to them? If you’re doing a box-model I always count out how many boxes I’ll need for content before anything gets put in there. I usually start with a wrapper or container HTML Item and then place all my boxes within that giant box. So if you wanted to say do a header, with a menu underneath, and then a two column section underneath you’d have one big box, insert 2 more HTML items within it, inside one of the boxes you’d have a header and menu boxes and then in the other box you’d have two HTML items that floated left and right for the two column.

  2. Usually the page size adjusts if you double click within the page itself in Freeway till you get the cursor and enter your first box there instead of drawing one out manually. “Insert” > HTML Item is better than drawing them out.

  3. The text flows because it appears you don’t have undefined heights and you can set this by selecting the HTML items and ticking the gray arrowed height box so it’s dimensions are gray’d out. You can also set Freeway to ask you for the undefined height in your preferences.

I’d even recommend putting in some blank DIV’s as spacers to fit some browsers that might not understand padding or margin’s too well. Such as IE6, sometimes goofy, and so on.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 9 Oct 2008, at 02:44, Buck wrote:

Okay, I’m starting to get the hang of this. But I’ve run into a
couple of snags:

  1. Now that I am working with CSS divisions, the html boxes no
    longer automatically expand as I add content (text), whereas they
    did before I turned the CSS button on. I am having to manually and
    continually adjust the height and length of all the html boxes.

In the Inspector, go to the ‘height’ field, and click the little icon
next to it, which gives the box an undefined height; it will then
expand to accommodate your text.

best wishes,

Paul Bradforth

http://www.paulbradforth.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks guys!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options