All my pages look funny in Firefox -...

User 166008 Photo


Registered User
388 posts

I used 2008 version to create my pages.

I think the coding must be wrong for FF but it looks right in I.E.

My pages should fill the whole screen but only cover the top half.

It looks like the inner tables are not scretching to 100% to fill the main table.

www.cedarstreetchurch.org.



User 38401 Photo


Senior Advisor
10,951 posts

Hiya Mark,

Might I suggest you update your code to the newer style of coding using CSS rather than the styling that is currently on your page? Also you might want to actually use <div></div> type of tagging and structure rather than a tabled structure (although this wouldn't be your issue, but is part of it).

Your styling code in your body tag and table tags etc. are no longer totally valid anymore and are therefore most likely the main culprit of your problem. Try running it through the HTML Validator :
http://validator.w3.org/ (or use the Validator for HTML built into the HTML Editor which is the same thing) and you'll see quite a few errors and most of them are just old code issues. When it's talking about needing literal values, they mean that none of the values used are telling the page what to use such as px for pixels or some of them are caps which don't validate either anymore. Things like that.

I would highly suggest you get the page through the validator and while doing that, update the code as a lot of your code is no longer considered valid at all (very very old school). This then will most likely get your page stretched as it should be as I'm seeing some errors regarding missing tags and extra tags and such which will do that.

Take your styles into a CSS file too, you'll be very glad you did in the end. Hope that helps and that it will touch on the issue of the length for you too when you have it updated and corrected :)

User 122279 Photo


Senior Advisor
14,624 posts
Online Now

Hi Mark,

Jo Ann is absolutely right about the code of your pages. But learning css is easy, and this is a good place to start: http://www.w3schools.com/css/

Apart from your site containing deprecated code which may lead to a different look from one browser to another, every browser also has their own default values for margin and padding. When you create a style sheet, a good practice is to start it with some 'reset' styling. The absolute easiest one is this:
* { margin: 0; padding: 0;}
.
You can see it used in the css files pertaining to the Web Calendar.

Good luck, and you know: we are a whole gang here to help if you get stuck ;)
(How else do you think some of us learnt to master the fine art of css?)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 92156 Photo


Registered User
272 posts

Jo Ann wrote:
... Take your styles into a CSS file too, you'll be very glad you did in the end. ...

Especially if you want to add more pages with the same overall "look" or make sweeping changes to the current look of your pages.
User 166008 Photo


Registered User
388 posts

I was afraid of this. It took me a long time to do what I did.

I don't really want to learn all the newer coding......:(

User 166008 Photo


Registered User
388 posts

I like that the CC program made doing tables easy.

I assume if doesn't do div tags nice and easy.
User 122279 Photo


Senior Advisor
14,624 posts
Online Now

You can do divs the nice and easy way too. Just open the 'code' tab (among the vertical tabs along the left side) and double click it.

The idea behind the style sheets is that you should keep the contents (in the html file) separated from the presentation (the css file). That way, if you find you want to change, say the font or the colour of something, you do it in one place only. Now you have to hunt all the font markup in your files to find every instance of it. Takes a lot of time if your site has loads of pages. So once you have taken the trouble of setting up the css, maintenance takes just seconds.

Another thing is, that when you see differences between the browsers now, those differences are going to be more and more apparent as the browsers come in new versions with increasingly more of the new html and css markup enabled. Just for your consideration...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 166008 Photo


Registered User
388 posts

Pardon my ignorance here Inger. I never used the code tab ever. I looked at it and it has lots of awesome stuff there however I am still lost.

As an example:

I had my webpage have one large main table that was 100% width and height. I would then put a table inside that one that had 3 columns at 100% width and 20% height (header).
Then I would make another 2 column table below that one 100% w and say 70 % height.
The last would be a 1 column table say 100 % w and 10% h (footer)

**Lojope.com would be my example.

I notice that many sites I see built are not made 100% wide. That is what I want to do.

How in the heck would I use div tags to make this format? I am totally lost here.

User 38401 Photo


Senior Advisor
10,951 posts

Hiya Mark,

I'll assume you've created your original site on the Visual side of the HTML Editor since you're saying you've never messed with the code side ever. Unfortunately (which is something that would be really cool) the VIsual side doesn't have the ability to automatically update your code. To be honest I would suggest you start over with a new theme and then fill in the colors and such that you want. You should be able to find a theme close to yours without too much difficulty I would think. This would be the "easiest" way to do this update for your site. You will definitely want it updated, it's very old code as we've already mentioned and eventually the site will not function once the HTML rules have gone more concrete and the currently deprecated tags are considered obsolete. Right now they work kind of (as you can see what the kind of means with your site), but who knows how long that will function yet if they literally remove the old code styles from working at all which I'm sure will happen in the future.

Best to update it now while it still works. You can do this by creating a copy of your files/folders and put it elsewhere on your computer and play with it to learn it. Much as I know you hate to learn it, some things will need to be learned, but you shouldn't need to learn "all" of it if you're determined to stay on the Visual side.

Might I also suggest trying Visual Site Designer as it's a much more robust program for Visual editing and creating of sites as that's it's main purpose. Since you already have the HTML Editor you can then create your tables needed right in that program and very easily import them with the HTML Tool of the Visual Site Designer program. Might be worth a trial of the software to see how it all works?

Wish I had better news for you, but Inger is right. Browsers are much more particular than they used to be and your code just will not function as it is or even with just minimal fixes. Give VSD a trial run and see if you like it, or maybe open up the HTML Editor and check out some of the themes that are included to see if something is close to what you have or maybe a new look you'd like. This would save you work on transcribing the old code to the new and you'd then just need to work with the newer style on the Visual side and it would stay current with anything new you added.

Hope this helps even a little, and there are a lot of users on the forums here that use VSD should you have any questions at all that forum is invaluable to many who need assistance :)
User 122279 Photo


Senior Advisor
14,624 posts
Online Now

Hi Mark,

I do understand, and I had more or less the same concerns when I started out with css, about 4 years ago. Here is a site I made back in 2005, before I was able to use css: http://www.vjgk.no/index.html. If you view the source code, you will find similarities to your own sites: nested tables, fonts, sizes and colours all in the same file. Maintenance was a real pain in the butt!

When I started learning css, what I did initially, was to create a style sheet with only the fonts, colours and sizes, keeping the tables still in the html file. That way it was not too overwhelming. After becoming a bit more adventurous I also added in some properties for the tables, paragraphs and such. You can see that if you click on any of the sub pages of the same site and view the source code, and also if you view the http://www.vjgk.no/mainstyle.css. I would have continued the transformation of this site, and most certainly made a new design, if it hadn't been for the fact that I moved away from the place and they wanted to have someone local to do the website (with the sad result that nothing has been done since I left...)

My main message to you is, that you don't have to stick everything into the css file right away, but do it gradually. Then you will get used to that way of thinking.

Now to your question about 100% width or not. A lot of sites were designed for smaller screens just a couple of years ago. Take that site I mentioned above, which was made for 800x600 px. Now, if that is viewed on a large monitor, it definitely doesn't look good. That is what happens with widths given in %. What you could do instead, is to set a fixed width, like e.g. in the range between 800 to 1000px depending on the screen resolution of your likely audience (you could ask people within your parish what monitor size they have). When I create sites now, I usually use 900px or 950px width.

I hope it helps, and yell back if you need more help. ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.