r55333 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r55332‎ | r55333 | r55334 >
Date:18:19, 19 August 2009
Author:tparscal
Status:ok
Tags:
Comment:
Bug #20175 identifies some rendering artifacts which started popping up when we started messing with the font sizes of Vector at the body level. The problem is that Vector was originally designed with a fixed font size set at the body level, but using fixed font sizes like px and pt (which browsers like IE 5 - 7 don't scaled with user's prefs) - so changing it to something relative caused other issues like the tabs not lining up right and such. This patch switches the approach to using a 100% font size on everything except for the actual text in the UI, usually set at the a or span tag level (closest to text as possible). Everything in the #bodyContent and #siteNotice is also scaled at that level, so content can use relative sizes as usual without any change in behavior. This approach avoids strange rounding errors which each browser seems to handle differently, making the tabs look right - while also giving users of older IE browser control over their font sizes. Thus, this fixes #20175.
Modified paths:
  • /trunk/phase3/skins/vector/main-ltr.css (modified) (history)
  • /trunk/phase3/skins/vector/main-rtl.css (modified) (history)

Diff [purge]

Index: trunk/phase3/skins/vector/main-ltr.css
——@@ -21,7 +21,7 @@
2222 margin: 0;
2323 padding: 0;
2424 font-family: sans-serif;
25 - font-size: 13px;
 25+ font-size: 1em;
2626 }
2727 body {
2828 background-color: #f3f3f3;
——@@ -29,7 +29,7 @@
3030 }
3131 /* Content */
3232 #content {
33 - margin-left: 12em;
 33+ margin-left: 10em;
3434 padding: 1em;
3535 background-image: url(images/border.png);
3636 background-position: top left;
——@@ -38,16 +38,16 @@
3939 }
4040 /* Head */
4141 #page-base {
42 - height: 6em;
 42+ height: 5em;
4343 background-color: white;
4444 background-image: url(images/page-fade.png);
4545 background-position: bottom left;
4646 background-repeat: repeat-x;
4747 }
4848 #head-base {
49 - margin-top: -6em;
50 - margin-left: 12em;
51 - height: 6em;
 49+ margin-top: -5em;
 50+ margin-left: 10em;
 51+ height: 5em;
5252 background-image: url(images/border.png);
5353 background-position: bottom left;
5454 background-repeat: repeat-x;
——@@ -84,17 +84,17 @@
8585 #p-personal li {
8686 margin-left: 0.75em;
8787 margin-top: 0.5em;
88 - font-size: 0.9em;
 88+ font-size: 0.7em;
8989 }
9090 /* Navigation Containers */
9191 #left-navigation {
9292 position: absolute;
93 - left: 12em;
94 - top: 3em;
 93+ left: 10em;
 94+ top: 2.5em;
9595 }
9696 #right-navigation {
9797 float: right;
98 - margin-top: 3em;
 98+ margin-top: 2.5em;
9999 }
100100 /* Navigation Labels */
101101 div.vectorTabs h5,
——@@ -148,9 +148,9 @@
149149 /* OVERRIDDEN BY COMPLIANT BROWSERS */
150150 div.vectorTabs li a {
151151 display: inline-block;
152 - height: 3em;
153 - padding-left: 0.5em;
154 - padding-right: 0.5em;
 152+ height: 2.5em;
 153+ padding-left: 0.4em;
 154+ padding-right: 0.4em;
155155 background-image: url(images/tab-break.png);
156156 background-position: bottom right;
157157 background-repeat: no-repeat;
——@@ -160,6 +160,9 @@
161161 color: #0645ad;
162162 cursor: pointer;
163163 }
 164+ div.vectorTabs li a span {
 165+ font-size: 0.8em;
 166+ }
164167 /* IGNORED BY IE6 */
165168 div.vectorTabs li > a {
166169 display: block;
——@@ -208,7 +211,7 @@
209212 div.vectorMenu h5 a {
210213 display: inline-block;
211214 width: 24px;
212 - height: 3em;
 215+ height: 2.5em;
213216 text-decoration: none;
214217 background-image: url(images/tab-break.png);
215218 background-position: bottom right;
——@@ -256,7 +259,7 @@
257260 /* Fixes old versions of FireFox */
258261 div.vectorMenu ul,
259262 x:-moz-any-link {
260 - min-width: 6em;
 263+ min-width: 5em;
261264 }
262265 /* Returns things back to normal in modern versions of FireFox */
263266 div.vectorMenu ul,
——@@ -280,15 +283,13 @@
281284 div.vectorMenu li > a {
282285 display: block;
283286 }
284 - div.vectorMenu li a,
285 - div.vectorMenu li a span {
 287+ div.vectorMenu li a {
286288 color: #0645ad;
287289 cursor: pointer;
 290+ font-size: 0.8em;
288291 }
289292 div.vectorMenu li.selected a,
290 - div.vectorMenu li.selected a span,
291 - div.vectorMenu li.selected a:visited
292 - div.vectorMenu li.selected a:visited span {
 293+ div.vectorMenu li.selected a:visited {
293294 color: #333333;
294295 text-decoration: none;
295296 }
——@@ -323,7 +324,7 @@
324325 border-width: 0;
325326 padding: 0.25em;
326327 line-height: 1em;
327 - font-size: 0.9em;
 328+ font-size: 0.8em;
328329 width: 9em;
329330 background-color: transparent;
330331 }
——@@ -347,22 +348,23 @@
348349 /* Panel */
349350 #panel {
350351 position: absolute;
351 - top: 12em;
352 - width: 12em;
 352+ top: 160px;
 353+ padding-top: 1em;
 354+ width: 10em;
353355 left: 0;
354356 }
355357 #panel div.portal {
356 - padding-top: 1.5em;
 358+ padding-bottom: 1.5em;
357359 }
358360 #panel div.portal h5 {
359361 font-weight: normal;
360362 color: #444444;
361 - padding: 0.5em;
 363+ padding: 0.25em;
362364 padding-top: 0;
363 - padding-left: 1.25em;
 365+ padding-left: 1.75em;
364366 cursor: default;
365367 border: none;
366 - font-size: 0.9em;
 368+ font-size: 0.7em;
367369 }
368370 #panel div.portal div.body {
369371 margin: 0;
——@@ -385,7 +387,7 @@
386388 padding-bottom: 0.5em;
387389 margin: 0;
388390 overflow: hidden;
389 - font-size: 0.9em;
 391+ font-size: 0.7em;
390392 }
391393 #panel div.portal div.body ul li a {
392394 color: #0645ad;
——@@ -395,7 +397,7 @@
396398 }
397399 /* Footer */
398400 #footer {
399 - margin-left: 12em;
 401+ margin-left: 10em;
400402 margin-top: 0;
401403 padding: 0.75em;
402404 background-image: url(images/border.png);
——@@ -415,7 +417,7 @@
416418 padding-top: 0.5em;
417419 padding-bottom: 0.5em;
418420 color: #333333;
419 - font-size: 0.9em;
 421+ font-size: 0.7em;
420422 }
421423 #footer #footer-icons {
422424 float: right;
——@@ -439,17 +441,17 @@
440442 /* Logo */
441443 #p-logo {
442444 position: absolute;
443 - top: -12em;
 445+ top: -160px;
444446 left: 0;
445 - height: 12em;
446 - width: 12em;
 447+ width: 10em;
 448+ height: 160px;
447449 }
448450 #p-logo a {
449451 display: block;
450 - width: 12em;
451 - height: 12em;
 452+ width: 10em;
 453+ height: 160px;
452454 background-repeat: no-repeat;
453 - background-position: 50% 50%;
 455+ background-position: center center;
454456 text-decoration: none;
455457 }
456458
——@@ -559,6 +561,9 @@
560562 #content {
561563 line-height: 1.5em;
562564 }
 565+#bodyContent {
 566+ font-size: 0.8em;
 567+}
563568 /* Links */
564569 a {
565570 text-decoration: none;
——@@ -861,7 +866,7 @@
862867 /* Site Notice */
863868 #siteNotice {
864869 text-align: center;
865 - font-size: 95%;
 870+ font-size: 0.8em;
866871 margin: 0;
867872 }
868873 #siteNotice div,
——@@ -924,6 +929,7 @@
925930 padding-top: 0;
926931 margin-bottom: 0.1em;
927932 line-height: 1.2em;
 933+ font-size: 1.6em;
928934 padding-bottom: 0;
929935 }
930936 #content a.external,
Index: trunk/phase3/skins/vector/main-rtl.css
——@@ -21,7 +21,7 @@
2222 margin: 0;
2323 padding: 0;
2424 font-family: sans-serif;
25 - font-size: 13px;
 25+ font-size: 1em;
2626 }
2727 body {
2828 background-color: #f3f3f3;
——@@ -29,7 +29,7 @@
3030 }
3131 /* Content */
3232 #content {
33 - margin-right: 12em;
 33+ margin-right: 10em;
3434 padding: 1em;
3535 background-image: url(images/border.png);
3636 background-position: top right;
——@@ -38,16 +38,16 @@
3939 }
4040 /* Head */
4141 #page-base {
42 - height: 6em;
 42+ height: 5em;
4343 background-color: white;
4444 background-image: url(images/page-fade.png);
4545 background-position: bottom right;
4646 background-repeat: repeat-x;
4747 }
4848 #head-base {
49 - margin-top: -6em;
50 - margin-right: 12em;
51 - height: 6em;
 49+ margin-top: -5em;
 50+ margin-right: 10em;
 51+ height: 5em;
5252 background-image: url(images/border.png);
5353 background-position: bottom right;
5454 background-repeat: repeat-x;
——@@ -84,17 +84,17 @@
8585 #p-personal li {
8686 margin-right: 0.75em;
8787 margin-top: 0.5em;
88 - font-size: 0.9em;
 88+ font-size: 0.7em;
8989 }
9090 /* Navigation Containers */
9191 #left-navigation {
9292 position: absolute;
93 - right: 12em;
94 - top: 3em;
 93+ right: 10em;
 94+ top: 2.5em;
9595 }
9696 #right-navigation {
9797 float: left;
98 - margin-top: 3em;
 98+ margin-top: 2.5em;
9999 }
100100 /* Navigation Labels */
101101 div.vectorTabs h5,
——@@ -148,9 +148,9 @@
149149 /* OVERRIDDEN BY COMPLIANT BROWSERS */
150150 div.vectorTabs li a {
151151 display: inline-block;
152 - height: 3em;
153 - padding-right: 0.5em;
154 - padding-left: 0.5em;
 152+ height: 2.5em;
 153+ padding-right: 0.4em;
 154+ padding-left: 0.4em;
155155 background-image: url(images/tab-break.png);
156156 background-position: bottom left;
157157 background-repeat: no-repeat;
——@@ -160,6 +160,9 @@
161161 color: #0645ad;
162162 cursor: pointer;
163163 }
 164+ div.vectorTabs li a span {
 165+ font-size: 0.8em;
 166+ }
164167 /* IGNORED BY IE6 */
165168 div.vectorTabs li > a {
166169 display: block;
——@@ -208,7 +211,7 @@
209212 div.vectorMenu h5 a {
210213 display: inline-block;
211214 width: 24px;
212 - height: 3em;
 215+ height: 2.5em;
213216 text-decoration: none;
214217 background-image: url(images/tab-break.png);
215218 background-position: bottom left;
——@@ -256,7 +259,7 @@
257260 /* Fixes old versions of FireFox */
258261 div.vectorMenu ul,
259262 x:-moz-any-link {
260 - min-width: 6em;
 263+ min-width: 5em;
261264 }
262265 /* Returns things back to normal in modern versions of FireFox */
263266 div.vectorMenu ul,
——@@ -280,15 +283,13 @@
281284 div.vectorMenu li > a {
282285 display: block;
283286 }
284 - div.vectorMenu li a,
285 - div.vectorMenu li a span {
 287+ div.vectorMenu li a {
286288 color: #0645ad;
287289 cursor: pointer;
 290+ font-size: 0.8em;
288291 }
289292 div.vectorMenu li.selected a,
290 - div.vectorMenu li.selected a span,
291 - div.vectorMenu li.selected a:visited
292 - div.vectorMenu li.selected a:visited span {
 293+ div.vectorMenu li.selected a:visited {
293294 color: #333333;
294295 text-decoration: none;
295296 }
——@@ -323,7 +324,7 @@
324325 border-width: 0;
325326 padding: 0.25em;
326327 line-height: 1em;
327 - font-size: 0.9em;
 328+ font-size: 0.8em;
328329 width: 9em;
329330 background-color: transparent;
330331 }
——@@ -347,22 +348,23 @@
348349 /* Panel */
349350 #panel {
350351 position: absolute;
351 - top: 12em;
352 - width: 12em;
 352+ top: 160px;
 353+ padding-top: 1em;
 354+ width: 10em;
353355 right: 0;
354356 }
355357 #panel div.portal {
356 - padding-top: 1.5em;
 358+ padding-bottom: 1.5em;
357359 }
358360 #panel div.portal h5 {
359361 font-weight: normal;
360362 color: #444444;
361 - padding: 0.5em;
 363+ padding: 0.25em;
362364 padding-top: 0;
363 - padding-right: 1.25em;
 365+ padding-right: 1.75em;
364366 cursor: default;
365367 border: none;
366 - font-size: 0.9em;
 368+ font-size: 0.7em;
367369 }
368370 #panel div.portal div.body {
369371 margin: 0;
——@@ -385,7 +387,7 @@
386388 padding-bottom: 0.5em;
387389 margin: 0;
388390 overflow: hidden;
389 - font-size: 0.9em;
 391+ font-size: 0.7em;
390392 }
391393 #panel div.portal div.body ul li a {
392394 color: #0645ad;
——@@ -395,7 +397,7 @@
396398 }
397399 /* Footer */
398400 #footer {
399 - margin-right: 12em;
 401+ margin-right: 10em;
400402 margin-top: 0;
401403 padding: 0.75em;
402404 background-image: url(images/border.png);
——@@ -415,7 +417,7 @@
416418 padding-top: 0.5em;
417419 padding-bottom: 0.5em;
418420 color: #333333;
419 - font-size: 0.9em;
 421+ font-size: 0.7em;
420422 }
421423 #footer #footer-icons {
422424 float: left;
——@@ -439,17 +441,17 @@
440442 /* Logo */
441443 #p-logo {
442444 position: absolute;
443 - top: -12em;
 445+ top: -160px;
444446 right: 0;
445 - height: 12em;
446 - width: 12em;
 447+ width: 10em;
 448+ height: 160px;
447449 }
448450 #p-logo a {
449451 display: block;
450 - width: 12em;
451 - height: 12em;
 452+ width: 10em;
 453+ height: 160px;
452454 background-repeat: no-repeat;
453 - background-position: 50% 50%;
 455+ background-position: center center;
454456 text-decoration: none;
455457 }
456458
——@@ -559,6 +561,9 @@
560562 #content {
561563 line-height: 1.5em;
562564 }
 565+#bodyContent {
 566+ font-size: 0.8em;
 567+}
563568 /* Links */
564569 a {
565570 text-decoration: none;
——@@ -861,7 +866,7 @@
862867 /* Site Notice */
863868 #siteNotice {
864869 text-align: center;
865 - font-size: 95%;
 870+ font-size: 0.8em;
866871 margin: 0;
867872 }
868873 #siteNotice div,
——@@ -924,6 +929,7 @@
925930 padding-top: 0;
926931 margin-bottom: 0.1em;
927932 line-height: 1.2em;
 933+ font-size: 1.6em;
928934 padding-bottom: 0;
929935 }
930936 #content a.external,

Follow-up revisions

RevisionCommit summaryAuthorDate
r55336Incrimented $wgStyleVersion to refelct the changes in r55333.tparscal18:34, 19 August 2009
r55676Added font size for simple search label - this broke cause of the other font ...tparscal23:34, 29 August 2009

Past revisions this follows-up on

RevisionCommit summaryAuthorDate
r54806When the text size is set in the body in EM, it affects all other em measurem...tparscal19:22, 11 August 2009
r54820Vector fixes from trunk:...brion22:40, 11 August 2009

Status & tagging log