Change style of a frame using CSS

Question

I'm learning a bit of CSS from test and trial, and couldn't find a solution for this particular problem through web searches.

I help a person who's learning English, and she uses a lot of Google Translate on a small screen. I've been able to hide Google's toolbars and the annoying "Download Google Chrome" popup with the following (I'm using Stylish):

.jfk-butterBar.jfk-butterBar-info.jfk-butterBar-shown {
  display:none!important;
}

#gb {
  display:none!important;
}

#gt-appbar {
  display:none!important;
}

The problem is: they are hidden, but the translated website is left on a frame with a space that varies from 70px to 160px on the top. The corresponding piece of code I'm talking about is here:

<div id="contentframe" style="top: 70px; left: 0px;">

And this is the best I could come up with after searching, but doesn't work:

#contentframe {
  top: 0px;
}

Thank you!

Have you tried `#contentframe { top: 0 !important; }` on the last piece of css? inline styles have a higher specifity than ID declarations. — kleinfreund, Feb 06 '13 at 13:54
Yeah, that works! Turn it into an answer and I'll choose it as the best! — admirabilis, Feb 06 '13 at 13:56

score 2 · Accepted Answer · answered Feb 06 '13 at 14:00

2

You need to outweigh the specifity of the inline-style top: 70px; with the !important rule.

#contentframe {
    top: 0 !important;
}

answered Feb 06 '13 at 14:00

kleinfreund

6,546
4
30
60

Change style of a frame using CSS

1 Answers1