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.
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.
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.
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".
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.
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 :)
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.
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.
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.
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).
Comments
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%;}
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".
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?
What I'd like is for the tables on the left and right hand side to be leveled at the top.
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...??
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.
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
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).
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/