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:
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?
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?
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.
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.
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).
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?
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.
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.
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.
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
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.
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.
Okay, I’m starting to get the hang of this. But I’ve run into a couple of snags:
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.
The size of the pasge isn’t automatically expanding to keep up with the addition of text, etc.
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:
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.
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.
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.
Okay, I’m starting to get the hang of this. But I’ve run into a
couple of snags:
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.