SASS Invalid CSS Error: Not Closing Last Style Rule - sass
I'm new to SASS and converted a CSS file just to get a base start for my new website. I used this Sublime package, CSS To SASS And Stylus Convert, to convert the CSS to start: https://packagecontrol.io/packages/CSS%20To%20SASS%20And%20Stylus%20Converter
After converting the old CSS to SASS, I fixed most of the issues after converting. But, I continue to get the following error on the last line couple of lines of code:
Error: Invalid CSS after "...ottom: 1.3em; }": expected "}", was ""
I'm unsure of why this error is occurring, looking on different questions or other forums with no solution. Also, I tried changing the filetype to .scss with a different error in the syntax occurring.
Could someone help me figure out why the error is occurring and how to correct this?
Below is the SASS I'm currently trying to run. Any help is greatly appreciated!
html, body
font-family: 'Source Sans Pro', Helvetica, Arial, serif
font-size: 1em
font-weight: 400
line-height: 1.45em
header ul, .mobileMenu
line-height: 6em
margin: 0
padding: 0
.white
#content
padding-top: 120px
header
background-color: #FFF
border-bottom: 1px solid #BBBDBF
#circle
fill: #6095BF
#name
display: none
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter.png')
a[href*="linkedin"]
background-image: url('../images/linkedin.png')
a[href*="pinterest"]
background-image: url('../images/pinterest.png')
#symbol
fill: #F1F1F2
a
color: #6094BE
&.active
color: #000
.mobileMenu
display: inline-block
line-height: 5.65em
position: absolute
right: 20px
h1, h2, h3, h4
font-family: "Ashbury Light"
line-height: 1.2em
margin: 1.414em 0 0.5em
footer
background-color: #6094BE
color: #FFF
padding: 25px 20px 50px 120px
padding: 25px 20px
div
display: inline-block
width: 33%
width: 36%
a
color: #FFF
#pgImg
background-color: #6094BE
color: #FFF
height: 465px
position: relative
h1
left: 120px
position: absolute
top: 250px
left: 0
nav
width: initial
border-bottom: 1px solid #BBBDBF
display: none
margin-right: 0
&.active
display: block
position: static
width: 100%
li
border-top: 1px solid #BBBDBF
display: block
line-height: 3em
text-align: center
a
margin-right: 15px
display: list-item
margin: 0
nav, .socialLinks
display: inline-block
float: right
position: relative
small
font-size: 0.75em
#font-face
font-family: 'Ashbury Light'
src: url('../fonts/2D395B_0_0.eot')
src: url('../fonts/2D395B_0_0.eot?#iefix') format('embedded-opentype'),
url('../fonts/2D395B_0_0.woff') format('woff'),
url('../fonts/2D395B_0_0.ttf') format('truetype')
font-style: normal
font-weight: normal
font-family: 'Source Sans Pro'
src: url('../fonts/SourceSansPro-Regular.eot')
src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansPro-Regular.woff') format('woff'),
url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
url('../fonts/SourceSansPro-Regular.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg')
font-style: normal
font-weight: 400
font-family: 'Source Sans Pro Bold'
src: url('../fonts/SourceSansPro-Bold.eot')
src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansPro-Bold.woff') format('woff'),
url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
url('../fonts/SourceSansPro-Bold.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg')
font-style: normal
font-weight: 700
.socialLinks
margin-right: 20px
display: none
li
a
background-position: center
background-repeat: no-repeat
height: 25px
display: inline-block
margin-left: 10px
text-indent: -9999px
vertical-align: middle
width: 30px
header a, .mobileMenu
color: #FFF
text-decoration: none
text-transform: uppercase
nav li, .socialLinks li
display: inline-block
list-style-type: none
h1, h2, h3, h4, p
padding: 0 20px
.home
display: list-item
#media screen and (max-width: 660px)
.white #content { padding-top: 91px
a
color: #6095BF
h3
font-size: 1.777em
#content
padding: 0 25px 25px 120px
padding: 0
#media screen and (min-width : 660px)
.mobileMenu, .home { display: none
h4
font-size: 1.333em
h1
font-size: 3.157em
margin-top: 10px
h2
font-size: 2.369em
header
background-color: #6094BE
position: fixed
-webkit-transition: all 1s ease-in-out
-moz-transition: all 1s ease-in-out
-o-transition: all 1s ease-in-out
transition: all 1s ease-in-out
width: 100%
z-index: 5
.logo
height: 100px
margin-left: 20px
vertical-align: middle
width: 300px
height: 90px
width: 250px
#name
path
fill: #F1F1F2
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter-white.png')
a[href*="linkedin"]
background-image: url('../images/linkedin-white.png')
a[href*="pinterest"]
background-image: url('../images/pinterest-white.png')
#circle
fill: #F1F1F2
#symbol
fill: #6095BF
p
margin-bottom: 1.3em
You're error was due to to a couple of bad indentations, and you also have a few stray opening curly braces (SCSS syntax lines 154 and 167) where it should have been a new line (SASS syntax).
For instance:
.mobileMenu, .home { display: none
Should be:
.mobileMenu, .home
display: none
A corrected and compiled file can be seen here:
https://www.sassmeister.com/gist/425717147defa3298e9d01036155cbfc
And corrected source:
html, body
font-family: "Source Sans Pro", Helvetica, Arial, serif
font-size: 1em
font-weight: 400
line-height: 1.45em
header ul, .mobileMenu
line-height: 6em
margin: 0
padding: 0
.white
#content
padding-top: 120px
header
background-color: #FFF
border-bottom: 1px solid #BBBDBF
#circle
fill: #6095BF
#name
display: none
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter.png')
a[href*="linkedin"]
background-image: url('../images/linkedin.png')
a[href*="pinterest"]
background-image: url('../images/pinterest.png')
#symbol
fill: #F1F1F2
a
color: #6094BE
&.active
color: #000
.mobileMenu
display: inline-block
line-height: 5.65em
position: absolute
right: 20px
h1, h2, h3, h4
font-family: "Ashbury Light"
line-height: 1.2em
margin: 1.414em 0 0.5em
footer
background-color: #6094BE
color: #FFF
padding: 25px 20px 50px 120px
padding: 25px 20px
div
display: inline-block
width: 33%
width: 36%
a
color: #FFF
#pgImg
background-color: #6094BE
color: #FFF
height: 465px
position: relative
h1
left: 120px
position: absolute
top: 250px
left: 0
nav
width: initial
border-bottom: 1px solid #BBBDBF
display: none
margin-right: 0
&.active
display: block
position: static
width: 100%
li
border-top: 1px solid #BBBDBF
display: block
line-height: 3em
text-align: center
a
margin-right: 15px
display: list-item
margin: 0
nav, .socialLinks
display: inline-block
float: right
position: relative
small
font-size: 0.75em
#font-face
font-family: 'Ashbury Light'
src: url('../fonts/2D395B_0_0.eot'),
src: url('../fonts/2D395B_0_0.eot?#iefix') format('embedded-opentype')
url('../fonts/2D395B_0_0.woff') format('woff'),
url('../fonts/2D395B_0_0.ttf') format('truetype'),
font-style: normal
font-weight: normal
font-family: 'Source Sans Pro'
src: url('../fonts/SourceSansPro-Regular.eot'),
src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype')
url('../fonts/SourceSansPro-Regular.woff') format('woff'),
url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
url('../fonts/SourceSansPro-Regular.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg'),
font-style: normal
font-weight: 400
font-family: 'Source Sans Pro Bold'
src: url('../fonts/SourceSansPro-Bold.eot'),
src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype')
url('../fonts/SourceSansPro-Bold.woff') format('woff'),
url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
url('../fonts/SourceSansPro-Bold.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg'),
font-style: normal
font-weight: 700
.socialLinks
margin-right: 20px
display: none
li
a
background-position: center
background-repeat: no-repeat
height: 25px
display: inline-block
margin-left: 10px
text-indent: -9999px
vertical-align: middle
width: 30px
header a, .mobileMenu
color: #FFF
text-decoration: none
text-transform: uppercase
nav li, .socialLinks li
display: inline-block
list-style-type: none
h1, h2, h3, h4, p
padding: 0 20px
.home
display: list-item
#media screen and (max-width: 660px)
.white #content
padding-top: 91px
a
color: #6095BF
h3
font-size: 1.777em
#content
padding: 0 25px 25px 120px
padding: 0
#media screen and (min-width : 660px)
.mobileMenu, .home
display: none
h4
font-size: 1.333em
h1
font-size: 3.157em
margin-top: 10px
h2
font-size: 2.369em
header
background-color: #6094BE
position: fixed
-webkit-transition: all 1s ease-in-out
-moz-transition: all 1s ease-in-out
-o-transition: all 1s ease-in-out
transition: all 1s ease-in-out
width: 100%
z-index: 5
.logo
height: 100px
margin-left: 20px
vertical-align: middle
width: 300px
height: 90px
width: 250px
#name
path
fill: #F1F1F2
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter-white.png')
a[href*="linkedin"]
background-image: url('../images/linkedin-white.png')
a[href*="pinterest"]
background-image: url('../images/pinterest-white.png')
#circle
fill: #F1F1F2
#symbol
fill: #6095BF
p
margin-bottom: 1.3em
Related
Google Drive API: Invalid Images being downloaded
I''ve written an app in lua using the Corona SDK, I'm trying to download some images from a google drive folder.
I've used the OAth playground to authroize the scopes I need and I've obtained a refresh token and have a method to obtain a new access token when necessary. This is how I download the images:
network.download(
"https://drive.google.com/uc?export=download&id="..decodedResponse.files[index].id,
"GET",
networkListener,
params,
decodedResponse.files[index].name,
system.DocumentsDirectory
)
where decodedResponse refers to the json obtained that lists all the files in the specified folder. This was working fine a few days ago but now whenever I try it, the image downloaded is invalid and corrupt. I even tried using a new folder in the drive.
I've tried other links such like
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
and some others I've seen online but these give me a
code 403
"Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
error. I read somewhere that specifying scope could fix the code 403 error but I'm not sure where exactly to specify this.
I'd appreciate the help, thanks!
Edit: I took a look at one of the images with a text editor, the result was some html that look to be code for a google auth page, some of it is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=300, initial-scale=1" name="viewport">
<meta name="description" content="Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start with 15GB of Google storage – free.">
<meta name="google-site-verification" content="LrdTUW9psUAMbh4Ia074-BPEVmcpBxF6Gwf0MSgQXZs">
<title>Meet Google Drive – One place for all your files</title>
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(//fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
</style>
<style>
h1, h2 {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0;
}
#-webkit-keyframes fontfix {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
</style>
<style>
html, body {
font-family: Arial, sans-serif;
background: #fff;
margin: 0;
padding: 0;
border: 0;
position: absolute;
height: 100%;
min-width: 100%;
font-size: 13px;
color: #404040;
direction: ltr;
-webkit-text-size-adjust: none;
}
button,
input[type=button],
input[type=submit] {
font-family: Arial, sans-serif;
font-size: 13px;
}
a,
a:hover,
a:visited {
color: #427fed;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 20px;
color: #262626;
margin: 0 0 15px;
font-weight: normal;
}
h2 {
font-size: 14px;
color: #262626;
margin: 0 0 15px;
font-weight: bold;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
height: 36px;
padding: 0 8px;
margin: 0;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
font-size: 15px;
color: #404040;
}
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=text]:hover,
input[type=url]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus {
outline: none;
border: 1px solid #4d90fe;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
display: inline-block;
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #c6c6c6;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
background: #ebebeb;
}
input[type=checkbox]:hover {
border-color: #c6c6c6;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=radio] {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 15px;
height: 15px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background: #fff;
}
input[type=radio]:checked::after {
content: '';
display: block;
position: relative;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #666;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
input[type=checkbox]:checked::after {
content: url(https://ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
input[type=checkbox]:focus {
outline: none;
border-color: #4d90fe;
}
.stacked-label {
display: block;
font-weight: bold;
margin: .5em 0;
}
.hidden-label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 0px;
width: 0px;
overflow: hidden;
visibility: hidden;
}
input[type=checkbox].form-error,
input[type=email].form-error,
input[type=number].form-error,
input[type=password].form-error,
input[type=text].form-error,
input[type=tel].form-error,
input[type=url].form-error {
border: 1px solid #dd4b39;
}
.error-msg {
margin: .5em 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
.help-link {
background: #dd4b39;
padding: 0 5px;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
text-decoration: none;
position: relative;
top: 0px;
}
.help-link:visited {
color: #fff;
}
.help-link:hover {
color: #fff;
background: #c03523;
text-decoration: none;
}
.help-link:active {
opacity: 1;
background: #ae2817;
}
.wrapper {
position: relative;
min-height: 100%;
}
.content {
padding: 0 44px;
}
.main {
padding-bottom: 100px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.google-header-bar {
height: 71px;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.header .logo {
background-image: url(https://ssl.gstatic.com/accounts/ui/logo_1x.png);
background-size: 116px 38px;
background-repeat: no-repeat;
margin: 17px 0 0;
float: left;
height: 38px;
width: 116px;
}
I can't post the entire thing cause it exceeds the body character limit
I was able to get it to work by using a different url and adding this:
local params = {}
params.progress = true
params.headers = headers
This was the URL I used:
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
How to make a span put a newline for overflowing text
I'm trying to use the example here:
http://jsfiddle.net/UNs9J/1/
HTML:
<p>Hover here<span>some text here ?</span></p>
CSS:
span{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
}
p:hover span{
display:block;
}
So, my problem is, when the text is too long, how do I get it to put the overflowing part in a new line?
Just change
span{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
to
span{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: auto;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
then you probably have to adjust the top-attribute to your needs.
Fancybox and Chrome / Firefox
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
Firefox: center flex box
I have the following code for my webpage, and when I use it in Chrome every thing is fine, but when I use it in Firefox the style is changed.
I need to make the Firefox style same like Chrome style, so any suggestion for that?
I mention in the code below what I tried to do.
<html>
<head>
<style>
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
}
a.option1
{
//Not centered but filled all area
display: flex;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
a.option2
{
//Not centered and not filled all area
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center; */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
</style>
</head>
<body>
<div><a class="option1" href="#">Option 1</a></div>
<div><a class="option2" href="#">Option 2</a></div>
</body>
</html>
Best regards.
You do not need Flexbox for this purpose: just display: block on your anchor:
http://cssdeck.com/labs/ocotcmpf
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
display: block; /* here */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
Can i remove bottom scroller on overflow:scroll?
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be overflow-x:hidden; overflow-y:auto; That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work: overflow-x:hidden; overflow-y:auto;