ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Reply Subscription Options  

Results in Different Browsers

before and after each table; mine says nothing.

Are these the problem?

Again, I thank you for your help.
Carole

Forums: Questions and Answers About Building Your Site
Created on: 09/16/11 09:58 AM Views: 1572 Replies: 18
Friday, September 16, 2011 at 9:58 AM

After looking through the help forums, I've gotten the impression that it is possible that CC pages appear the same in all browsers. Mine certainly don't, and I'd love to know how to do this.

At the moment, I'm working on a page called "Focus on the 50s" and have added the several copies of the same collage on the left to correspond to the data on the right. This changes as I add more data. I'm doing this in a table.

The number of collages necessary is different in each browser. For example, Firefox needs far less than Chrome and AOL. I've noticed the same with other pages on my site--especially with the size of type.

Can pages be created that appear the same in all browsers? If not, which would be the best to use? If they can, please tell me the secret.

Thanks,

Carole

Reply
Friday, September 16, 2011 at 11:37 AM - Response #1

Try making your collages in a photo editing program, combining all the image into one rather than using a table.
This will assure that all will see the same illustration, regardless of which browser/version they are using.

Reply
Friday, September 16, 2011 at 12:26 PM - Response #2

The collages are imported as a .jpeg file so they are coming in as one object at a time. Since I don't know in advance how many sets of collages I'll need, I add one collage as I add information on the other side of the table.

I could attach them together once all the material is on the site, export them as a .jpeg, and import them as one "photo." Do you think this would help?

Thanks for your thoughts,
Carole

Reply
Friday, September 16, 2011 at 2:56 PM - Response #3

I understand it's different than I was envisioning after looking at your page. One solution: Instead of the vertical collage of artwork, make a horizontal one that fits between the topics.

I'm assuming you have the artwork and text in two columns of a table.

Very creative. You've got a good start!

Reply
Friday, September 16, 2011 at 3:05 PM - Response #4

Thanks, John. But, I should be able to do what I'm trying, shouldn't I?

Carole

Reply
Saturday, September 17, 2011 at 1:10 AM - Response #5

You set the background of the cell to the collage (vs stacking images). You need to resize the image narrower - to around 60 width (whatever you had img sized to), otherwise it assumes the size (width) of the image.

It will automatically tile the cell as required. This will look the same in all browsers.

Reply
Saturday, September 17, 2011 at 10:08 AM - Response #6

I changed the image width to 60--it had been at 95--but, at that width, it's had to read the individual parts of the collage.

If I understood you correctly, my problem was not setting the cell width to a particular size and letting the image dictate this. So, I set the cell width to 100 and changed the image back to 95. This does not show the same in all the browsers I tried--IE, AOL, Firefox, and Chrome.

Are you telling me that I have to have the collage image smaller for it to work?

I really appreciate your help with this. I do want my classmates to see this thing as it was meant to be.

Thanks, Jack!
Carole

Reply
Saturday, September 17, 2011 at 1:44 PM - Response #7

The cell background needs to be set and the cell width. Delete all the img (ages) first. Type something there so you can find it easier in source mode.

I can't directly see your original so I'm just peeking around at what is there. I can also only play locally without the CC environment. So you may need some adjustment to my comments - maybe in left/right white space.

You have 2 columns on the left, the first one has the images you have now. Set the first column to a width of 95 pixels (to match your prior image width). The background image is stored at 95 (I just took 60 as a quick guess before, size up to you of course.)
In html, looks like this

I did not see a way for the CC editor to do this(?), so it has to be done in source mode. It's like the background for a page, only it does it just for that cell (aka column).

Using the background method requires that the image be made narrower otherwise it will expand. I set the cell to 95 in this example, just for illustration. Use your own ideas about what you desire. (I used 60 before.)

Btw, this will load page much faster. You may not notice since you have it cached.

Reply
Edited 09/17/11 1:46 PM
Saturday, September 17, 2011 at 8:22 PM - Response #8

Well, Jack, I didn't get it to work. I deleted all the collage images, wrote what you did in source--though it redid it as:

I then reloaded all the collage images to the length I wanted, saved it all, and took a look. I did this in Firefox and it looked fine. But, it did not look the same in IE, Chrome, and AOL.

Can you try again to explain this?

Many thanks,
Carole

Reply
Edited 09/17/11 9:32 PM
Saturday, September 17, 2011 at 11:39 PM - Response #9

To show code here, use the code button - it tries to interpret otherwiseRolling Eyes

This had me going for a bit, till I created a test page to isolate where the problem is occurring. The short story is that your page has some html errors. FF and Opera were smart enough to recover, but the other browsers all got confused when I used a cell background. I used different methods and the display errors varied between the browsers. So there's something amiss in thereWink

Here's a link you can use to verify that basic concept works. I used both a fixed cell width of 95 and a percent of 17 just to test both methods.

I left it very simple so you can easily identify the code by using your browser's view source feature.

Look for the code follows this and when you get to that's where it stops.

CLICK ME

Browser comments: AOL messed up everything when they got the code to IE (part of a settlement thingy). AOL is a teeny tiny percent of browsers. that's my take

I test IE8, IE9, FF, Chrome, Opera and Safari. You can test AOL with this and see if it works. It should work, but I wouldn't worry if it did not.

Reply
Edited 09/17/11 11:40 PM
Sunday, September 18, 2011 at 8:59 AM - Response #10

Well, I'm very proud to say I found what I was suppose to; but it's a bit out of my league. However, I am determined to learn how to do this.

This is mine and my observations(The Xs are mine and are before and after the table):

1. I seem to have where you have

Reply
Edited 09/18/11 9:00 AM
Participant: Log in to see names Sunday, September 18, 2011 at 9:07 AM - Response #11

This is bizarre! Can you read my entire message? My page shows part of it in the reply box and the rest floating around the top of the thread. And, the page is blown out!

Yikes! I AM out of my league today. I can't even send a reply, and I deleted and rewrote it several times!

Reply
Edited 09/18/11 9:11 AM
Participant: Log in to see names Sunday, September 18, 2011 at 1:06 PM - Response #12

Oops - looked again, could be a CC mistake letting something in code box mess up the posts. I played a little (and got it changed) but decided to leave it.

It's actually a GOOD example of what happens with just one little mistake. To continue this we should start a new topic and let this mistake hang here as an example that directly relates to this discussion.

What you have and my example are not the same. Your's has img and the example uses background. br is basically a spacing tool (line break) - not significant. However, there's a very simple rule of html that can cause strange results if not followed.

For most html, there are pairs. For example
Here's the code for the example

Reply
Edited 09/18/11 6:01 PM
Participant: Log in to see names Sunday, September 18, 2011 at 10:54 PM - Response #13

I did it, Jack! I really did! And, not on some test page--on the real thing!

I had a lot of trouble figuring out how to identify the correct image. We'd been calling it "Collage2.jpg" and "YourCollage.jpg." I may have used in a roundabout way, but here's what I did.

First I created a new image the correct size and named it "NewCollage1951.jpg." I placed it in the right place in the table and then went into "source." The image was still identified by the old name I'd given it when I wasn't so smart, thanks to you--don't know why; I thought I'd deleted everything. I replaced it with:

I used the designation the program gave the image; don't know if all the "/s" were necessary but included them. And, just like you said, the collage appeared as many times as necessary! How very cool!

I didn't check the other browsers because I know they are right.

Thank you! Thank you! Thank you!
Carole

(If you get several messages similar to this, it's because CC refused to send it for the last 45 minutes--I think--so I had to try over and over.)

Reply
Participant: Log in to see names Sunday, September 18, 2011 at 11:04 PM - Response #14

Way to go Carole!!!! (And thanks to Jack!!!!!)

Very cool.

Reply
Participant: Log in to see names Sunday, September 18, 2011 at 11:19 PM - Response #15

Great, you are almost there. It's hard to explain the one issue I found earlier (besides the background that you now successfully changed - congrats) and it's in the 2nd table. There's something still wrong there and it's related to the number of columns on the left at that location.

All the browsers work, except IE9. I noticed that before and that's why I knew something was amiss with the html. Before it affected more browsers, now it's only IE9.

In the first table there's a remnant of the original image floating in there and should be removed
The 2nd table,not sure yet. Could be a missing start of table since it's buried in another table doesn't show.

So just IE9 needs the final fix

Reply
Participant: Log in to see names Monday, September 19, 2011 at 8:40 AM - Response #16

Okay, so much for thinking all was solved and patting myself on the back.

I found the extra image code and deleted it. How did you know it was still there?

As for the second collage, it's actually in a cell. I made one overall table and then added a cell for 1950 and another for 1951, and plan to do the same for each year. Therefore the only

that I saw comes in the beginning.

I see a "" in the following cell. Could this be it?

I see that you went to high school in the state of Washington and have decided you are a big deal at Microsoft or because of your patience and effective communication skills a professor at U of Washington.

Thanks,
Carole

Reply
Participant: Log in to see names Monday, September 19, 2011 at 9:10 PM - Response #17

There was at least one unbalanced code tag - and then that pushed the left cell into a narrow format (this is related to the way IE does not wrap long text correctly). But the way I found this is by recreating your page piece by piece (in a slightly different way).

CLICK ME to see the fixed page

What I did was put the big heading in a separate table, then the one with the background for the year. Repeat for each year. The tables do not need heights, nor do you want to. That makes it expands just right.

That style makes is easier to keep mistakes to a minimum and keep them confined a bit better. There will be accumulated "junk" html as one edits with the CC editor. I removed some of it, but that was only incidental to the main job of getting it to work.

The spacing is not quite right - so you need to make it back to how you want it. I was doing this piece by piece so I could catch any issue right away.

Reply
Edited 09/19/11 10:25 PM
Participant: Log in to see names Monday, September 19, 2011 at 10:28 PM - Response #18

Carole I. Mackey wrote:

I see that you went to high school in the state of Washington and have decided you are a big deal at Microsoft or because of your patience and effective communication skills a professor at U of Washington.

That's what I tell my wife and she says the cow wordCool

Reply
New Topic Reply  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.