The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

kedo posted:

You're not supposed to wrap inline elements around block elements.

It isn't 2005 anymore. HTML5 has no issue putting block elements inside an anchor tag and it's explicitly allowed as part of the standard.

# ? Feb 7, 2014 22:15

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 17:27

kedo: Nov 27, 2007

Misogynist posted:

This isn't the nineties anymore. HTML5 has no issue putting block elements inside an anchor tag and it's explicitly allowed as part of the standard.

Oh I realize it's no big deal these days, was just explainin' why Lumpy said it was invalid.

# ? Feb 7, 2014 22:18

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Thanks for the replies. I hadn't thought about just styling the anchors themselves but it seems pretty obvious in hindsight. On the other hand I might need some styling within the Isotope items that can't be accomplished by a single styled anchor and may end up using divs or spans anyway.

Anony Mouse fucked around with this message at 22:28 on Feb 7, 2014

# ? Feb 7, 2014 22:24

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

kedo posted:

You're not supposed to wrap inline elements around block elements.

Why not? Is there some standard that says this?

# ? Feb 7, 2014 22:26

glompix: Jan 19, 2004; propane grill-pilled

pokeyman posted:

Why not? Is there some standard that says this?

XHTML 1.0, HTML 4 for sure. In HTML5, you can wrap block elements in an anchor only. Conceptually the rule makes sense. Block level elements have different layout rules which collide with inline elements. (is it page width or auto width? it's undefined)

I'd stick with the rules. It's just a safer bet with such a diverse browser ecosystem. I guess you can just paper over those differences with CSS though, but it's still undefined behavior.

glompix fucked around with this message at 22:39 on Feb 7, 2014

# ? Feb 7, 2014 22:36

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I'm pretty sure it's in the HTML4 specification, if not as a hard rule then as a guideline.

I've done it for years simply because it makes structural sense to me and it works.

# ? Feb 7, 2014 22:40

Oh My Science: Dec 29, 2008

This StackOverflow thread explains why and offers alternative layouts.

If you don't have to worry about older browsers then you're golden.

# ? Feb 7, 2014 22:47

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

glompix posted:

XHTML 1.0, HTML 4 for sure. In HTML5, you can wrap block elements in an anchor only. Conceptually the rule makes sense. Block level elements have different layout rules which collide with inline elements. (is it page width or auto width? it's undefined)

I'd stick with the rules. It's just a safer bet with such a diverse browser ecosystem. I guess you can just paper over those differences with CSS though, but it's still undefined behavior.

That linked StackOverflow answer led me down the right path. This is determined (in the WHATWG spec at least) by an element's content model. If you go to text-level elements, the a element's content model is (sort of) "transparent" which inherits its parent's content model, but the other elements on that page (notably span) allow only "phrasing content" which precludes block elements.

Is the HTML 4 spec even worth discussing these days? If you're stuck on a browser that doesn't support something more modern, you're probably more worried about that browser's quirks than what the spec says should've happened.

Finally, is that undefined behaviour? I recall part of HTML 5 was a push to standardize error handling. This certainly happened with parsing, but I can't find much about content model violations in the spec.

# ? Feb 7, 2014 22:53

glompix: Jan 19, 2004; propane grill-pilled

pokeyman posted:

Finally, is that undefined behaviour? I recall part of HTML 5 was a push to standardize error handling. This certainly happened with parsing, but I can't find much about content model violations in the spec.

Well, maybe it is defined as an error, but when would you ever want to write erroneous markup? I used to worry about this kind of poo poo in 2008-2009 and it's really not worth it to obsess over, but it's just good to know where the boundaries of the spec are even if you choose to ignore them for whatever reason.

# ? Feb 7, 2014 23:12

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

glompix posted:

Well, maybe it is defined as an error, but when would you ever want to write erroneous markup? I used to worry about this kind of poo poo in 2008-2009 and it's really not worth it to obsess over, but it's just good to know where the boundaries of the spec are even if you choose to ignore them for whatever reason.

I agree. And it's not even smart to rely on documented error handling, in case future changes to the spec change your previously invalid markup into something valid but not what you intended.

# ? Feb 8, 2014 08:03

Jaded Burnout: Jul 10, 2004

pokeyman posted:

I agree. And it's not even smart to rely on documented error handling, in case future changes to the spec change your previously invalid markup into something valid but not what you intended.

It's also a good idea to avoid the browser guessing at what to do, such as webkit quietly dumping your block elements outside a <p> you might erroneously put them in.

# ? Feb 8, 2014 12:44

Lt Moose: Aug 8, 2007; moose

I'm having some issues with CSS and IE7. I'm working on a page for an intranet site, and unfortunately IE8 defaults to using compatability mode for all intranet pages. My problem is with the dropdown li elements - in all other browsers, the whole block element is clickable, however in IE7 it is only on the actual text of the link. This also screws with selecting dropdown items - the menu doesn't stay expanded unless the mouse is hovering directly over the text.

I've looked around online and tried setting a transparent gif as the background but that didn't work.

I've included some sample code here:
http://wppresearch.org/test/calendar.html

Anyone know if I can make this work? I normally would just ignore this, but unfortunately a majority of the users will use IE, which will default to compatability mode.

# ? Feb 8, 2014 23:45

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Lt Moose posted:

I'm having some issues with CSS and IE7. I'm working on a page for an intranet site, and unfortunately IE8 defaults to using compatability mode for all intranet pages. My problem is with the dropdown li elements - in all other browsers, the whole block element is clickable, however in IE7 it is only on the actual text of the link. This also screws with selecting dropdown items - the menu doesn't stay expanded unless the mouse is hovering directly over the text.

I've looked around online and tried setting a transparent gif as the background but that didn't work.

I've included some sample code here:
http://wppresearch.org/test/calendar.html

Anyone know if I can make this work? I normally would just ignore this, but unfortunately a majority of the users will use IE, which will default to compatability mode.

Make sure the anchors are blocks (which it looks like you got covered) and that they are width and height 100% so they fill the LI. Other than that, I got nothing.

# ? Feb 9, 2014 03:13

Lt Moose: Aug 8, 2007; moose

Lumpy posted:

Make sure the anchors are blocks (which it looks like you got covered) and that they are width and height 100% so they fill the LI. Other than that, I got nothing.

Thanks, I checked that and it looks good. One thing I just noticed - any part of the dropdown menu that extends beyond the content div actually functions correctly (red box below). This leads me to believe that something in the content div is causing interference or problems. I have no idea what, but it gives me another place to mess around with.

# ? Feb 9, 2014 07:49

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Lt Moose posted:

I'm having some issues with CSS and IE7. I'm working on a page for an intranet site, and unfortunately IE8 defaults to using compatability mode for all intranet pages.

I remember having the same issue with compatibility flicking on for our intranet, unfortunately that was well over a year ago and we've just recently forced everyone up to 10/11 - but I recall the solution being shoving these lines at the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

I don't know what most of that really means because I'm a poo poo coder

Also, I recall that when IE goes into compatibility mode it sets its browser mode to the previous version because someone at Microsoft decided that intranets will always be updated less often than new browser versions are deployed (ha!) - so IE8 in compatibility is reporting itself as IE7 and thus not triggering that [if IE 8]

# ? Feb 9, 2014 09:20

Lt Moose: Aug 8, 2007; moose

Ghostlight posted:

Also, I recall that when IE goes into compatibility mode it sets its browser mode to the previous version because someone at Microsoft decided that intranets will always be updated less often than new browser versions are deployed (ha!) - so IE8 in compatibility is reporting itself as IE7 and thus not triggering that [if IE 8]

Yep, that is my exact scenario. Anyways, I figured it out! It was an issue with Z-indexes. I guess IE7 treats them differently for absolute and relative positioned elements. It took a long time to track it down but now it's solved.

Also, the IE11 developer toolbar is really handy. Very easy to check compatibility with all the different versions.

Lt Moose fucked around with this message at 22:55 on Feb 9, 2014

# ? Feb 9, 2014 22:50

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Lt Moose posted:

Also, the IE11 developer toolbar is really handy. Very easy to check compatibility with all the different versions.

Just chiming in to say that while you won't notice the differences in 98% of situations, IE version emulators in IE 7/8/9 don't behave exactly the same as the real thing.
If you're supposed to 100% support IE7/8/9 your best bet is to have a VM running actual copies of those actual browsers.

# ? Feb 10, 2014 04:15

Xarb: Nov 26, 2000; Not happy.

You can get VMs for IE here: http://modern.ie/

# ? Feb 10, 2014 05:38

Boz0r: Sep 7, 2006; The Rocketship in action.

I've got some CSS that replaces my checkboxes and radio buttons with nifty little squares and circles. It works fine in IE and Chrome, but in Firefox, nothing shows up:

code:

input[type=checkbox], input[type=radio] {
    visibility: hidden;
}

input[type=radio]:before, input[type=checkbox]:before {
    content: "";
    visibility: visible;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid @textcolor1;
 }

What gives?

Boz0r fucked around with this message at 14:30 on Feb 10, 2014

# ? Feb 10, 2014 14:17

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

v1nce posted:

Just chiming in to say that while you won't notice the differences in 98% of situations, IE version emulators in IE 7/8/9 don't behave exactly the same as the real thing.
If you're supposed to 100% support IE7/8/9 your best bet is to have a VM running actual copies of those actual browsers.

I believe in IE11 the situation is even worse: emulated earlier versions don't understand Conditional Comments targeted at them. Which pretty much makes them fuckin' useless.

Thanks Microsoft.

Thansoft.

# ? Feb 10, 2014 14:38

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Boz0r posted:

I've got some CSS that replaces my checkboxes and radio buttons with nifty little squares and circles. It works fine in IE and Chrome, but in Firefox, nothing shows up:
code:
input[type=checkbox], input[type=radio] {
    visibility: hidden;
}

input[type=radio]:before, input[type=checkbox]:before {
    content: "";
    visibility: visible;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid @textcolor1;
 }
What gives?

FF doesn't allow generated content for form fields, which I think is actually correct behaviour, even though it's a pain in the arse.

You could put the styles on a parent <label> instead.

# ? Feb 10, 2014 14:40

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Has anyone here used GSAP? It looks really nice but I've never heard of it before.

# ? Feb 10, 2014 15:06

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

Sergeant Rock posted:

I believe in IE11 the situation is even worse: emulated earlier versions don't understand Conditional Comments targeted at them. Which pretty much makes them fuckin' useless.

Thanks Microsoft.

Thansoft.

I can't really complain too much, since they're giving away VMs for every IE that matters. (at http://modern.ie if you missed it)

# ? Feb 10, 2014 15:12

kedo: Nov 27, 2007

Cross post from the general programming thread because I'm not sure where to stick this.

Earlier today I noticed that a client's account on our server had a bunch of perl processes running. This was odd to me because the account is just basic hosting for a WordPress site. So looking into it I found this file sitting in their cgi-bin, called chanst.pl

Is this what it looks like? I don't know perl or Russian, but this sure looks like a bot script to me? Also any recommendations for what to do here besides deleting the file (which I already did), updating WordPress and changing passwords?

# ? Feb 10, 2014 18:26

Oh My Science: Dec 29, 2008

Yeah..... I would probably nuke the account or recommend changing hosts. If it's a shared host there is likely an exploit that you cannot patch.

# ? Feb 10, 2014 19:51

kedo: Nov 27, 2007

Just went in and disabled cgi-bin access for everyone on our server, so we'll see how that goes. I looked into all of the accounts on the server and found similar files in a few more locations, however all those accounts were very old, and none besides the first appeared to be running the script. I'm thinking this must have been a pretty old exploit that I just didn't notice until now, hopefully it's since been fixed.

So I think I may have things sorted for the time being... but I'm going to have to keep a close eye on my processes for the next week or so.

# ? Feb 10, 2014 19:55

pipebomb: May 12, 2001; Dear God, what is it like in your funny little brains?
It must be so boring.

Xarb posted:

You can get VMs for IE here: http://modern.ie/

Cool they offer this, but 'mac/parallels' - they made it as Microsoft (awkward) as possible. FFS, they offer a cURL download, but can't make a single zip file?

# ? Feb 10, 2014 21:35

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

pipebomb posted:

Cool they offer this, but 'mac/parallels' - they made it as Microsoft (awkward) as possible. FFS, they offer a cURL download, but can't make a single zip file?

The multiple file thing is true for any of them, not just some anti mac/parallels :tinfoil:

. They probably broke it up because otherwise it'd be 4GB+ and it'd suck if something happened while downloading and you had to redownload the whole thing again.

# ? Feb 10, 2014 21:56

-JS-: Jun 1, 2004

pipebomb posted:

Cool they offer this, but 'mac/parallels' - they made it as Microsoft (awkward) as possible. FFS, they offer a cURL download, but can't make a single zip file?

If you don't mind using VirtualBox: https://github.com/xdissent/ievms

code:

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash

# ? Feb 10, 2014 21:59

stoops: Jun 11, 2001

I'm trying to work with css3 filters on images, mainly hue-rotate.

Do these filters work on background images and divs? I can get the filters to work on standalone images, but not when I have a div with a background image.

# ? Feb 10, 2014 23:01

nwin: Feb 25, 2002; make's u think

I'm being tasked with something at work and I want to know what exactly I need to know in order to ask a productive question here. The only coding I've done was a lovely geocities site over 15 years ago.

Here's what I know:

I work for the government and I'll be given access to one of our web pages that has an .asp extension. What it is, is basically a webpage where industry can go and schedule exams. Right now we just have something that says

First inspection date: (There's an empty box here for them to type in whatever they want, but they usually put in a date)
Second inspection date: (Same as above)

What my boss wants is for a calendar icon to appear by each box that they can select the date from. Also, we don't want to allow them to be able to select the next day (So, if today is the first of October, they go to the website, click on the calendar, and they won't be able to select the 1st or the 2nd).

I've been googling a lot for some help and it definitely seems like something that is doable, but here's the concerns.

1) I can't download anything. Where I work we can't download things to our computers. I've seen a lot of .zip files and things available online through googling, but I can't use em. So it has to be just straight code I'm typing in. I *might* be able to get around this if I find out I can work on the website from home (However, I use Apple at home so I'm not sure if that would just confuse everything or not)

2) Can't spend anything. Yep.

3) The guy I'm taking over for, has said that the problems he has run into is that everything we use is so old, that a lot of the stuff online just doesn't apply anymore (no idea if that's true or if he's just lazy, but to his credit we're still using IE 6 and Windows Vista I'm pretty sure).

So, while it'd be great to find a quick answer to my above question with some code pasted, I'm guessing I haven't supplied enough information to get the ball rolling. So my question to you guys is what do I need to provide to get help on this really? What would .asp fall under as far as coding? Can anyone recommend any good sites to help out with this? I really don't mind learning and I'll be doing this for a while, so I might as well, but this is completely outside the scope of my normal duties and I'm just not sure where to begin.

Thanks for any insight you all can offer.

# ? Feb 11, 2014 02:55

Oh My Science: Dec 29, 2008

Make sure you don't have to conform to ancient accessibility rules, I've heard horror stories about that for gov sites. That's why the tech you may be using is so out of date.

# ? Feb 11, 2014 03:07

nwin: Feb 25, 2002; make's u think

Oh My Science posted:

Make sure you don't have to conform to ancient accessibility rules, I've heard horror stories about that for gov sites. That's why the tech you may be using is so out of date.

How will I know if this is the case?

# ? Feb 11, 2014 03:18

EVGA Longoria: Dec 25, 2005; Let's go exploring!

That sounds like a classic ASP website, which falls into a horrible mix between front end and Backend.

What you want is a datepicker. If you don't have the option to drop in jqueryui, you probably have to build it from scratch. Basically involves creating a div with a calendar, triggering it to be visible when you click the button, and then filling the form when you click a date in the calendar.

There's a lot of steps involved along the way. I would never want to build this from scratch.

# ? Feb 11, 2014 03:22

Doc Hawkins: Jun 15, 2010; Dashing? But I'm not even moving!

<input type="date"> works in Chrome, at least.

eta: and mobile safari, android, and blackberry! So now you just have to roll your own cross-browser datepicker widget for ie safari and firefahaha, jk, just search github for something promising and copy and paste things file by file. See, boss? No downloads! :downs:

(I've been a defense contractor, so I kinda get it, but jesus christ that's a stupid rule)

Doc Hawkins fucked around with this message at 04:03 on Feb 11, 2014

# ? Feb 11, 2014 03:53

Oh My Science: Dec 29, 2008

nwin posted:

How will I know if this is the case?

http://www.howto.gov/web-content/requirements-and-best-practices/checklist

Assuming you are in the US this is the complete list of requirements and best practices. I have never worked on a .gov project so I can't point at direct examples but I hear most often about accessibility / section 508 compliance. I think the most important part for forms is making it available to screen readers for the blind / vision impaired.

A quick google search found asp basic date picker. Might be a good place to start.

Oh My Science fucked around with this message at 04:25 on Feb 11, 2014

# ? Feb 11, 2014 04:20

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

stoops posted:

I'm trying to work with css3 filters on images, mainly hue-rotate.

Do these filters work on background images and divs? I can get the filters to work on standalone images, but not when I have a div with a background image.

They definitely work with background images, I've been using grayscale for a while on a number of display elements and just went and changed them to hue-rotate to check.

# ? Feb 11, 2014 04:47

Transmogrifier: Dec 10, 2004; Systems at max!; Lipstick Apathy

So today I received the news I've landed an internship, my second one, but this one I feel is going to be leagues ahead of my first. I'll have a chance to actually mess around in WordPress and they're going to be taking the opportunity to teach me about SEO. Any suggestions on what books to grab and/or websites to go to so I'm better prepared?

# ? Feb 12, 2014 17:37

ufarn: May 30, 2009

Have to use Drupal for a project, but don't have the time to read a book on it. What is non-awful resource for picking up the basics - for a simple blog-like site - in a short while?

Google doesn't show anything, and the hits are from a time where the United States hadn't had a black president.

# ? Feb 13, 2014 00:08

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 17:27

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

ufarn posted:

Have to use Drupal for a project, but don't have the time to read a book on it. What is non-awful resource for picking up the basics - for a simple blog-like site - in a short while?

Google doesn't show anything, and the hits are from a time where the United States hadn't had a black president.

Buckle up for a wild ride through a lovely ecosystem. I started there long ago and sometimes the only decent docs you could get were a poorly narrated screen cast. Plugins are terribly maintained aside from the mainstays as well.

I don't do Drupal anymore.

# ? Feb 13, 2014 04:01

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »