The Web Design & Development Megathread

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

Diabolik900: Mar 28, 2007

It still seems like yesterday that we were waiting to drop IE6 support, so the fact that we're now talking about whether or not to support IE8 makes me feel good.

Uziel posted:

At least we have Chrome Frame...

Oh yeah? http://blog.chromium.org/2013/06/retiring-chrome-frame.html

# ¿ Jul 11, 2013 18:34

Adbot: ADBOT LOVES YOU

# ¿ Apr 28, 2024 20:22

Diabolik900: Mar 28, 2007

Martytoof posted:

Hi guys,

I have a couple of questions. I haven't touched HTML or CSS in literally maybe six or seven years so this is all really overwhelming again. I'm trying to do a quick one-page thing and maybe I can run some questions by you guys:

http://cssdesk.com/RUcr6

The header image is just a placeholder, but the intended dimensions are correct. The goal is to line up the bar in the header image with the borders on the page, which my code has clumsily done.

The problem is, the browser reserves the full size of the header image even though I've repositioned it higher, so "text" appears halfway down the page instead of under the header. I'm not sure how to best achieve the effect I'm going for without manually repositioning the header image div, or without leaving a giant space under the header image div.

I'm sure there's just something about div positioning that I'm not understanding, but I'll be damned if I can find out what it is. Any suggestions?

The end result would be something like this:

I would take the header image out of the content div, like this:

code:

<div id="header_image">
      <img src="https://dl.dropboxusercontent.com/u/58959/Sites/temp/dummy_header.png" />
</div>
<div id="content">
        text
</div>

And then change the CSS to this:

code:

div#header_image {
  position:relative;
  margin-top: -159;
}

# ¿ Aug 11, 2013 00:30

Diabolik900: Mar 28, 2007

Just so you know, this:

code:


#links li a:hover, a:active {
	background-color: #B48BE8;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	padding: 1px;
}

Doesn't do what I suspect you think it does, even if it "works" for now. The "a:active" part will affect all active anchor tags, not just the ones inside you links list items. You need to do it like this:

code:


#links li a:hover, #links li a:active {
	background-color: #B48BE8;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	padding: 1px;
}

# ¿ Oct 23, 2013 13:13

Diabolik900: Mar 28, 2007

Rubies posted:

Any advice for working with this system?

Drink.

# ¿ Dec 13, 2013 18:20

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.

# ¿ Dec 13, 2013 18:30

Diabolik900: Mar 28, 2007

Chris! posted:

Does Safari handle media queries drastically differently from Chrome, Firefox and IE? I've just tested a site in the Safari desktop browser for the first time (having tested it on those other browsers, plus Safari on my iPhone), and it's ignoring my media queries.

Example media query that's being ignored (this is unminified as I'm working in Sass):

@media only all and (min-width: 79rem) and (max-width: 84rem) {
.navigation-left li
{
padding-right:2.8rem
}
.navigation-right li
{
padding-left:3rem
}

}

Viewport set with <meta name="viewport" content="width=device-width, initial-scale=1.0" />

The site works and responds perfectly in those other browsers... really annoying that it's not working in Safari, I just downloaded Safari 5.1.7 to test after my client reported the issue on his iPad.

I can't help too much with your specific issue, but I will point out that Safari for Windows has seemingly been abandoned. It hasn't been updated in years. It's not going to reliably give you an accurate representation of how Safari renders your site on OS X or iOS.

# ¿ Nov 4, 2014 14:05

Diabolik900: Mar 28, 2007

For pullquotes, I think <aside><blockquote></blockquote></aside> would actually be the semantically appropriate syntax since the quote isn't supposed to be part of the main flow of the content. I don't know what RSS readers actually do with <aside> tags though.

# ¿ Nov 17, 2014 17:51

Diabolik900: Mar 28, 2007

The file size stays the same.

# ¿ Dec 1, 2014 18:30

Diabolik900: Mar 28, 2007

Just add a print stylesheet and set display: none for everything you don't want to print.

If you need to bring up the print dialog through javascript, you just do window.print();.

# ¿ Jan 18, 2015 04:51

Diabolik900: Mar 28, 2007

A print stylesheet is just a separate CSS file (or a media query in your existing CSS file) that only affects the page when it's printed. There's no need to change any styles programmatically for this. Your use case sounds like it can be accomplished very easily.

Add a class called "printable" (or whatever) to the HTML elements you want to be printed.

Include "media" attributes in your css links like this:

code:


<link rel="stylesheet" href="filename1.css" media="print" />
<link rel="stylesheet" href="filename2.css" media="screen" />

Add this to your print CSS file:

code:


*:not(.printable) {
    display: none;
}

You can add more CSS as needed to get the layout how you want it, but this will accomplish what you're asking for.

# ¿ Jan 18, 2015 05:28

Diabolik900: Mar 28, 2007

Yeah, I was being a little over-ambitious in suggesting *:not(.printable). The .printable elements won't show up either, because their parents are set to display: none. You're going to have to get a little more specific in your print CSS.

# ¿ Jan 18, 2015 22:21

Diabolik900: Mar 28, 2007

Calidus posted:

When using date pickers is it generally best to just let the browsers do its own thing rather than implement jquery UI's datepicker? I have jquery's datepicker working nicely on desktops but it is a major pain in the rear end on mobile devices.

I'm not sure how everyone else feels, but I like to use the browser's date picker, but fall back to the JQueryUI one for browsers that don't have a date picker implemented.

# ¿ Mar 18, 2015 18:05

Diabolik900: Mar 28, 2007

Are you sure you linked to the right thing? Because I'm also definitely seeing an HTML file.

# ¿ Jan 17, 2016 23:16

Diabolik900: Mar 28, 2007

v1nce posted:

Aside from the great guide, I'm loving the idea of collapsing the introduction and terminology portions of the article, so you can just start reading about the tech. Ace.

I can't seem to expand the collapsed sections on mobile though.

# ¿ Mar 10, 2016 00:47

Diabolik900: Mar 28, 2007

caiman posted:

Hmm. What device and browser are you using?

iPhone 6s+ Safari.

# ¿ Mar 10, 2016 01:49

Adbot: ADBOT LOVES YOU

# ¿ Apr 28, 2024 20:22

Diabolik900: Mar 28, 2007

caiman posted:

Would you mind please checking it again? I've taken v1nce's suggestion.

Works now! Thanks.

# ¿ Mar 10, 2016 03:10

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