Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
kedo
Nov 27, 2007

me your dad posted:

loving Outlook.

Does anyone know how I might fix that?

code:
 <p>
<font color="635D9D" style="font-size:16px; font-weight:bold; letter-spacing:normal; 
margin-top:0;margin-right:0;margin-bottom:15px !important;margin-left:0;text-align:left;">
This text should be a shade of purple</font><br />

...more stuff... and then </p>
Welcome back to 90's web development where <font> is still a thing! You might be able to find some crafty CSS workaround, but sadly that old, piece of crap tag still has the widest support in my experience.

Your problem is especially weird because Outlook 2013 supports CSS color, so who knows. Treat Outlook like the idiot program it is and feed it ancient code.

God I loath html emails.

Adbot
ADBOT LOVES YOU

me your dad
Jul 25, 2006

kedo posted:

code:
 <p>
<font color="635D9D" style="font-size:16px; font-weight:bold; letter-spacing:normal; 
margin-top:0;margin-right:0;margin-bottom:15px !important;margin-left:0;text-align:left;">
This text should be a shade of purple</font><br />

...more stuff... and then </p>
Welcome back to 90's web development where <font> is still a thing! You might be able to find some crafty CSS workaround, but sadly that old, piece of crap tag still has the widest support in my experience.

Your problem is especially weird because Outlook 2013 supports CSS color, so who knows. Treat Outlook like the idiot program it is and feed it ancient code.

God I loath html emails.

Thanks - the <font> tag worked beautifully. I'm taking over this stuff from a designer who uses heavy CSS in emails, causing all sorts of problems.

I've got to keep in mind to de-modernize things as I go along.

pipes!
Jul 10, 2001
Nap Ghost
Dunno how immediately helpful they'll be, but here are a few links that I found pretty useful back when I was in the HTML email game:

http://www.campaignmonitor.com/css/
http://www.emailology.org/
http://htmlemailboilerplate.com/

Good luck and godspeed.

jackpot
Aug 31, 2004

First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

Sudden Infant Def Syndrome posted:

Good luck with Outlook and HTML.
Seriously, gently caress Outlook. gently caress Outlook, and gently caress graphic emails. They're just the worst.

A MIRACLE
Sep 17, 2007

All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Try a font tag lol

e also see the boilerplate link a few posts up

kedo
Nov 27, 2007

A MIRACLE posted:

Try a font tag lol

What a world.

I honestly don't really get why email clients render CSS so terribly. The sad truth is that after Outlook, Gmail is probably the worst offender when it comes to incredibly basic styles they just straight up don't support. I can't understand why. I mean, come one, let me position poo poo. Or set a background even.

Also forget graphic emails entirely. These days I just tell people we'll customize a MailChimp template because it's just not worth the hassle.

kedo fucked around with this message at 03:01 on Dec 7, 2013

enthe0s
Oct 24, 2010

In another few hours, the sun will rise!
This is a really cool framework for HTML emails that was released fairly recently, maybe it will be helpful as well. Disclaimer: I haven't personally used it.

http://zurb.com/ink/

Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India
I have a simple question regarding layout.

Basically this layout looks ok on normal level of zoom in a browser and if I zoom in (ignore the lack of bottom margin):

http://jsfiddle.net/x5cWh/1/

However, it breaks when I zoom out (even happens in jfiddles screen). Now I'm a beginner so I could be missing something simple, but I'd really like to know why it happens so any help would be appreciated.

kedo
Nov 27, 2007

Gmaz posted:

I have a simple question regarding layout.

Basically this layout looks ok on normal level of zoom in a browser and if I zoom in (ignore the lack of bottom margin):

http://jsfiddle.net/x5cWh/1/

However, it breaks when I zoom out (even happens in jfiddles screen). Now I'm a beginner so I could be missing something simple, but I'd really like to know why it happens so any help would be appreciated.

Because you're using fixed widths. Often when browsers resize stuff with fixed widths things start to get hosed up. Try percentages? Super quick example: http://jsfiddle.net/x5cWh/6/ The dimensions are a little off because I was lazy, but you'll get the point.

Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India
Yeah I tried percentages before but it still broke for some reason.

Anyway I've found a solution, though probably hacky. I removed the float from the right element and put a right margin that's the size of the first element, it seems to not break then. It helps in this case, but it's probably not useful when there are a bunch of elements inside a container.

Fayez Butts
Aug 24, 2006

Hey guys, I've got a little question about links and hovers.

So, I'm trying to make a link that only underlines in certain places and is consistent wherever you hover over it.

This is how I want it to look: (The whole horizontal width of the element works as a link, but only the named text gets underlined)




And it actually works, but only if you hover over the dotted line. When you hover anywhere else, it reverts back to what you'd expect:



This is what my html code for each line looks like at the moment:

code:
<a href="http://www.behance.net/fayezbutts">Behance
	<span class="noUnderline">.....</span>
	<img class="socialImg" src="img/behance.svg">
</a><br>
and css:

code:
.largeText a {
	font-weight: 900;
	text-decoration: none;
	color: #281603;
}

.largeText a:hover {
	border-bottom: 2px solid #eea04d;
}

.largeText a .noUnderline {
	font-weight: 300;
}

.largeText a .noUnderline:hover {
	border-bottom: 2px solid #e67700;
}
Does anyone have a way to fix this that both works and isn't quite so terrible as my hacky way that doesn't even work? Thanks

kedo
Nov 27, 2007

Fayez Butts posted:

Does anyone have a way to fix this that both works and isn't quite so terrible as my hacky way that doesn't even work? Thanks

You're reversing it. You want to put your span around the word, not the dots, and you don't want to put the :hover pseudo selector on the span, but rather the entire anchor tag.

code:
<a href="http://www.behance.net/fayezbutts">
   <span class="underline">Behance</span>
   .....
   <img class="socialImg" src="img/behance.svg">
</a>


.largeText a:hover .underline {
	border-bottom: 2px solid #eea04d;
}

kedo fucked around with this message at 21:19 on Dec 10, 2013

Fayez Butts
Aug 24, 2006

I'm a dummy and should have figured that out myself. Thanks!

Cicero
Dec 17, 2003

Jumpjet, melta, jumpjet. Repeat for ten minutes or until victory is assured.
Ok, so I have on-site interviews with Facebook in a few weeks. It's for an Android development position (and I'm an Android developer) but I'm told one interview will be about web design. Not like, UX design, but stuff like web development patterns, technology stacks, databases, distributed systems, how to scale, etc. My knowledge of these areas is extremely limited, are there any good resources for this kind of thing where I can learn the basics in a hurry?

kedo
Nov 27, 2007

Anyone know if there's a way to selectively disable Chrome's translation for certain languages? I found this which disables it entirely, but that's not exactly what I'm looking for.

Situation: menu page for a Mexican restaurant website keeps triggering the bar because half their items have Spanish names. :doh: I don't want to disable translation entirely because that's an inelegant solution for users who might actually need the page translated to another language.


e: Think I answered my own question by reading the drat documentation. :doh: again

quote:

If you don't mind your web page being translated by Google Translate, except for a particular section (like an email address, for example), just add class=notranslate to any HTML element to prevent that element from being translated. For example:

Email us at <span class="notranslate"> sales at example dot com

kedo fucked around with this message at 17:05 on Dec 12, 2013

glompix
Jan 19, 2004

propane grill-pilled

Cicero posted:

Ok, so I have on-site interviews with Facebook in a few weeks. It's for an Android development position (and I'm an Android developer) but I'm told one interview will be about web design. Not like, UX design, but stuff like web development patterns, technology stacks, databases, distributed systems, how to scale, etc. My knowledge of these areas is extremely limited, are there any good resources for this kind of thing where I can learn the basics in a hurry?

Check out this site called High Scalability. Read up on eventual consistency for sure. I'm not sure what they'd ask about stacks (maybe just be familiar with something like Node, MVC frameworks. Cache - both on the front-end and backend - would certainly come up. Maybe know something about key-value stores (Redis, Memcached) and how you'd use that to reduce load while maintaining some consistency. CDNs might make sense to review.

Hope that helps, not sure what your comfort level is. Good luck!

Rubies
Dec 30, 2005

Live Forever
Die Every Day

:h: :s: :d: :c:
Does anyone have any experience working with MS sharepoint? I have to do something for work and it needs to be a "sharepoint portal" for a specific work group. I'm great at html/css but over the years I've developed my own methods for things that work and I'm wondering how much I can dick around in my normal environment but make it work with their system. I've done a quick search for custom SP blah blah but im just seeing the same blocky frames in all the examples that pop up. Any advice for working with this system? How much can i make it appear like a normal page as if built from scratch?

Diabolik900
Mar 28, 2007

Rubies posted:

Any advice for working with this system?

Drink.

Diabolik900
Mar 28, 2007

To be a little more helpful, I've had to deal with Sharepoint a lot in my job. Will you actually be editing the page templates, or just customizing the CSS? If it's the former, you'll obviously have a lot more flexibility. If it's the latter, you can still do a lot to make it look "un-Sharepoint-y" (a common request), but it it takes a lot of work and a lot of frustration. The majority of my Sharepoint work was in the Sharepoint 2007/IE6-7/CSS2 days though so it might have gotten a bit easier now.

EAT THE EGGS RICOLA
May 29, 2008

I'm going to build a site for a professional services firm. I've built lots of sites before, but never with a CMS to be operated by someone else after setup.

It needs the following:

1) Individual professional profiles/biographies.
2) Multiple languages (at least 2 but preferably 4-5) because most of our big clients do not speak English.
3) A blog, to be updated by multiple people.
4) The usual "what we do" "about us" "hey look our clients think we're awesome" "lookat dis poo poo" static page stuff.

I was thinking of using Drupal or Wordpress to do this, but I'd like a site that "doesn't look like wordpress" and that is easy to change/theme. Is doing this in wp just a matter of making sure that the theme I design or use is perfect? Is there a CMS that I should take a look at?

kedo
Nov 27, 2007

EAT THE EGGS RICOLA posted:

I was thinking of using Drupal or Wordpress to do this, but I'd like a site that "doesn't look like wordpress" and that is easy to change/theme. Is doing this in wp just a matter of making sure that the theme I design or use is perfect? Is there a CMS that I should take a look at?

Usually when clients say they don't want a site that "looks like WordPress" they mean "looks like the default WordPress theme." Just design/find a different theme that meets your needs. If you're not up for designing one yourself there are approximately eighty five billion themes at WooThemes.

For your second question, Drupal and WordPress are the two biggest and debatably best CMSs on the market at the moment because they're A) free and open source, and B) have very strong communities churning out a lot of great plugins and to whom you can turn if you need support. You can look into different CMSs if you want, but really I don't know why you would unless the client asked you to or unless you just wanted to.


e: And for your numbered points:

1) Those are just going to be simple pages, maybe with a custom page template if you want to be fancy
2) There are existing plugins for both WP and Drupal to support this
3) This is core functionality for both WP and Drupal
4) Again, these are just pages.

Oh My Science
Dec 29, 2008

EAT THE EGGS RICOLA posted:

I'm going to build a site for a professional services firm. I've built lots of sites before, but never with a CMS to be operated by someone else after setup.

As much as I hate Wordpress it's your best option. With the new 3.8 update the backend is pretty nice now and Kedo brought up some very good points.

If anything i18n (internationalization) will be your biggest hurdle regardless of framework or CMS. Wordpress seems to have several plugins available, I would recommend looking at your options for this specific feature and then choosing a framework.

EAT THE EGGS RICOLA
May 29, 2008

Awesome. That's what I figured I was going to hear, but it's great to have someone confirm that I wasn't missing something super obvious.

Thanks!

Tatsuta Age
Apr 21, 2005

so good at being in trouble


I posted this in the wrong thread in SH/SC, and strwrsxprt suggested I post this here instead:

My work wants to get an iPad for testing how our sites look when viewed through various browsers, and we don't have a native Safari device here. We can virtualize a copy of OSX for testing the desktop version, but we're having trouble deciding what to do for the iPads.

Is there a way to make a new iPad or iPad mini display in the same version an older iPad would? Obviously there wouldn't be a pixel-perfect representation, but they'd want to test various versions of Safari, and different resolutions. Doesn't make a lot of financial sense to buy various iPad models just for testing in our case, and if they can only get the latest stuff tested, that's the direction it will have to go. I was just wondering if anyone know of ways to test "older" resolutions and versions of Safari on newer hardware.

Oh My Science
Dec 29, 2008
Can the virtualized OS X run Xcode? Xcode has a built in iPhone / iPad simulator which goes back a few iOS version numbers.

Mr SuperAwesome
Apr 6, 2011

im from the bad post police, and i'm afraid i have bad news
does anyone know of a tool that will convert multiple CSS files for a webpage into a single file? (ideally based on the elements in use.)

basically, I'm using bootstrap to style stuff, and I'd like to rip out the CSS for each element that I've used, so i can stick it into a single CSS file and pretend I haven't used bootstrap

also web based or windows would be helpful; my macbook is out of action due to water damage :negative: :laffo:

Oh My Science
Dec 29, 2008

Mr SuperAwesome posted:

does anyone know of a tool that will convert multiple CSS files for a webpage into a single file? (ideally based on the elements in use.)

http://gruntjs.com

It even has a few extensions that claim to remove unused CSS.

A better way to do that, specifically for bootstrap, would be to use the LESS version and simply comment out unused components.

cbirdsong
Sep 8, 2004

Commodore of the Apocalypso
Lipstick Apathy

Tatsuta Age posted:

I posted this in the wrong thread in SH/SC, and strwrsxprt suggested I post this here instead:

My work wants to get an iPad for testing how our sites look when viewed through various browsers, and we don't have a native Safari device here. We can virtualize a copy of OSX for testing the desktop version, but we're having trouble deciding what to do for the iPads.

Is there a way to make a new iPad or iPad mini display in the same version an older iPad would? Obviously there wouldn't be a pixel-perfect representation, but they'd want to test various versions of Safari, and different resolutions. Doesn't make a lot of financial sense to buy various iPad models just for testing in our case, and if they can only get the latest stuff tested, that's the direction it will have to go. I was just wondering if anyone know of ways to test "older" resolutions and versions of Safari on newer hardware.

You can run the Xcode-supplied iOS Simulator for the iPad, as mentioned, but there are basically two iPad resolutions, 1024x768 and that doubled (2048x1536). Safari presents the exact same number of pixels for both of them, so you really only have to worry about a single iPad-specific resolution. (though you have to consider both portrait and landscape mode)

substitute
Aug 30, 2003

you for my mum

EAT THE EGGS RICOLA posted:

I'm going to build a site for a professional services firm. I've built lots of sites before, but never with a CMS to be operated by someone else after setup.

It needs the following:

1) Individual professional profiles/biographies.
2) Multiple languages (at least 2 but preferably 4-5) because most of our big clients do not speak English.
3) A blog, to be updated by multiple people.
4) The usual "what we do" "about us" "hey look our clients think we're awesome" "lookat dis poo poo" static page stuff.

I was thinking of using Drupal or Wordpress to do this, but I'd like a site that "doesn't look like wordpress" and that is easy to change/theme. Is doing this in wp just a matter of making sure that the theme I design or use is perfect? Is there a CMS that I should take a look at?

Drupal sucks, way more than Wordpress. So use Wordpress for this situation. And just find a decent free or pay theme that doesn't require any weird changes to the template code. Use this for multi-language: http://polylang.wordpress.com/

Other plugins that you may like:

http://themehybrid.com/plugins/widgets-reloaded

http://johnlamansky.com/wordpress/plugins/tweaks/

http://www.romantika.name/v2/wordpress-plugin-collapsible-archive-widget/

http://www.im-web-gefunden.de/wordpress-plugins/role-manager/

Cicero
Dec 17, 2003

Jumpjet, melta, jumpjet. Repeat for ten minutes or until victory is assured.

glompix posted:

Check out this site called High Scalability. Read up on eventual consistency for sure. I'm not sure what they'd ask about stacks (maybe just be familiar with something like Node, MVC frameworks. Cache - both on the front-end and backend - would certainly come up. Maybe know something about key-value stores (Redis, Memcached) and how you'd use that to reduce load while maintaining some consistency. CDNs might make sense to review.

Hope that helps, not sure what your comfort level is. Good luck!
Cool, thanks for the tips!

Mrs. Wynand
Nov 23, 2002

DLT 4EVA
This is a public service announcement: If you ever have the pleasure of working with CSS transition animations, go look up "css transition animation batching redraw", and save yourself 8 loving hours of heisenbug hunting. The usual JS guarantees about everything happening in strict execution order do not apply and you can end up with some really weird poo poo like animating property changes that happened before you turned on animation transitions, or certain transitions outright disappearing from under you, unless you look at them carefully.

pipebomb
May 12, 2001

Dear God, what is it like in your funny little brains?
It must be so boring.
A new gig I have uses a print designer to do their mockups,then the devs replicate it based on a PSD. This results in poo poo. I am trying to make the guy a list of what to do/not to do. Help?

* Use only websafe fonts - http://www.w3schools.com/cssref/css_websafe_fonts.asp
* or Google fonts - http://www.google.com/fonts
* Each font needs a familial fallback - sans/serif, monospace, etc. - no single font choices

* H1/H2/H3/P need to be distinctive, proportionate and scalable
* Blockquotes - stylized, indented
* Avoid beveling elements
* Lean toward contrast as opposed to borders
* Avoid textured elements
* Avoid images where color, shading, translucency can be used
* Avoid drop-shadow on text, lean toward contrast, weight
* Consistent padding between elements - makes responsive design more achievable

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.
Tell the print designer to mockup in InDesign for starters? And tell him to make use of liquid layout while he's designing the mockups? Rest of it seems to mainly be giving him specific boundaries, but using InDesign at least forces him to decide styles from the get-go, and apply global changes to those styles superquick, and liquid layout will give him an overview of how it may look as the screen is resized (allegedly in an HTML-compliant manner, but whatever). Ugh, PS is a loving awful program for designing modern websites.

EDIT: if it's CC he's got, the Edge Web Fonts will allow him to use GWF within whatever program.

Just be specific and give the guy reasons for the specificity, then you can shout at him if he ignores the specs; you're going to know what you want more than anyone else here. Sympathies, anyway

RobertKerans fucked around with this message at 19:10 on Dec 15, 2013

pipebomb
May 12, 2001

Dear God, what is it like in your funny little brains?
It must be so boring.
Good points, thank you.

supermikhail
Nov 17, 2012


"It's video games, Scully."
Video games?"
"He enlists the help of strangers to make his perfect video game. When he gets bored of an idea, he murders them and moves on to the next, learning nothing in the process."
"Hmm... interesting."
Can someone help and explain the right way to do things to a newbie?

This is what I have:



All the relevant divs outlined, and there's not much there beyond that. The #data doesn't want to expand beyond "search" in width (goes to a new line instead), even though that one is concealed in a div. I guess I still don't understand DOM relationships, or something. I feel like maybe I should wrap the "body" of the page into a div, too, but it's probably missing the point.

Cthulhuite
Mar 22, 2007

Shwmae!
So i've got an annoying problem with my site. I've got divs inside a wrapper, which is 1280px wide. If content in the div extends below the page, you get a vertical scroll bar on the wrapper. I expect this, that's fine. What's irritating is that the vertical scroll bars causes a horizontal scroll bar to appear as well, it extends the wrapper those extra 20px or whatever to accommodate the scrollbar.

I've tried using overflow: hidden in various ways, but either I lose the horizontal scroll all together or i'm stuck with it. Anyone got some nifty tricks or tips for scroll bars, or just extending divs in general?

kedo
Nov 27, 2007

supermikhail posted:

Can someone help and explain the right way to do things to a newbie?

This is what I have:



All the relevant divs outlined, and there's not much there beyond that. The #data doesn't want to expand beyond "search" in width (goes to a new line instead), even though that one is concealed in a div. I guess I still don't understand DOM relationships, or something. I feel like maybe I should wrap the "body" of the page into a div, too, but it's probably missing the point.

Post some code. I'd guess your problem is floats, but honestly it's impossible to tell what the problem is from a screenshot. But to address your last point, using a wrapper div around the entire structure of a site is not at all uncommon.


Cthulhuite posted:

So i've got an annoying problem with my site. I've got divs inside a wrapper, which is 1280px wide. If content in the div extends below the page, you get a vertical scroll bar on the wrapper. I expect this, that's fine. What's irritating is that the vertical scroll bars causes a horizontal scroll bar to appear as well, it extends the wrapper those extra 20px or whatever to accommodate the scrollbar.

I've tried using overflow: hidden in various ways, but either I lose the horizontal scroll all together or i'm stuck with it. Anyone got some nifty tricks or tips for scroll bars, or just extending divs in general?

overflow-x: hidden perhaps? Are you setting an explicit height on the scrolling div, and if so why not just remove it and use the viewport's scrollbar?

Also jesus people:

supermikhail
Nov 17, 2012


"It's video games, Scully."
Video games?"
"He enlists the help of strangers to make his perfect video game. When he gets bored of an idea, he murders them and moves on to the next, learning nothing in the process."
"Hmm... interesting."

kedo posted:

Also jesus people:



code:
<div id="header">
<div class="space"></div>
<input id="search" type="search" title = "search" value = "search">
</div>

<div id="left-bar">

<div id="slider-area">
<div id="slider">&gt</div>
</div>

<div id="scale">
<p>10</p>
<p>9</p>
<p>8</p>
<p>7</p>
<p>6</p>
<p>5</p>
<p>4</p>
<p>3</p>
<p>2</p>
<p>1</p>
<p>0</p>
</div>

</div>


<div id="data">
<div class="entry">some test text</div>
</div>
code:
#header{
display: block;
width: 700px;	
border: 2px solid white;
}

#search {
	width: 200px;
	display: inline-block;
	float: right;
}

#scale{
	text-align: right;
	width: 20px;
	color: #0000FF;
	display: inline-block;
	background-color: #D1E8FF;
	border-radius: 5px;
	box-shadow: 2px 2px 5px #888888;	
	padding-right: 0.1cm;
	cursor: pointer;
}

.space{
	display: inline-block;
}

#data{
	display: inline-block;	
	border: 2px solid white;
	vertical-align: top;	
	width: 400px;
	height: 405px;
}

.entry{
	background-color: #F5FAFF;
	display: inline-block;
	border: 2px solid white;
	border-radius: 20px;
	box-shadow: 2px 2px 5px #888888;
	padding:0.1cm;
}

#slider{
	background-color: #F5FFFF;
	width: 20px;
	display: inline-block;
	border-radius: 5px;
	cursor: pointer;	
	text-align: center;
	margin-top: 15px;
	margin-bottom: 20px;
}
	
#slider-area{
	display:inline-block;	
	height: 405px;
	/*border: 2px solid white;*/
	vertical-align: top;
}

#left-bar{
	display:inline-block;
	/*border: 2px solid white;*/
}
Now everyone can see me naked. On that note, is there any point to using the input type "search"?

Oh My Science
Dec 29, 2008

supermikhail posted:

Now everyone can see me naked. On that note, is there any point to using the input type "search"?

Post it on jsfiddle or codepen. We can then modify the file and you can see exactly how to fix it.

Scroll bars within divs are a really, really bad idea from a UX standpoint.

Adbot
ADBOT LOVES YOU

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

supermikhail posted:


On that note, is there any point to using the input type "search"?

Sort answer: Yes.

Long answer: Yes; in good browsers, you get additional built-in functionality like remembering previous terms, a clear button, etc.

Also, read this then look at your CSS. Pull common stuff into classes.

Lumpy fucked around with this message at 22:18 on Dec 16, 2013

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply