I have been checking my website across different browsers. I am aware of the ability/need to use browser specific CSS.
Is there a reason (other than the obvious) as to why the .sidebar appears in the middle of the profile page in Chrome but not in Firefox? I haven't set it to display on Chrome intentionally and I don't want it to display.
If so, is the best course of action to use webkit in my CSS?
The URL is:
Profile page
The reason the sidebar appears at the centre of the page is because you have the property position: fixed; on .sidebar. You can remove that and Bootstrap will use its own styling.
EDIT: It's recommended that you don't add margins or custom widths on elements using Bootstrap grid-system. You should add those in the child element instead.
Related
I have a website that uses Jump Links to move between page elements (it's an interactive User Guide), and all works ok on Firefox, IE, and Edge, but Chrome and Opera ignore the 'padding'.
As the website has a fixed menu bar, this means the jump link location vanishes under the bar on Chrome and Opera.
The simple code I am using for the jump link offset is:
<a id="namexxx" style="padding-top: 100px;"></a>
What can I do to make this work with Chroma and Opera?
All the solutions I have been able to find via search do not answer the difference issue between the different browsers.
Cheers!
Padding isn't a suitable approach to repositioning an element in this way, because it would increase the size of the element itself. In the case of a link, you'd effectively be creating a larger link area, with the space above the link becoming clickable too.
You'd be better off using margin-top which would move the element down the page. Depending on the rest of your markup, you might need to set display: inline-block; on the link element too.
This is completely different from the regular overflow issues people struggle with. First of all, I've only been able to produce this issue in Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox seem to behave as expected.
The body element grow with the content. No height: 100% or position: absolute styling used here.
The problem is that there seems to be something unknown forcing the browser to scroll further than it should by roughly 400px or more on both x and y axis. The inspector cannot select anything in this empty space and ends up selecting the html tag.
I've been through every element on the page and nothing seems to extend beyond the html tag!
Unfortunately I cannot link anything as the site is on a work server and requires authentication to access the page :(
I'm stumped, so any suggestions would be much appreciated!
I found that the issue involved jQuery UI, css provided with the plugin and my company's css. We use jQuery UI for input suggestion in our app.
What seems to be happening was that a recent change in our html structure set particular elements height and width to 100%. This css happened to include jQuery UI's ui-helper-hidden-accessible class. The css provided with the plugin sets ui-helper-hidden-accessible to, amongst other things, position: absolute; and clip:rect(1px,1px,1px,1px);. As the parent element was not explicitly set to position: relative;, the ui-helper-hidden-accessible element was overflowing, though due to the clip property it was not visible in the developer tools! Neither selecting the hidden element or clicking it in the dev tools elements tab would reveal how large it was.
There are two solutions to this problem:
Altering the css selector that sets width and height to 100%
Setting the parent element to position: relative;
Have hit a problem I've never encounted before.
I have a element, its a panel that is fixed to the right side of the screen, and the css for the positioning is:
.myPanel{
position:absolute;
left:0;
}
This works fine, the mark up for the panel is generated by vaadin.
Now everything works fine, however every now and then when I refresh the page the css position:absolute
is being ignored.
Naturally I open my devtools and see that according to the styles tab position:absolute IS being applied, it just doesnt look like it.
Now the odd bit
When I uncheck the tick box to remove the position:absolute styling nothing changes (as I'd expect) but when I re-check it, and the position:absolute is reapplied, the panel then shows correctly.
So even though there is no new css, removing then re-adding position:absolute fixes it.
I've always been under the impression that dynamically added elements will still take css styles that have been loaded pior. Is that incorrect?
I have ONLY had this in chrome, currently version 39
Any ideas?
UPDATE:
if at some point the css was being overridden I'd expect dev tools to flag that (style with a strikethrough etc) but its not. I have tried adding !important to it but get the exact same result (see is applied in devtool, disable and reenable fixes it).
I've noticed in the dom that vaadin is loading my custom javascript in the head, then the css, then its own inbuilt javascript.
This seems to be working according to the spec. If width and height
for a replaced element (which input is one) is auto, it's supposed to
use the elements intrinsic width and height, which might cause
absolute positioning to be overconstrained.
One fix is to wrap your inputs in a div, absolutely position that, and
use width/height 100% on the inputs. Note that Firefox also has this
behavior, and it is indeed in the spec, so it's better to fix the
website than to change Chromium.
~#9 chromo...#gmail.com
As per you saying:
I've noticed in the dom that vaadin is loading my custom javascript in
the head, then the css, then its own inbuilt javascript.
I would say this would be the case for all browsers. For more info, see a previous answer of mine in relation to this
Its a known bug which looks te be solved and the appears again, see also https://code.google.com/p/chromium/issues/detail?id=313221
I have a simple horizontal menu which has <li> elements of different widths, when a user hovers over I would like to use the attached image to designate the hover, however I cannot work out the best way to do this.
the Image...
Can anyone post any code and suggest what I might need to do here.
Thanks
You would simply use the a:hover selector in your css, and add a background image. However, be aware, that stretching this image only works in modern browsers (IE9, Chrome, FF) that support CSS3.
This is how you make a menu;
http://jsfiddle.net/sg3s/49T6w/1/
When you style a menu it is important to make the anchors (a tags) display:block. That makes sure you have full power over their look and dimensions. Als if you use the anchors to make the menu it is backward compatible with older browsers that don't support :hover on block level elements (but do on anchors even if you make them a block since they're originally inline).
The background image is easy, just add it in the :hover class of the anchor. Gl
I'm having problems in ie7 with notification's that are styled using the p tag. I've used them before and they render fine in IE7, however, in my latest theme, they cut off the top border with no change to the code which is giving me a major headache trying to figure out.
Here's the problematic page, the notifications are at the bottom of the page.
Link
It's annoying because I've used the exact same html and css here in this theme
Link
Can anyone see what the problem with the buggy version is?
You have triggered some bug in IE7, but I'm not sure which one...
The difference between the pages is that you have specified a width for the notification elements in the page that works. If you specify a width for the elements in the other page, they work too.
Forcing layout seems to do the trick. You can read more here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding this:
<style>
.notification { zoom:1; }
</style>