Need help with html on my GC page info.

[+Harwell5]

I have written my info for my GC page in html and have no trouble with the codes themselves (I think), but for some unknown reason, IE will not show the page correctly. When viewing my GC page, HERE, in IE, the page seems to widen my info and some cannot be seen on the right side. You can see it best through my stat tab after clicking it, but it occurs in all tabs. You can tell by the bottom bar listing the last update. You should be able to see the date beside the words "last update".

 

I can see this problem only with IE. I use Google Chrome and Mozilla Firefox as well, but the same thing does not occur with either of those two although FF shows one slight difference (at time of this post) which I am sure I know how to correct. This same thing happens on my computer at both my home and my office and I can't figure out the reason.

 

Could someone look at my GC page through IE, Chrome, FF or another browser and tell me if the problem is seen on your end as well and any advice on how to correct this problem or if it is an IE thing.

 

Thanks,

Robert (Harwell5)

[+StarBrand]

Looks fine in IE 8 Beta 2 and IE 7 and FF on a Vista machine.

[+webscouter.]

I think the problem stems from you using pt or px as a width,height etc. IE uses a wider/taller pt size than the other browsers. Because of this the page is wider.

[+Harwell5]

Looks fine in IE 8 Beta 2 and IE 7 and FF on a Vista machine.

I have IE7 as well, but still showing cut off along the right side. Both IE7's are on XP.

 

I think the problem stems from you using pt or px as a width,height etc. IE uses a wider/taller pt size than the other browsers. Because of this the page is wider.

Will check on the pt's, but the only thing I use the px W/H on are the image sizes (which I have reduced several times) or the border sizes everything else I tried to use a % to get around this. I will double check that though, but I am sure I went over that MANY times to make sure.

 

Any other thoughts or ideas?

 

This bug is eating me bad and driving me nuts. Somebody spray the DEET!!

[+trainlove]

If your profile picture is too big it will also push your home page around quite a bit.

There are several forum posts about the issue with scrunched pages, most notably the Release Notes threads of a month or two ago.

[+Harwell5]

If your profile picture is too big it will also push your home page around quite a bit.

There are several forum posts about the issue with scrunched pages, most notably the Release Notes threads of a month or two ago.

I thought about that too with the picture and that may be the culprit (haven't tried removing it just yet), but the picture didn't pose a problem before I added more info to my page a while back. I think something got in somewhere during an add and I just can't see or find the bug.

 

I REEEEALLY don't want to have to start over!!!

[+Corey]

One thing with percentages: "width=100%" sometimes/always means "of the whole browser window", not "of the available space". Could that be the issue?

[+Harwell5]

One thing with percentages: "width=100%" sometimes/always means "of the whole browser window", not "of the available space". Could that be the issue?

I thought of that as well, Corey, but hadn't tried it. Really wasn't sure that would be the case since the GC page seemed to have a "lock" on the information width limit. Even so, if that was the case, I shouldn't have a horizontal scroll bar at the bottom to have to view some of the information. That would mean there wasn't a width limit to what could be placed. I will definitely try to reduce the % and see what happens. Thanks for confirming a thought. Will post results after that try.

 

Hey, Corey, do you see the same problem I see when viewing with IE7? StarBrand said they saw it fine with IE7 on their Vista machine. I use XP on both my computers. Do you see the problem?

[+Cache O'Plenty]

FYI - your basic profile page looks just fine with my IE7 / Windows XP. No scroll bar and the date after "Last Update" at the bottom is visible.

 

However, the Calendar and Stats tabs are too wide for the screen.

 

Interesting layout for a profile page. I don't think I've ever seen tabs being used before.

[+webscouter.]

I use tabs on my profile too.

[Ranger Fox]

My goodness, look what I have started by using tabs in my profile...

 

Remove the form tags from your HTML, Harwell5, they're messing with IE. Doing so solved the problem in the test case I set up on your page.

 

If that doesn't work, I'm now watching the thread.

[Ranger Fox]

I did some more digging. I know your profile's HTML is based on mine* and I didn't remember ever typing form tags into my HTML (yes, I hand-typed everything). That struck me as odd.

 

I looked at my profile's HTML and saw mine, too, had form tags injected around the hidden button. I removed them and saved the page. When I reviewed the resulting profile HTML on the profile page, the form tag had returned. After one more try, I realized it had to be something with the utility Groundspeak uses to make sure people don't abuse the profile page by injecting JavaScript or object tags into the HTML.

 

Therefore, Harwell5, it looks like no matter what you do, those form tags will be inserted around the button. Move the button's HTML to the end of the profile HTML and you won't have a problem anymore.

 

-----------------

 

* I know my handiwork when I see it. Due to the utility Groundspeak uses, I couldn't use a block of JavaScript to control the tabs. I didn't want to duplicate code within each tab's onClick event, so I created a hidden button that, when clicked, would return all tabs to a neutral, deselected state. From there, in the tab's onClick event, I apply the style/state specific to the clicked tab. A little history there--this was two years ago--and that's how I know my tab structure when I see it.

 

With all my experimenting, by the way, I did find a way to load any external JavaScript file I wanted. I think I'll keep the details a secret since that can easily be abused by others. I bring it up because it has been two years now and revisiting the tab HTML made me wonder if this has been fixed.

[+Harwell5]

HOT DAWG!

 

I really wanted to try and figure it out myself because I am trying to teach myself html, but sometimes it pays to ask someone who already knows the answer to a question that will help you in the right direction.

 

THANK YOU RANGER FOX!

 

BTW, yes it was your handiwork I borrowed from on the tabs and I appreciate that. It probably would have taken me a lot longer to learn it had I not ran across your profile. I hadn't seen any others besides yours until now, which was webscouters.

 

As far as Javascript, I am just dabling into that, but don't have near the knowledge to know how to use it yet. Html was where I wanted to start when I started teaching myself and I've come a lot further faster than I thought with your help. I used yours as a basis, but created more codes around it. I am still playing with more features right now, but am still trying to figure them out. Wish I could learn faster like Data (Star Trek). Any advice to someone wanting to learn how to write in html (yes I know it is the ancient way) would be appreciated. I want to learn other ways too, such as php and Javascript, but one thing at a time is all I can handle and basics is what I should start with.

 

Anywho, thank you Ranger Fox, that fix was the key (moving the button html to the end) for the main width problem. However, I do notice one other thing after that fix that I would have thought would have been fixed as well. My calendar and stats pages are wider than the other three causing a horizontal scroll bar to appear and making the info on those two tabs wider than the default screen. Any help on that?

 

Again, Thank you.

[Ranger Fox]

I've been looking at it. I came up with a patch for the calendar section, but the stats one will take a while. The problem is the browser doesn't take well if the content's width goes over 600px.

 

Most likely I'll have to check through the HTML structures and see what's happening. That will take some time. Please be patient: I'm working a tournament after work and through the weekend, so time is something I don't have a lot of at the moment. (I've been locked into my area for the past two months without a free weekend to cache somewhere. I'm getting antsy.)

[+trainlove]

Here's something that can save all you a lot of time.

http://forums.Groundspeak.com/GC/index.php...p;#entry3570735

[Neos2]

Here's something that can save all you a lot of time.

http://forums.Groundspeak.com/GC/index.php...p;#entry3570735

Doesn't save me any time because I don't know what half of those are for, and it doesn't explain for dummies like me how to implement them. But thanks for sharing!

[+Harwell5]

Here's something that can save all you a lot of time.

http://forums.Groundspeak.com/GC/index.php...p;#entry3570735

I have seen that post in the past. Thanks for the thought TL, but that only tells us which html tags are allowed. It doesn't really tell where my problem is in my code for my page. My codes and tags are ok, it's just a width or placement of the tags issue. Ranger Fox however did help me locate my problem and is helping me work out the kinks for the width issues.

 

Thanks again for the thought though.

[Ranger Fox]

Since you're learning HTML, I'll tell you what I did and how I got to where I am. There may have been other ways to do this, but I did what worked best for me.

 

I first began by copying just the HTML that appears in your profile. That seemed fine and I couldn't get anywhere. I loaded the page again and copied all HTML and converted all relative references (those that didn't include a domain) to absolute (e.g. I made them point to geocaching.com). That meant I had a working copy of the entire page on my laptop. I could then reproduce the problem you cited. Both reproducing your problem and getting the page in an editable form was absolutely necessary for me.

 

I fixed the first problem tab, which I told you about previously in this thread. After that, everyone else around me demanded my time and the weekend went by without much free time.

 

So this was where I was at tonight (Monday). From here on out, I made a copy of the original problem file so I could experiment with it without losing what I would later use to test a solution.

 

I stripped everything from the file except the profile_stats div. I could still reproduce the problem. I then removed all width attributes from your table. Now, that was painful. And guess what? That didn't help! What was wrapped stayed wrapped, but nothing got shorter--not even the comment text on your favorite cache section. I thought for sure that had to have wrapped, but it didn't.

 

Curious, I removed everything but the favorite section and it wrapped. Therefore, the problem did not lie in that part of the HTML. I copied the stat stuff that followed the favorite section back into the HTML and the problem came up. I removed that and copied in the stat stuff above the favorite section. Same there. <sigh> I removed the favorite section, leaving the top part. Same problem.

 

The top part has four other sections. Based on how the shortened tables looked, I could subtract the part with your group membership. I removed everything but the "My Caches" and "Individual Cache Find Stats" section. Same problem. Table-riffic. Tables nested inside tables; it's a nightmare! ...

 

And then I realized something. You probably used CacheStats to generate most of the HTML, which you later edited. So, now, I don't know how to proceed. I can fix the table and get it just right, but the fix will be overwritten when you generate new stats. The fix is to specify specific widths for some of the tables and columns: IE isn't wrapping contents in those cells by default, so it needs a hint.

 

So, now what?

[+Harwell5]

Although I do use CacheStats to generate my stats, I don't actually plug in the generated html file into my page. So that won't be a problem.

 

With the HTML editor I use, I open two windows, one with the new stats and the other with my page info I created as you see. Then all I do is hand enter the new info into the appropriate areas of my page. It doesn't really take long at all for me to do. I just change a few numbers here and there and then add my next milestone or FTF or whatever.

 

So changing the width of the tables sounds like the way to go. I played with it a little by reducing the width to the 600px that you mentioned to fix the calendar page, but the stat info seemed to really close in on both sides making everything wrap to unnecessary row heights. I really would prefer to not have to add row heights to skirt around it, but I will if I have to.

 

I think you may be onto something. What solution do you have for the widths that may be different from the 600px solution?

[Ranger Fox]

If you want the table to be smaller, you will need to resign yourself to having wrapping content. Alternatively, for those tables where you put two side by side, you could move one down below the other or have the headings wrap (in the case of the left table where the content is one or two digit numbers and the column’s header takes up four times the content’s width).

 

There's one row in particular (a row header). Most everything in that row spans the width of its containing cells. If you can't wrap that header row, you won't be able to make it smaller.

 

(FYI everyone: we're also communicating via email and copying or paraphrasing our exchange here.)

[+Harwell5]

I really would prefer for the content not to wrap, but I know some places are just going to have to be that way and can accept that. I have changed my page some since you probably last copied my html. Have you looked at my page recently? Is there anything different on your end?

 

It looks like my div width may have changed back to 100%, which seems to look like it may have fixed the problem. (OpioNate started helping before you and tried by reducing it to 90 which didn't work). Now I don't see the problem with the width on my work computer. I didn't look at it last night at home, so I don't know if it looks different there. (Reason for difference, wide flat screen monitor at work, normal 17" CRT screen at home.) Problem was there on my work computer before and now it's not.