Need Help with some HTML Code of a Star Wars: Edge of the Empire Campaign

IanHoulihan

Basically I think my code really needs cleaning as its near impossible to "replicate" easier and was just seeking help there. I was also looking for a way to line the tables to the top of the main section.

dawnhawk

The unlined tables thing is likely due to the malformed code toward the bottom of the nested table.

You have a
instead of a , and a weird paragraph break overlapping your top table.

I reformed the code in the example link I originally gave you - so you can see it there. I can't copy it - it's too long for a forum comment, but I can email it if you want it (otherwise just right click and view source on the page - the same way I grabbed it from you). I cleaned a bit of it up taking out some redundancy and changing a bit over to CSS (that's below) - it just made it easier for me to read and work through the issues...also there is no reason to set an image width and height...when the original image is already the same width and height.

As for replication - make yourself a "template of the code" - ie a copy of just the empty tables with the "static" info filled in and empty cells everywhere else. Save it on a page so you can copy and paste into a new character sheet as needed and then just edit the code to add the new values. That way you always start with a "clean" sheet.

Still tedious, but a bit easier because you are deleting less while making a new character.


CSS
.main_table{width:500px;}
.main_table td{width:50%;}
.inner_table{width:90%;}

IanHoulihan

Feel free to e-mail to: houlihan dot ianm at gmail dot com

IanHoulihan

What I was hoping for, was a way to link an image in the HTML that isn't as long, and refer to it in the CSS with the longer file name. This would be particularly helpful as the Ability Dice, Proficiency Dice, Booster Dice, etc are constantly repeated.

dawnhawk

The length of the file name is an OP thing. It's the only way to access any image uploaded to OP.

Even if you used a CSS sprite - you'd still have to reference a "filler" image, which if you uploaded to OP would have a long file name. And if you uploaded to another server would require that url instead - which may be shorter but not really noticeably.

You could bitly the images I guess and reference the Bitly. But I personally find that a bit silly. It doesn't make the "code" any "easier".

IanHoulihan

I've just uploaded the code to the page, and yours just go a little wonky too. I think it has something to do with the size of the cells where the skills are located.

IanHoulihan

I've saved your code as "TEST CHARACTER 2":https://edge-of-the-empire-veil-of-darkness.obsidianportal.com/characters/test-character-2

dawnhawk

How did you lose the at line 78?

Oh scratch that...the white space just got lost.

I'm not sure what's going on. I can see that the copy you've put in has a wonky space. But it's not on my test page.

You can try comparing the two codes side by side by putting them in notepad++ or similar program.

But whatever you changed...your original test character no longer has the weird space on my screen either?

IanHoulihan

I may have been playing with the code. I've re-uploaded it as it should be verbatim.

IanHoulihan

It be doing strange things.

IanHoulihan

Weird space?

What I'd like is for the tables on the left and right hand side to be leveled at the top.

IanHoulihan

Once I have Far Horizons, I'm going to assume that there will be a "Perform" skill I can add so that the left hand table is higher than the combined right hand tables which will mean they won't be out of alignment. That could be my OCD coming into play too :)

dawnhawk

Yes I know that Ian.

But when I look at it - on my test page - it's level on top. When I looked at your Test 1 Page a few minutes ago - you had the sheet twice (once with it level on top, once with the right side lower than the left). Now you have it Once - with it level on top on my screen. And your Test 2 has the right side lower than the left.

So...??

IanHoulihan

OK, so "TEST 1":https://edge-of-the-empire-veil-of-darkness.obsidianportal.com/characters/test-character is my code only. "TEST 2":https://edge-of-the-empire-veil-of-darkness.obsidianportal.com/characters/test-character-2 is your code.

dawnhawk

Yes I know - but obviously in the copy from here to somewhere else...something went strange.

My question is - does test one look the way you want - because it now looks fine to me (before you did the switching back and forth it was broken on my screen, now it's fine). So if it is - then go with the test one code.

IanHoulihan

TEST 1 looks fine apart from the alignment of the tables within the main "skills" table.

Basically this is the issue (and yes its so minor that it may not be worth the hassle of fixing):

"This is how it currently appears":https://db4sgowjqfwig.cloudfront.net/campaigns/94329/assets/358808/how_it_currently_appears.jpg?1408155048

"This is how I'd like it to appear":https://db4sgowjqfwig.cloudfront.net/campaigns/94329/assets/358806/how_id_like_it_to_appear.jpg?1408155022

dawnhawk

So...it looks like the second picture on my screen.

I suspect you have a browser related issue if you are seeing number one. You either need to figure out which piece of code is causing the inconsistency in your version of your specific browser and find an alternative that will work across all browsers (which may not work) - or apply specific CSS code to overwrite things in your specific version of your specific browser (which if I remember correctly is IE).

For the record...IE is a royal pain in the arse when it comes to making things look right (especially if you are newer to code).

IanHoulihan

IE - BLECH! Firefox all the way baby!

dawnhawk

Not much better. Unless you like using -moz commands everywhere in your CSS because of how long it takes them to implement new commands. :)

I recommend you bookmark this:
https://developer.mozilla.org/en-US/docs/Web

And keep abreast of what is and is not working in Firefox if you want to make sure things always look right in that browser.

Next, bookmark this one:
http://jsfiddle.net/

It will let you play until things look right.

Next, go get the Pedericks WebDev addon. Trust me.
https://addons.mozilla.org/en-US/firefox/addon/web-developer/

IanHoulihan

So your preference is Chrome?

dawnhawk

Generally...works the same on my android phone, my mac at work and my pc at home. lol