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%;
}
Related
I'm currently working on a fixed navigation menu for a client on mobile. I have noticed that in Firefox when you set overflow-y: auto and a max height on a div that it will show the entire div in Chrome and Safari but in Firefox the bottom content is never revealed. I have created a code pen to show what I mean. Try and scroll to the Last item (Literally called "last") in Chrome and you can reach it but try and do the same in Firefox and you can't!
http://codepen.io/acha5066/pen/oXyXZz
max-height: 400px;
overflow-y: auto;
Anyone know what causes this or how to fix it?
I think it is due to how firefox and chrome behave to same padding and height values. If you increase or decrease you max-height in any of the browser, you can easily scroll to your last item.
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;
}
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;
}
I'm having trouble finding where I have the CSS wrong on this site. On Firefox, it's showing side scrolling to the right but on Chrome, it looks fine. I'm thinking overflow:hidden; but I can't seem to find where to put that.
Here's the site: http://www.llmedia.co/
Appreciate it!
The problem is in your footer. Your whole page width is 960px. But the footer ul width is 1100px. So in small screens your site will have a scroll bar to the right. Same result will happen in firefox browser too. So reduce the footer width to 960px and your scroll bar will disappear!
#footer ul { width: 960px; }
I see a scrollbar in Chrome so I'm guessing it has to do with your viewport size. Try shrinking your browser window in Chrome and see what happens. Be careful with using overflow:hidden;. You may be hiding content from users who don't have a large viewport for whatever reason.
I just realized that every browsers seem to have a curious render problem.
This is the test case: http://jsfiddle.net/cKNQD/
1. Please scale your browser until the bottom scrollbar appears.
2. Then scroll to the very right.
You will see, that the #header will not longer have a 100% width. The problem
seems to be the .wrapper inside. I need that wrapper to limit the dimension
of the #headers content.
Solution welcome.
Add min-width: 980px; to the header.
See updated fiddle demo.
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.
Width of #header is not defined, so it is not 100%, it is "auto".
Maybe you should remove "width: 600px" from .foo class?