is there an html expert in the house?

you can see on the site if you're using a pc i have no line breaks between paragraphs, despite having put the in on the posts. each different review should be divided thus

end of review

full line space

start of new review

you can see this on a mac, but not on a pc.
also the default font is bold, i'd rather it be normal so i can use bold when formatting text and the font to be a little lighter. as i say it's all pretty simple, but i r a spazz with this sort of stuff.

is not valid HTML.

<br /> is not valid HTML.

it is. the space and slash is there so that it's also valid xhtml. (whereas your standard p's are being phased out and should be replaced with matching p and close p blocks)

(sorry if that doesn't make sense, i couldn't be bothered escaping the triangle brackets)

try to stick to 00, 33, 66, 99, cc, ff for the pairs (so-called 'web safe' palette). try #cccc99

remove font-weight:bold
change the typeface with font-family:whatever

{BACKGROUND: url(http://animatrix.free.fr/arm/armour.jpg) #201f1a; WORD-SPACING: 2px; COLOR: #CCBB88; FONT-FAMILY: new-roman;LETTER-SPACING: 0px}

(yes i meant px not pts)

PC survey of fonts: http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml
Mac likewise: http://www.codestyle.org/css/font-family/sampler-MacResults.shtml

#Title {
PADDING-LEFT: 0px; FONT-SIZE: 43px;font-weight:bold; PADDING-TOP: 10px

.Post {
PADDING-RIGHT: 15px; FONT-SIZE: 17px; MARGIN-BOTTOM: 20px; LINE-HEIGHT: 22px; TEXT-ALIGN: justify
}

Do you mean make the date bold and lighter in colour, as I can barely see it now.

I think if you use px rather than pt in your font sizings, the client cannot resize the text.

ah, I always wondered about that. That makes sense.

http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm

.DateHeader {
MARGIN-TOP: 30px; FONT-SIZE: 18px;font-weight:bold; MARGIN-BOTTOM: 0px; WIDTH: 300px; COLOR: #ddcc99; BORDER-BOTTOM: #837f67 1px solid;

TEXT-ALIGN: left
}

to make the date readable now, or is that too light?

(xpost yeah, change that letter spacing to 0px)

91% on macs, but I *AM* an awkward bastard - Courier New is a TrueType face. Courier is one of the magic core of PostSript fonts so it's preferable to have that instead. As I work in print it's safer/better to leave out anything TrueType with similar names to widely available PS fonts in case of unintended substitution.

http://www.w3schools.com/tags/tag_body.asp

http://xchg.assembler.org/index.html for instance (drag the info box over the blocks. blocks are also draggable btw). um, doesn't work in mozilla.

png files also allow alpha levels - can be semi transparent but support on certain browsers (*cough*IE*cough*) is broken.

body{font-family:courier new;background:#201F1A url('http://animatrix.free.fr/arm/armour.jpg');color:#CCBB99; letter-spacing:0px;word-spacing:-1px}

so just remove the url('...') and then play with the colours.

hmmm, didn't help. thanks for trying, though. i've been trying to figure it out for weeks, to no avail.

i'm wondering if this bit in the <H1> CSS is overriding other changes:

font-size: 2em;

Hmmm, how about if you set it to something ridiculous like 9999? This should make everything really tiny. If not there may be something odd happening.

Are you testing these on your live site?

yep - not the index.html of course, but under www.conferencecall.biz/alt.html

ok, i set it to 9999 and it made it so small that i can't see it on my phone. which is a good sign, i suppose!

x-post

A very quick fix while we find out why the viewport doesn’t seem to work as expected would be to try this at the end of your CSS.

@media screen and (max-width: 800px){
h1 {
font-size: 1em;
}
}

Try 1080 again, and refresh a few times, maybe use some over applications to make sure the cache is cleared.

so 1080 looks like this on my phone:

http://i.imgur.com/urBaBPE.png

i tried the @media fix and it didn't seem to change anything.

It won’t do if you have force set the viewport as well, because it will only work if the width is under 800.

Either try the @media css rule without the viewport meta tag, or try a larger number in the meta tag, try 1200, and then go higher if not on one line.

the @media css rule without the viewpoint tag looks like this:

http://i.imgur.com/cs6D2lL.png i'll see if i can try adjusting the number in the meta tag

or try a larger number in the meta tag, try 1200, and then go higher if not on one line.

1400 is the smallest number that puts everything on a single line, and then it looks like this:

http://i.imgur.com/n2330sE.png

which...is an improvement over how it currently looks on iphone, so i'll go with that for now i suppose!

You could try adding margin-left: 10px to that box to force-center it if that's the concern (haven't seen it on my desktop)

you lost the linebreak b/c you took out that P tag. you should put in a <br /> where it was

xpost to ffm - it only has the formatting issue on the iphone, so adding a margin-left: 10px would push it off-center on the desktop version.

i put the <BR> back in but it didn't seem to make a difference.

sigh. i get so frustrated working on code for a few hours - i don't know how some of you do it for a living!

try adding display: block; inside your h1 span {..} section - that may accomplish what you were using the break and paragraph tags to do. Could also add margin: 10px; to that - much less visible on desktop I'd imagine

hmm...i tried the display: block; in the h1 span, but it didn't seem to change anything. thanks though, ffm!

my new main concern is that the backing audio music loop doesn't play on mobile or tablets. my analytics are showing that about 27% of the visitors are using iOS or android. d'oh!

as philip mentioned upthread, i think it's because apple has disabled the use of autoplay on iphones (due to bandwidth concerns). however, since there's a Join button, it should be possible to trigger the backing audio loop since it's user initiated. as usual, i have tried and failed to fix this for hours now.

this section is near the top:

 <h1>unmute your line, then  </div>
    <span>Join</span> a conference call</h1>
    <audio autoplay='true' hidden='true' id='musique_concrete' loop>
    </audio>
    <audio autoplay='true' hidden='true' onended='audio.play()'>
    </audio>

('musique_concrete' is the id given to the backing ambient loop that isn't playing on mobile devices)

then there's this section of code that dictates what happens after the user clicks the Join button:

 join.onclick = function() {
        fadeOut(document.getElementsByTagName('h1')[0]);
        document.getElementById('musique_concrete').src = 'https://s3.amazonaws.com/conferencecall.biz/audio/bounce.mp3';
        audio.play();
        images.swap();
        document.getElementsByTagName('audio')[1].addEventListener('ended', function() {
          audio.play();
          images.swap();
        }, false);

however, since there's a Join button, it should be possible to trigger the backing audio loop since it's user initiated.

and there's this helpful stackoverflow thread that addresses it:

What this means (in terms of code) is that Javascript's play() and load() methods are inactive until the user initiates playback, unless the play() or load() method is triggered by user action (e.g. a click event).
Basically, a user-initiated play button works, but an onLoad="play()" event does not.
For example, this would play the movie:
<input type="button" value="Play" onclick="document.myMovie.play()">
Whereas the following would do nothing on iOS:
<body onload="document.myMovie.play()">

i guess i'm wondering why i can't just take the autoplay out of the top piece of code, so it looks like this:

<audio hidden='true' id='musique_concrete' loop>
    </audio>
    <audio hidden='true' onended='audio.play()'>
    </audio>

shouldn't the 'musique_concrete' loop still play once the user clicks the button?

 join.onclick = function() {
        fadeOut(document.getElementsByTagName('h1')[0]);
        document.getElementById('musique_concrete').src = 'https://s3.amazonaws.com/conferencecall.biz/audio/bounce.mp3'; <<<THIS LINE 
        audio.play();
        images.swap();
        document.getElementsByTagName('audio')[1].addEventListener('ended', function() {
          audio.play();
          images.swap();
        }, false);

in my extremely limited way of thinking about this, the line marked "<<<THIS LINE" should trigger the musique_concrete loop. but when i test it out, the backing loop doesn't play at all. it only plays if the "autoplay" is included in the top <audio> code, even though it's not triggered until the user clicks the button.

i realize i'm making very little sense, sorry. i'm befuddled myself!

Are you still using Dreamweaver? The latest HTML, CSS, and JavaScript is malformed, e.g. Line 142 has an unmatched `</a>`. Regardless, there’s a number of problem that’ll need to be addressed—including using a different method for vertical aligning the `<h1>` element. I can fix this later today.

There’s also an unmatched `</div>` wrecking havoc.

yikes. i'm sure both of those are my own fault. the twitter/facebook/about section at the top was something that should have been really simple, but it took me...a very long time. and i'm sure somewhere in the process i introduced the problems.

Here's a demo of a fix for the positioning problems on mobile:

https://gist.github.com/goodmanio/3f604b6062e2f3f0ab11

yikes. i'm sure both of those are my own fault. the twitter/facebook/about section at the top was something that should have been really simple, but it took me...a very long time. and i'm sure somewhere in the process i introduced the problems.

I think most of the problems were introduced by the pop up, i.e. "about this .biz."

hope it's ok, allen, but yesterday tim nolan (creator of the awesome cachemonet) messaged me and asked about how to get looping sound files to work on phones. i told him that i had very little to do with the coding (except for messing it up!) and pointed him in your direction.

ugh, looks like multiple simultaneous audio might be impossible now. my brother-in-law directed me to this:

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Multiple Simultaneous Audio or Video Streams

Currently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices. Playing multiple simultaneous audio streams is also not supported. You can change the audio or video source dynamically, however. See “Replacing a Media Source Sequentially” for details.

Nice, my bro-in-law totally helped out with a bunch of stuff, including the formatting problem on mobile/tablet! also he added a subtle little 3d effect to the "JOIN" button so that it presses down when you click on it. he also pointed out that I was pointing to the wrong URL on the facebook share button. Fixed it, and now it's showing that I have 640 shares!

I made some progress today:

https://www.evernote.com/shard/s23/sh/22e2b286-849c-4c6a-90d9-9ffe0ca82641/1f2018d6a0d6626277f54eea8c4eca14/deep/0/ConferenceCall.biz.png

whoa, that looks pretty awesome!

i'm still not sure what i'm doing wrong with the tweet button code. it's still showing 0 tweets even though there have been probably around 100+ tweets or so

Twitter changed the way you access tweets recentlyish, do you may be using some old code?

I used the new code, I believe (https://about.twitter.com/resources/buttons). And just yesterday (after it failed to work for a few days) I added in a few parameters that were supposedly supposed to help (like counturl). almost all of the available troubleshooting for it on twitter's website is a bunch of people asking why the count button won't go up, and a singular twitter employee recommending that people just wait a few days, and then people angrily saying they already tried that.

html is so hard
it feels like the latin i don't know

logical, illuminating, somehow monastic, present but out of reach

HTML comes as naturally to me as breathing.. Now I'm learning JavaScript & C# and feeling that Latin confusion. Anything we can help with?

this is so reassuring! i don't know. i find learning it so engaging. i took a class at school a while ago & ascended from manipulating it to being able to write in short bursts, to ctrl-tab into a stylesheet & tap out squiggly brackets while frowning judiciously. & the logic of it is so appealing, the sticklebrick nature that rewards effort & arbitrary variation, that stumbles you into solutions. i learned most html i know in tandem with trying to learn French & my html is just so much better. i remember when i first understood the orthographical rule about surrounding a paragraph of speech with an opening quote but not a closing quote if it was continued in the next paragraph, & being so satisfied by the internal logic; you need to introduce speech as what it is, but you don't want to incorrectly suggest that the speech ended when it just broke, or needed formatting. & a lot of html is like that for me, but then it also strays beyond me when it transcends its most basic kinda rootsy precepts: interplay between divs; controlling across browsers; relying on things more complicated than css that aren't self-evident in the thing you wrote, javascript, externally hosted iframes, &c.

i'm kinda hesitant to get into my thing here, just because i think i would be inflicting unnecessary stress on strangers? i think i need to draw a picture of it. to ~broadly outline my woes~, i keep a photo-diary, & i was so pleased a while ago when i realised i could make it scaleable by using percentages instead of fixed pixel values. like it is the simplest language but it works & makes me feel like i am satisfying children with baseball caps skating down the sidewalks squinting nihilistically at their cellphones. but i wanted to expand the thing i was doing before - stretching one very wide jpg across the entire page, with a little white space above & below - into a kind of messier assemblage of content. not just a jpg that i could say width="100%" to, but a couple of jpgs & then a youtube embed & then more pictures. & it just gets so messy, & i revert to trying to use tables, which everybody tells me is just gauche, & then the cells overlap & i don't have clumsy, control-vocab language to locate the stack overflow threads in which other Former Custodians of Now Abandoned Tumblrs have vented their frustration in. ha ha. you know? i could try to problem solve here but i guess more i am trying to just elicit camaraderie with everybody else who feels aphasic looking at something they just wrote.

thank you so much for offering your skills FFM! all of this kinda thing totally reminds me of the semi-utopian nature of this, in which everybody seems to be freely & encouragingly working on this stuff remotely, together, benevolently.

Had a few irl crises to solve this weekend keeping me from coming back to this thread but I hope to clear those out soon and put my HTML hat back on - I agree that it is tempting to fall back into tables but if you stay strong and committed you can get that euphoric feeling of satisfaction! It's all in careful planning of margins usually but without seeing code it's hard to spitball :)

has this gone viral? i've just had it posted in my facebook feed by a stranger from the outside

it's starting to get out there a little - my housemate said her friends were posting about in on facebook yesterday as well

Please help me create ConferenceCall.biz by recording agonized audio snippets

this is probably not HTML, but is it possible to determine if a visitor's volume is on mute or not? Ideally I'd like to have a check built into thirtysecondstories.com so that if it notices that your volume is on mute, it displays a message or image telling you to turn it on.

This says no: [Removed Illegal Link]

For some reason ilx doesn't like that stackoverflow link ¯\_(ツ)_/¯

haha, it's ok, i believe you. i did a decent amount of searching and found nothing, but thought i'd check in here one more time. i wish there was an elegant way to make sure that people had their sound turned on other than a message saying "please turn your sound on." i guess i could always try to be fancy and make a little image that represents turning sound up and have it display for a few seconds at the beginning before fading away.

The basic answer is that browsers are made this way to avoid letting sites have control over hardware, which makes sense.

it's true, i suppose the security implications would be a little disturbing! thanks!

script kiddies would have a field day if they could control your machine's audio volumes from the browser

oh, i wasn't trying to control the machine's volume itself, i was just wondering if there was a way to know if a machine was muted. if so, i would then trigger a message saying "turn your volume up fool!", but if it was already up, no message would appear.

Nah, also I have external speakers where my pc has no way of knowing whether I have the volume dial turned down.

Just put up a generic message anyway "Turn your volume up to hear the music" or something

have an audio instruction for them to turn off the volume at pageload then a written instruction to turn on the volume after a few seconds and that way you will be 100% sure that everyone is in the same state

Maybe a gif of Jayz from the Dirt off your Shoulder video extorting people to "turn the music up in those headphones"? I'm always convinced

the only solution is to request everyone's personal address and then i'll go around from house to house playing people audio recordings of stories

an excellent career in management awaits you