The navigation looks perfect in every browser (Chrome, Firefox, IE9) but in Safari Mac it "Learning Center" in the navigation isn't stretching far enough.
It's like it's missing some padding or margin on all the menu items.
Here's the link for the site. http://previewyournewwebsite.info/otsl/about-us
Why doesn't it work in Safari and what can I do to fix the issue?
In the body trying making it the full with and setting margin to 0:
html, body
{
width: 100%;
margin: 0px;
}
Related
In a new web project we have a CSS problem, which occurs only in macOS Safari:
www.health4hospitality.co.uk/template
Firefox and Chrome (Win/Mac) as well as IE and Edge showing the navigation correctly.
On Safari the navigation shows underneath instead of right of the logo. It seems as the CSS table would be 100% width, but its width is set to auto.
Does anybody has a quick fix? I would be great if I would not have to change it heavily only because of Safari.
I would set a % width for the <ul> nav bar. The auto property is rendering the element at 100% in Safari now. Setting this works for me across browsers:
ul.navbar-nav {
width: 55%;
}
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
Scrollbar in boxes with both overflow auto and pointer-events none are not responsive to clicks in firefox.
I have created a very basic jsfiddle reproducing the bug:
http://jsfiddle.net/PgaeC/2/
.out {
overflow: auto;
pointer-events: none;
height: 100px;
}
.in {
height: 200px;
}
this works in chrome and internet explorer (tested with ie9 and ie10)
in firefox the scrollbar is unresponsive and cannot be clicked at all.
any idea how to give clicks back to the scrollbar in firefox ?
What i want is a box handling click, and another box sometimes going over it, grabbing clicks on its own, with a space on top where you can still interact with the bottom box, and the scrollbar spanning on the whole page
like this : http://jsfiddle.net/NczQG/2/
EDIT: created bug in mozilla bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=880671
(as seen in https://bugzilla.mozilla.org/show_bug.cgi?id=880671)
the mozilla team fixed it :
http://hg.mozilla.org/mozilla-central/rev/f8bf18dceb1c
so it's fixed on the nightly.
I have a webpage over at http://www.raven.dima.neoturbine.net/ that I am working on. The top navigation renders "correctly" to the right of the site logo in IE 8, Firefox 3.6 and Dolphin Browser for Android but not in Chrome 8 or Opera Mini for Android, where it is rendered ON TOP of the logo. Strangely, at least in Chrome, when you visit any link after landing on the website for the first time, the menu goes to the correct position for the duration of the visit to the website.
I am a little stumped as to what the issue is, as I was sure I wasn't using any controversial CSS selectors. Anyone want to point the bug out to me?
Edit: Fixed.
You have some extraneous styles which seem like you just placed them there for no particular reason. (maybe something to do with the mobile browsers?)
You have this exact CSS in your file twice, for some reason:
#header H1
{
padding: 10px 10px 30px;
display: inline;
float: left;
}
To make this work in Firefox and Chrome (and IE8), I removed these styles:
From #header h1:
display: inline
From #nav ul:
position: absolute
display: inline
Then, I added to #nav ul: float: left.