I have an e-learning site that is causing Safari on iOS6 to freeze up and eventually shutdown. Turns out memory usage is increasing to the point where Safari cant handle it and just shuts down. I've slowly removed and added code until I isolated the issue to this set of CSS:
body{
margin:0; padding:0; font-family:'Roboto',Arial, Helvetica, sans-serif; font-size:14px; font-weight:300;
background:url(../images/bg-repeat.png) repeat-x bottom left;
}
*{outline:none;}
a { text-decoration:none; color:inherit;}
h1,h2,h3,h4,h5,h6{ font-weight:300;}
ul, ul li{ padding:0;}
#wrapper { position:relative; display:block; color:#3b3b3b; }
#contents-holder{ }
#content-area{ vertical-align:middle; color:#193048; margin-left:2%;}
#content-area h1 { font-weight:300; font-size:63px; border-bottom:2px solid #193048; padding:0; margin-bottom:10px; }
Can anyone guide me as to why this set of CSS is causing memory usage to increment until the point where the browser shuts down?
EDIT: In case its relevant, I am using JWPlayer 6.6 on this page. However, it doesnt seem that is the cause of the leak so far since commenting out the above CSS results in stable memory usage.
Related
I can't figure out why my page div has different spaces on Firefox and Chrome (and Edge). Also, when I open it on localhost, it is even more moved, so I have to move my div more than what I see on localhost.
that part is in a div called "press2" and it looks like this
.press2 {
margin-left:220px;
position:absolute;
top:1000px;
width:580px;
}
The "top" part is what I have had to edit. When I look at the page on localhost (Wampserver) it is still about 100px further away, and overlaps with the review div above it
.review {
margin-left:270px;
position:absolute;
top:550px;
width:400px;
}
Can anyone help me figure this out?
Just use line-height in body
body{
font-family: Arial;
font-size: 10pt;
text-align: left;
line-height: 12pt;
}
I'm making a site and I'd like it to scale properly on all devices.
On my 1080x1920 screen, it works perfectly, but on thinner devices the page does not look very good.
The white space is where the header text should be.
My code can be found here:
.header {
height: 80px;
background-color:#00117D;
background-size:100%;
color:#FFF;
font-size:30px;
font-weight:bold;
line-height: 80px;
padding: 0 30px;
border-bottom-style:solid;
border-width: 2px;
border-color:#FFF;
font-family:"Segoe UI";
}
.header p, .header a {
float: left;
margin: 0;
margin-left:30px;
color:#FFF;
text-decoration:none;
}
https://github.com/MooneyDev/project-Mooney
What I have done in previous projects it used em font size values on all properties but the body, and then used media queries at various stages to change the px based body value as required. This should catch all other values and keep them proportionate.
I would suggest you look into using bootstrap as it should really speed things up and take away a lot of the pain involved in responsive dev.
I have one question. I want to know how to solve the following example:
I create html page with "div" tag and in browsers looks different...
CSS code:
*{
margin:0;
padding:0;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
#font-face{
font-family:myFont;
src:url('PTN57F.ttf');
}
body{
background:#f5f5f5;
}
.content{
width:200px;
height:30px;
background:#EEE;
border:1px solid #CCC;
margin:auto;
margin-top:40px;
font-size:16px;
font-family:myFont;
text-align:center;
}
Browsers different:
Problem is in font weight and padding. Is there any solution on this?
Different browsers/systems have different rendering engine, hence the output rendered by them will be different. And no noone serious about webdev is going to complain about it. That's just the way it is - deal with it :)
I would explicitly set two things via css and it should give you a much closer cross-browser experience:
font-weight: 300 //<-- this can be 100, 200, 300...900
line-height: 1.5em // <-- this is em or px and should be roughly 1.5x your font size
You can use a normalize.css file to make browsers display everything as similar as possible.
http://necolas.github.io/normalize.css/
i think problem is in screen resolution, 1000px in typical display would be N santimeters, but in high resolution displays, it would be N - x, where x is screen resolution difference, thats why your margin-top: 40px renders differently, try to use margin-top: 5%
I am having trouble getting a horizontal menu to line up correctly in IE9 and Firefox.
This is what it displays like in IE and Firefox:
And this is what it displays like in Chrome, Safari and Opera:
I keep getting that damn overflow!
What might be the issue?
My CS:
.service-list {
position:absolute;
top:0;
left:0;
display:block;
width:960px;
}
#services-content .service-list li {
float:left;
display:inline;
}
#services-content .service-list li a {
display:block;
float:left;
color:#F37FA8;
text-decoration:none;
padding:0 20px;
background-color:pink;
font-weight:400;
}
#services-content .service-list li a:hover {
text-decoration:underline;
}
#services-content .service-list li.last a {
padding-left:20px;
padding-right:0;
}
#services-content .service-list li.first a {
padding-left:0 !important;
}
The menu is spat out by wordpress.
Thanks,
Nick
Looking at the css on the site you posted. The inconsistency may be caused by your use of font-size:120% on the a tags (line 186 of style.css).
When you pop open firebug in firefox or developer tools in chrome, notice in the 'computed style' section that chrome is rendering 120% as 17px while firefox is rendering it as 16.8px.
How the browsers render this differently is a little out of scope, but you may want to try using pixels or ems instead. Hope this helps.
The issue is that there is a 40 pixel space between each item, and every item is being floated left, and this is making everything wrap when there's not enough room in each line.
You could try changing padding: 0 20px; in #services-content .service-list li a to something smaller, say padding: 0 10px;
I have a project where I've had to build a web app targeted at Blackberry devices (Specifically the 8520)
The problem is that it seems like the 8520 has some kind of loading bar that appears at the bottom of the page, but doesn't go away after everything has loaded.
Is this a CSS thing or not? I can't figure it out.
For the CSS, I have the following related to the layout:
html,body {
height:100%;
background-color:#000;
color:#fff;
}
body {
font-family:'BBAlpha sans', Arial, Helvetica;
font-size:100%;
overflow:hidden;
text-transform:uppercase;
}
#container {
width:311px;
height:218px;
overflow:hidden;
position:relative;
margin:0 auto;
}
I'm thinking it could possibly be caused by using 100% as the dimension, so when it's done what you see what 100% was while the loading bar was shown. For example, when the loading bar is showing, only 200 pixels might be available as the height, and then once it's gone the screen will have 220. The app might not be refreshing its height after the loading bar is gone.