I can't figure out why our website has such a large width. Here's a link to it: https://85.25.242.165/lunatic/default/index
As you can see there is a scroll bar at the bottom and the whole width is roughly double the size of the website. I've tried finding an item that is so wide via Firebug but no luck. Everything is within the original width of the website.
We're using the Web2py framework.
There's your problem
#cssmenu ul ul ul {
top: 0;
left: auto;
right: -99.5%;
}
add
body {
overflow-x: hidden;
}
and everything should be fine.
I had a similar problem which occured in Firefox Mac only, when I added this code:
body {
transform: translateZ(0); // This enables hardware acceleration for smoother animations.
}
As the comment says, it is supposed to smooth animations but it ended up ruining my site on FFv24 Mac.
Related
(I've tried searching for this but can't seem to describe it correctly--if this answer exits, please point me in the right direction!)
I'm playing around with some css rules. I wanted to make a specific, secondary 2px-wide border on a pseudo-element appear around nav anchors in the header, which open a modal and blur an absolutely-positioned background image div #bg, which sits as such:
<body>
<div id="#bg"></div>
<header id="global-header">
<nav>...</nav>
</header>
</body>
Since I wanted to transition the blur effect, I added translate3d(0,0,0) to #bg, which smoothed the fps by galvanizing the GPU for hardware accelerated processing of CSS. It worked! ...Until I noticed that the vertical (left & right) borders for the links had inconsistent widths across the nav. They were each set at 2px, but every other one looked 1.5(??)px wide. It took me a minute to narrow down why, which ultimately was because of the translate3d transformation. I took screenshots, but I centered and moved the pseudo-elements with border-left: 2px below the header (the effect persisted), and I removed the background image itself so the effect would be easier to see. Here they are:
Inconsistent 2px calculation (with translate3d(0,0,0) on #bg)
Consistent widths (without translate3d transform on #bg)
And for reference, here's the code for the left-bordered pseudo-elements:
#global-header nav ul li a:before {
content: '';
position: absolute;
display: block;
top: 100%;
left: 50%;
height: 100%;
width: 0;
border-left: 2px solid gray;
background-color: transparent;
}
I know that translate3d creates as well as solves a possible host of issues from my searches--but why is this happening? Does it have anything to do with "subpixel calculations"? And why would these calculations render inconsistently throughout the page with hardware acceleration, on something I would assume is hard to mess up?
Edit: So, even without translate3d, the problem-lines flicker to a smaller width when the blur transitions (seen in the code from screenshots) are triggered, and I can reproduce the original issue without translate3d if I add backface-visibility: hidden to the pseudo-element itself. This could hint at general pixel rounding issues, with specific properties as triggers only being a symptom.
After further fiddling, answering my own question: This is not caused caused by hardware acceleration, which was my revised suspicion. Though the use of these effects showcased the problem in my particular case, I was able to recreate a version of my issue without them.
By removing transform3d from the #bg element:
#bg {
.
.
.
/* transform: translate3d(0,0,0); */
}
And, without the backface-visibility property as well, I added some width to the pseudo-element in order to see what these borders would normally look like:
#global-header nav ul li a:before {
content: '';
position: absolute;
display: block;
/* top: 100%; */
/* left: 50%; */
height: 72px;
width: 1px;
border: 2px solid black;
/* backface-visibility: hidden; */
/* border-left: 2px solid black; */
background-color: transparent;
/* transition: height .2s ease; */
}
Duh: I should have expected the result, since earlier I had tried to use the element itself (by making it 1-2px wide and coloring it) instead of border-left, which at the time seemed to fix the issue. Of course, when I did it this time using the above css, the base problem reappeared.
Though I still don't know why the aforementioned properties showcased the problem with border-left as well, addressing this might be too sporadic/situation-dependent to field here, and likely still has more to do with browser rendering than anything else.
Anyway, my question was why transform3d caused this effect, and the answer is, at least in this case, it didn't--it just made it more obvious.
I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site's look and feel.
NOTE: I'm posting this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.
I hope this is helpful!
I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:
Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.
If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.
NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.
Hope this helps!
html:
<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>
css:
.my-div {
display: inline-block;
overflow: hidden;
width: 290px; /* note the embedded iframe is 302x76 */
height: 74px;
text-align: left;
}
.my-div iframe {
position: relative;
left: -10px;
}
NOTE: for people brought here by google but with different problem
If you want to hide just borders not making it edge less keeping original design just do following:
HTML:
<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>
CSS:
.captcha iframe {
position: relative;
box-shadow: none !important;
}
I have a three year old website, which has been perfectly functioning, until now. The new version of the Google Chrome browser, v.41, experiences a strange bug: I have an IMG tag inside of an A tag, and when I click on it, the image randomly changes position instead of going to the where the link is linked. This only occurs with the latest Chrome, v.41. Older versions of Google Chrome and other browsers do not experience this problem. I have tried this on both Windows 7 and OSX 10.10
I copied the code to jsfiddle in case you want to look at it. I have not used any outdated CSS functions and there is no JavaScript used at all.
The linked image's code:
<a class="insImg" href="#">
<img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD2-mars.jpg" />
Dům 1
</a>
I would just like to know whether there is something wrong, or if it is just this version of Google Chrome.
As you've mentioned it looks to be a bug with Chrome.
I've played with the code a bit and this part seems to have been part of the issue:
ul li img {
width: 150px;
position: absolute;
top: 0;
left: 0;
}
I don't understand why clicking on the anchor causes this positioning to be dropped, but as a quick workaround you can just move the positioning into the anchor like so:
ul li a {
text-decoration: none;
-moz-opacity: 1;
opacity: 1;
color: #fff;
position: absolute;
top: 0;
left: 0;
}
ul li img {
width: 150px;
}
See the updated fiddle below.
https://jsfiddle.net/2d4b1mLm/5/
I modified a WordPress responsive theme to include my client's logo within the header. When adding this in, I've knocked around a bunch of other divs, and I'm slowly piecing it back together.
The main challenge I'm having is with the
#header-menu
ID ( http://ubcf2.garyspagnoli.com ) not rendering properly on certain browsers. It stays fixed to the right side, and no longer acts responsive to the design.
Here is the CSS I implemented (and also check out the site) to see how I positioned this over the logo image -
#header-menu {
bottom: 0;
padding: 0;
position: absolute;
right: 0;
}
Any advice on how to fix this? Can I not absolute positioning in a responsive design?
remove your h1#site-title
#header-menu{
background-image:url('http://ubcf2.garyspagnoli.com/wp-content/uploads/2014/02/UBCF-v1.jpg');
list-style-type:none;
margin:0px;
padding:0px;
}
#header-menu>li{
float:right;
}
#header-menu>li a{
display:block;
padding:10px 15px;
}
#header-menu>div{
float:clear;
}
add a div after your last list item. You may need to reverse your list items. Also try and remove any unnecessary positionings.
I have a gallery with a frame around the thumbnails, I have used max-width to shrink the thumbnail images so they all line up nicely, but in IE althought the image shrinks to the max width the frame still expands as if the image was larger. I have tried adding a max-width to the li but to no avail.
Here is a link to the page that looks nice and uniformed in Chrome and FF bt all over the shop in IE! http://wedding-photography-gloucestershire.co.uk/wedding-photography-gallery.php?gallery=Getting%20Ready
Wedding Photography Gallery
thanks in advance of any help.
This is the frame style..
.highslide-gallery ul li {
display: block;
position: relative;
float: left;
width: 106px;
height: 106px;
border: 1px solid silver;
margin: 2px;
line-height: 0;
overflow: hidden;
background-color: #000;
max-width: 106px;
}
I tried adding this which I found on another website as a solution to IE max width problems, but i don't really understand it ;
width:expression(document.body.clientWidth > 106? "106px": "auto" );
but it still didn't work.
Thank you.
IE treats padding/margin differently than the other browsers. I looked at your stylesheet (highside) and you need to have a stylesheet for ie specifically and then you can target IE specifically without worrying about how the changes you make effect the other browsers. I personally wouldn't do that but I used to do it when I was experimenting in web development.
The easiest way for you to figure out what's going wrong and where it is going wrong is to use firebug. Safari and IE have similar debug environments as well. There are some really good tutorials on using firebug out on http://net.tutsplus.com
Good luck.