WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#16337 closed enhancement (invalid)

TwentyTen Theme: Container/Content Implementation

Reported by: sterlo Owned by:
Milestone: WordPress.org Priority: normal
Severity: normal Version: 3.1
Component: Themes Keywords: has-patch
Focuses: Cc:

Description

I was inspecting some elements inside the TwentyTen theme and noticed following CSS:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}

Is there a documented reason for using this method?

Is it not better to use the below code?

#container {
	float: left;
	width: 700px;
}
#content {
	margin: 0 20px;

}

I could not think of a UseCase where a 100% width and a negative margin would be appropriate.

Attachments (1)

16337.patch (817 bytes) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (17)

comment:1 sterlo3 years ago

  • Component changed from General to Themes
  • Version set to 3.1

comment:2 sterlo3 years ago

  • Keywords has-patch added

comment:3 sterlo3 years ago

Relevant

Author:

The CSS structure of the theme is a little different to what I am used to though. For example, the container class uses a width of 100% instead of a fixed width. It then determines the size of the main content area using a negative fixed width (e.g. margin: 0 -240px 0 0;). I have seen this before in stylesheets though previously most WordPress themes would use positive values. 

Commenter:

I like 2010 as well but one thing I don’t get is why the main container includes a huge negative margin to accomdate the sidebar instead of just nesting the sidebar within it.
This creates an issue where I’m trying to place a single pixel border around the container but the right border is not really at the edge of the content area so there is no border drawn.

Source: http://www.wpmods.com/my-first-impressions-of-the-twenty-ten-theme

comment:4 urbandev3 years ago

  • Cc urbandev added

comment:5 sterlo3 years ago

Using GitHub (via the WP mirror) - this has been around since its initial import:
https://github.com/dxw/wordpress/commit/b9f78dd91537f7497603ade027bcc09a871c6bda#diff-24

comment:6 urbandev3 years ago

Changing

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}

to

#container {
	float: left;
	width: 680px;
}
#content {
	margin: 0 20px;
}

Seems to look identical on

Apple Mac OS X 10.6 Intel
Firefox 3.6.13 
1229 x 625 (Viewport dimensions)

Before:

http://content.screencast.com/users/urbandev/folders/Jing/media/9f6cb917-ee8f-48a1-8df5-8086c6781d5b/00000052.png

After:

http://content.screencast.com/users/urbandev/folders/Jing/media/b4f026aa-e988-4058-b931-5ac67106265c/00000053.png

Currently testing in Safari and IE variants.

comment:7 dd323 years ago

What about RTL environments? Do they shift things around, Is it easier via the current method perhaps? (Just throwing an idea out there)

comment:8 sterlo3 years ago

If you look at:
https://github.com/grok/wordpress/blob/master/wp-content/themes/twentyten/rtl.css

#container {
float: right;
margin: 0 0 0 -240px;
}
#content {
margin: 0 20px 36px 280px;
}

That could probably just be:

#container {
  float: right;
}
#content {
  margin: 0 20px 36px 200px;
}

I don't understand the 36 pixels on the bottom...that seems to be inconsistent between Left to Right VS Right to Left?

comment:9 urbandev3 years ago

Last edited 3 years ago by urbandev (previous) (diff)

comment:10 ocean903 years ago

  • Keywords has-patch removed
  • Milestone changed from Awaiting Review to WordPress.org

There is no patch.

SergeyBiryukov3 years ago

comment:11 SergeyBiryukov3 years ago

  • Keywords has-patch added

There is now :)

comment:12 follow-up: WraithKenny3 years ago

I think the width:100% could've existed in Kubrick (maybe the origin, possibly earlier) but I don't know.

As for a UseCase, it looks like a partial attempt at liquid layout with a fixed side column... but ultimately useless unless the layout is, in fact, liquid. Probably borrowed from an earlier theme that had artifacts of liquid.

You could always just ask the designer...

But anyway, changing this now simply to use "better" code would probably screw any child theme that worked around this particular CSS to adjust the content width... Which, as it happens, could be several of my clients' themes ;-)

Recommending "wontfix" or "pleasedontfixmyclientswillkillme"

comment:13 in reply to: ↑ 12 ; follow-up: sterlo3 years ago

Replying to WraithKenny:

Recommending "wontfix" or "pleasedontfixmyclientswillkillme"

Keeping bad ideas because we built stuff using them doesn't make the ideas any better.

I think we should strive for perfection...small incremental steps towards such an idea.

If the idea is flawed...and could cause unexpected behavior - as it did for me and others - then maybe it should be fixed.

I will leave this up to the judgment of someone wiser and has a beard.

comment:14 in reply to: ↑ 13 ; follow-up: WraithKenny3 years ago

  • Resolution set to invalid
  • Status changed from new to closed

No, keeping existing behavior because it might break existing implementations doesn't make the original idea better, but the quality of the original idea is irrelevant. (In fact, there still may be a reason that this CSS is used; no one has asked the designer). But Breaking Existing Sites so that your job is easier is the worst kind of idea.

The easy "Fix" is to simply change the CSS in your own child-theme/mod. This is built in functionality and standard practice and one of the simplest tasks in Theme writing.

#container {
	float: left;
	width: 680px;
	margin: 0px;
}
#content {
	margin: 0 20px;
}

Add that to the child and it'll over-ride the offending code.

About my client example; I have no idea if I wrote CSS that would break if this was adjusted, but the possibility exists (I'd have to spend a lot of time examining several live sites before updating, as would countless others). It defeats the idea that you can update a parent theme without breaking your child theme, which did in fact happen when I updated Thematic (and it really sucked).

Since this is merely a "preferred style" of writing CSS and not in any way an actual bug, there's no actual bug to fix. Hopefully, if the author didn't have a legitimate reason (he may have) for this CSS, he'll use your suggested methods in his next theme, thereby "striving for perfection" in a responsible way.

P.S. I have a beard.

comment:15 in reply to: ↑ 14 sterlo3 years ago

Replying to WraithKenny:

No, keeping existing behavior because it might break> Since this is merely a "preferred style" of writing CSS and not in any way an actual bug, there's no actual bug to fix. Hopefully, if the author didn't have a legitimate reason (he may have) for this CSS, he'll use your suggested methods in his next theme, thereby "striving for perfection" in a responsible way.

P.S. I have a beard.

You win - oh bearded one!

comment:16 dd323 years ago

As someone else with a beard: We're now in TwentyEleven, Keep your eyes out for the 2011 theme and make your voice heard on the structure of that theme. Keep an eye on http://make.wordpress.org/ (Specifically the UI group) and Trac for when the new theme is incoming (I'm not sure when it's due, But it should be early this year)

Note: See TracTickets for help on using tickets.