I have a static layout (750px width) and I'm trying to make it renders centered and disable the horizontal scroll as well.
I did dozens of searches in google, tried lots of different viewport settings but nothing worked.
This is the site: www.motocross.es
estilos_2012.css lines 18 and 11 have a min-width: 1200px for your body. take those off and your problem is solved.
also if you want to disable horizontal scroll an overflow-x: hidden on the element you want to prevent scrolling would do the trick. read more about it here.
That is because you have min-width:1200px on your body.
Related
My horizontal nav bar and footer look perfect on PC, but when testing on Mac, the font is lifted about 30px above its position in the horizontal nav bar.
After trying every CSS reset and line-height adjustment, what finally worked on Mac made the font drop about 30px below its position in the horizontal nav bar on PC this time.
One Stackoverflow answer mentioned editing the glyph/baseline of a font.
I downloaded a free font editing program and noticed the characters inside of each respective square were lifted as if to have a 40px margin underneath, but I can't adjust the height of the baseline in the program.
Is there a free font manipulation program that will allow me to adjust the glyph/baseline of the font?
I appreciate your time in advance.
Try to generate your font via http://www.fontsquirrel.com/, and use the CSS for font-faces it gave you.
If the above does not work for you, try this:
Try to find out with JavaScript if the app is running on Mac. If so, load a new font-fix-mac.css file, where you will put margin-top:30px on all elements where the font is lifted above.
So as far as I'm concerned, overflow:hidden does hide the scrollbar, but makes it impossible to scroll (at least scrolling doesn't work in Firefox).
I have a scroller-slider on my homepage - it scrolls automaticaly to lower full-screen elements one by one and then comes back to the first element and starts over. It looks really nice in my opinion, but the scrollbar is visible - I would like to make it invisible. With overflow: hidden the scrolling mechanism doesn't work.
Any idea how to do it?
You can hide scrollbar with CSS - wrap your scrollable container into another one with overflow:hidden and less height/width (depending on scroll you want to hide - vertical or horizontal one). This way helps if you have static container/content sizes. If container can be resized or size depends on content - you will have to use JS solution to calculate container size.
I'm having a problem on a website with Safari 7 (on OSX).
The website address is:
<Edit: Address not valid anymore. Sorry.>
If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.
This overlay looks good on most browser, but there is a problem with safari.
The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.
The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.
Is this a known issue with Safari? Is there a bug filed? An update?
I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.
I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:
#overlays .overlay { /* line 1081 */
...
width: 100%;
height:100%;
...
}
#overlays .overlay .content.text { /* line 1185 */
...
margin:0 auto;
...
}
You could use Z-index but Z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Also You can try in other browsers as well
If you look at this example in a webkit browser, chrome, safari
http://freemotive.co.uk/dev/exp2.html
the overflow: hidden set on the span element doesn't seem to work when positioned absolutely.
The general idea is that the span element will hide the image within a circle using border radius.
i've read that it is a bug within webkit, however i'm wondering if there is a work around to solve the issue?
i've played with ideas, but nothing has worked yet.
hope some of you can help.
If I understand you correctly, you're basically trying to "frame" the image within a circle by using a span with border-radius and overflow:hidden... why not try applying the border-radius to the image element itself?
I added a box-shadow to a section of a page recently to give it the same shadow border effect that is seen on Mac OS X apps. It looked great, but I noticed that scrolling up and down on the page made it lag. I usually only see this on pages that have annoying background images and tons of images and embedded videos plastered all over (cough MySpace cough). I originally decided to use box-shadow since I figured that it would remove the need to use an image, which would remove any possibility of scroll lag.
I know that CSS3 is still new, but is this the reason for the lag? Is the shadow being software rendered or something? When I apply the box shadow to smaller elements, it doesn't lag at all. I'm just wondering if anyone else has experienced this.
I just tried it on the Stack Overflow front page, on the #content div using Firebug with a setting of:
-moz-box-shadow: 1px 1px 10px;
And I did notice some scroll lag afterwards. I am using Firefox 3.5.
My question is, what are some alternatives to using this attribute if I want to add a Mac OS X style border to a section of my page?
On a side note, does anyone know if it is possible to apply the box shadow only to the top, left, and right sides of the element and not the bottom? I tried 1px -1px 10px but it still shows the shadow on the bottom. If I keep decreasing the second offset, it eventually removes the shadow from the bottom but then the top shadow is now way darker and bigger.
And yes, I have seen the articles on box-shadow at:
CSS3 Info
fredericiana's blog
Your best bet would be to use -moz-border-image instead. That should solve both your issues.
E.g. you could use an image like this,
, combined with CSS like this
-moz-border-image: url(shadow.png) 10 / 10px;
to create your shadow. And since you're using an image, you can leave out the bottom shadow as well, if you want.
You're not going to be able to remove the shadow from the bottom using -moz-box-shadow; it's not called "box shadow" for nothing. It applies a shadow to the entire box. You can't specify a shadow for each side separately like with border, say. The best you could do is fiddle around with the placement, blur and spread of the shadow. But that inevitably leads to a darker shadow on the opposite side.
I get the box shadow lag as well when I try it on Stackoverflow. It affects performance on Safari as well when I try -webkit-box-shadow, though it isn't as noticeable as in Firefox. The performance will hopefully improve in the future, but I presume the shadow will always have some impact since as far as I know it is software rendered.
This has been fixed in webkit as of two days ago. :)
https://bugs.webkit.org/show_bug.cgi?id=22102
You can pick up a chromium nightly to try it out.
I looked in FF3.6 and FF4 and don't see terrible scroll performance there, so it might be addressed there as well.
The issue still persists in Chrome for Android as of the current date. Some box-shadow combos result in a poor scrolling performance. In my case stacking two inset box-shadows (e.g. top / bottom) lead to the described problem. The only solution I can provide is to make the box-shadows less complex and try again...that worked for me. That's unsatisfactory but yeah instead u can also use the border-image solution or remove the affected box-shadow completely. Hope this gets fixed soon, finally. Btw the Android Version of Firefox does not have the problems anymore (for my css3). Moreover the desktop versions of both browsers are not affected in my case.
#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}
Cross browser version for old and new browser.
Simple img: http://i28.tinypic.com/2njzkt1.png
style :fixed for images too overload perfomance browser