Kubuntu Website

Feature tour top link boxes are misaligned

Bug #987123 reported by Eric Erfanian
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Kubuntu Website
Fix Released
Low
Marco Parillo

Bug Description

I find the link boxes below the banner on the feature tour page to be consistently misaligned in Chrome or Firefox. These adjustments to the style.css work in Chrome, but I haven't had the time to think through what the best solution would be for Firefox, as well, as it does not appear to have the same effect.

ul#feature-tour-tabs li a {
 color: #494949;
 line-height: 45px;
 display: block;
 padding: 13px 15px;
 text-decoration: none;
 font-weight: bold;
 background-color: transparent;
 vertical-align: top;
}

Revision history for this message
Marco Parillo (marco-parillo) wrote :

Confirmed: Attaching a screenshot from rekonq.

Changed in kubuntu-website:
status: New → Confirmed
importance: Undecided → Low
Revision history for this message
Philip Muškovac (yofel) wrote :

Found a way to fix this in style.css
First in 'ul#feature-tour-tabs li a' set the padding to "12px 15px" and vertical-align to middle.
Then add a new rule:
ul#feature-tour-tabs li a img {
    vertical-align: middle;
}

That seems to work for firefox and chromium at least

Revision history for this message
Eric Erfanian (eric-erfanian) wrote :

I can confirm Philip's fix for Firefox and Chromium. Now someone just needs to do some copy/pasting.

ul#feature-tour-tabs li a {
 color: #494949;
 line-height: 15px;
 display: block;
- padding: 5px 15px;
+ padding: 12px 15px;
 text-decoration: none;
 font-weight: bold;
 background-color: transparent;
- vertical-align: top;
+ vertical-align: middle;
}

+ ul#feature-tour-tabs li a img {
+ vertical-align: middle;
+ }

Revision history for this message
Marco Parillo (marco-parillo) wrote :

I see where to make the change. Assigning myself.

Changed in kubuntu-website:
assignee: nobody → Marco Parillo (marco-parillo)
Revision history for this message
Marco Parillo (marco-parillo) wrote :

bzr diff
=== modified file 'style.css'
--- style.css 2010-06-29 17:01:10 +0000
+++ style.css 2012-08-30 19:27:21 +0000
@@ -1316,11 +1316,15 @@
        color: #494949;
        line-height: 15px;
        display: block;
- padding: 5px 15px;
+ padding: 12px 15px;
        text-decoration: none;
        font-weight: bold;
        background-color: transparent;
- vertical-align: top;
+ vertical-align: middle;
+}
+
+ul#feature-tour-tabs li a img {
+ vertical-align: middle;
 }

 #feature-tour-applications {

Changed in kubuntu-website:
status: Confirmed → In Progress
Revision history for this message
Marco Parillo (marco-parillo) wrote :

bzr commit
Committing to: /home/mparillo/Documents/release-1.0/
modified style.css
Committed revision 12.

bzr push lp:~kubuntu-website/kubuntu-website/kubuntu.org
Pushed up to revision 12.

Changed in kubuntu-website:
status: In Progress → Fix Committed
Revision history for this message
Marco Parillo (marco-parillo) wrote :

The fix actually made it worse (at least on rekonq).

Changed in kubuntu-website:
status: Fix Committed → Confirmed
Revision history for this message
Marco Parillo (marco-parillo) wrote :

[11:44] <yofel> I'm fixing the buttons, drupal seems to auto-translate \n to <br> -.-
[11:45] <yofel> saved, in the hope that Riddell wasn't editing it
[11:45] <yofel> MUCH better :D
[11:46] <yofel> hm, those cascaded screenshots in the tour items don't even look bad... even if that's unintentional
[11:46] <shadeslayer> yeah
[11:46] <shadeslayer> they look okay
[11:47] <yofel> drupal being innovative :P
[11:49] <Riddell> yofel: you fixed the Games..Graphics..etc image links?
[11:50] <yofel> Riddell: the category buttons, yeah
[11:50] <mparillo> yofel: Awesome, the titles on the tour boxes are vertically centered now in Rekonq. I will close the Launchpad bug.

Changed in kubuntu-website:
status: Confirmed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.
Subscribing...

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.