I have searched everywhere but can't seem to find an answer to this. When playing videos in fullscreen the html navigation sits over the video in IE, Chrome and Firefox but not in Safari from both a Mac and a PC.
The site is http://www.david-bartlett.com Please look at the showreel page or the excerpts.
I'm a relative newbie I'm afraid, is this a css thing or a videojs issue ? Any ideas about how to fix it would be gratefully received.
Cheers.
The problem is the z-index property in DB.css line 80:
#nav li {
margin:0;
padding:0;
position:relative;
float: left;
list-style:none;
line-height: 30px;
z-index:3000; /* this line causes the bug */
}
I'm not sure about other browsers, but in Firefox, it's ok to simply remove that line.
Related
I just completed a challenge for FrontEnd Mentor and was texting a friend my demo link to show off/celebrate. But when I went to open the link on my phone I noticed the formatting was all messed up. I've since opened the site on Safari, and the height of the div.selected-plan is getting all messed up.
This is what it looks like on my machine with Chrome.
And the distorted Safari version.
Link to the live site so you can view the html/css.
Why is Safari distorting things and how do I prevent it from happening in the future?
Give below CSS to your SVG I think It Creates height
.music-icon {
margin: 1em;
padding: .25em;
max-width: 48px;
max-height: 48px;
}
I'm working on a web app that, for the most part, looks fine on both a PC and a phone. However, if I have a dropdown list, the fonts are normal on a PC, but on a mobile browser, the items are super enlarged. I'm not doing anything too fancy in the background. I'm just wondering if there is a way to fix this? The "Select Recommendations" is the dropdown list.
The CSS is:
<style>
ul,li { margin:0; padding:0; list-style:none;}
.label { color:#000; font-size:16px;}
.ms-options-wrap > .ms-options {
padding: 10px;
font-size: 1.2em; (I tried different px and % as well...it only changes it on the PC web browser. Mobile browser is still enlarged)
}
label{
margin-bottom: 0px;
padding-bottom: 5px;
color: #555 !important;
}
</style>
Well, it appears this is strictly a bug with Android Chrome. I've tested it under Safari on an iPad and using Firefox on an Android phone. It also works with Firefox and Edge on a PC. So I'll just close this for now. Android Chrome... insert eyeroll emoji
This is my site.
I have a problem with the site logo - only in Chrome and Opera, it just moves a little while loading (from left to right) and then jumps back to its place.
I had an issue with Chrome and Opera back in the day with my logo, but I fixed it by adding this code:
#nav-header.nav-container {
margin-left: 165px;
}
(without this code, my navigation overlays logo - of course only in Chrome and Opera).
To notice the issue, you have to refresh the page a couple of times (by clicking on site logo).
I tried adding various css but no luck. What can be responsible for this behavior? It's really odd that it only happens in Chrome and Opera.
Any ideas?
EDIT:
This is the code for site logo:
.site-title a img{
height:40px !important;
position:absolute;
pointer-events:auto !important;
top:-27px;
padding-right:10px;
padding-bottom:5px !important;
padding-top:5px !important;
}
I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.
I've never ran into this problem before.
The menu looks good on Windows, but it breaks in Firefox, Chrome and Safari on Mac OS (saw this by using browsershots). I don't have access to a mac so I can't debug it properly. I think it might be cause by different letter spacing or size. Does anyone have experience with this?
Thanks!
I'm viewing the site in firefox on a mac, and it looks like the div with id="wrapper" is not long enough to contain the menu.
Either increase div#wrapper to 960px:
#wrapper {
margin:0 auto;
width:980px;
}
or decrease size of menu font to 16px:
#mainMenu ul li a {
background:url("images/bk_menu.gif") repeat-x scroll 0 0 transparent;
color:#175689;
display:inline-block;
font-size:16px;
height:30px;
overflow:hidden;
padding:16px 19px 0;
text-decoration:none;
}
As far as I can see, it looks fine in Safari 4, unless you post a screenshot. But it might be that you have <div id="top-links"> occurring twice: [Invalid]Markup Validation of clients.newblack.ro integra - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.