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.
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
I am having a page in which heading and drop-down both are inline but that page looks different in Chrome and Firefox even though HTML and CSS classes are same, there is no specific css or style used for a specific browser.
heading is not in center in chrome , but in Firefox heading is in the center and drop-down is in right without any space.
Following CSS
.h2 {
padding: 9px 7px;
margin: 0;
color: #2b6dd1;
background-color: #FFFFFF;
font-weight: 600;
font-size: 22px;
text-align: center;
margin-left: 25% !important;
}
I wants heading in center and drop down in right in both the browsers chrome as well as Firefox.
Please remember the I used searchable drop-down .
They are diferent web navigators so they dont read the code the same way, you must add some prefixes to make your code readable for all of them.
-webkit //chrome
-moz- //firefox
-o- //Opera
-mz- //Internet Explorer
The most common web navigator is google chrome, because it works better and has more functionalities (I´ve worked with Chrome and Edge and I recommend Chrome).
I leave you a link here to a web where u can learn more about this
I have a button class anchor CSSed as follows:
.button {
display: inline-block;
width: 8.0em;
text-align: center;
text-decoration: none;
background-color: #840;
letter-spacing: 1px;
line-height: 2.2em;
padding: 0.5em 0.2em;
border: 4px solid #420;
}
See below for an example with FAQ tapped.
It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!
If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.
I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:
-webkit-text-size-adjust: 100%;
I found this answer originally here:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Hope that works for you.
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787