I am having this issue for chrome (Mozilla works fine) when I float:right a specific span the text within shrinks. This is only happening on the responsive design mode in chrome, but it also occurs in live mobile version.
There may be an overarching issue. In the first photo, the icon and text is squished together, and this doesn't happen in firefox or in regular chrome.
Here is a picture without the float right.
Here is a picture with float right
Here is the abridged HTML
<div class="post-footer">
<span class="tag"><i class="fas fa-tags"></i>music</span>
<span id="date" class="tag"><i class="fas fa-calendar-plus"></i>June 7th, 2018</span>
</div>
Here is the CSS
.post-footer {
padding: 15px;
}
.post-footer .tag {
border-radius: 200px;
background-color: #c0392b;
color: white;
padding: 5px 15px;
font-weight: 500;
}
.post-footer .tag i {
padding-right: 10px;
}
#date {
background-color: #27ae60;
float: right;
padding: 2px 12px;
}
Any ideas to why chrome is acting this way? Is there a wiki or guide to common browser bugs?
EDIT: The site seems to work fine on an iPhone in safari and chrome. It does not work a S9 with Chrome.
The complete code can be found here
Related
Im having a bizarre problem. On one of the sites im coding, I use css hover commands to attach pull down menus to buttons. As many of you know, on mobile devices, hover commands translate to taps. The problem is that whatever I do, I cannot get iOS safari to register a click, making the entire drop down menu inaccessible on iOS safari ONLY. It works in chrome on iphone, and it works on every desktop browser. Any ideas?
This is my CSS:
/* Reserve Pull Down */
.reserve {
font-size: 30px;
color: white;
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.reservetitle{
color: white;
}
.reservedropdown {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.reserve:hover .reservedropdown {
display: block;
}
.reserve.active .reservedropdown {
display: block;
}
/* Reserve Pull Down End */
And this is my html....
<div class="reserve">
<a class="reservetitle">Reserve</a>
<div class="reservedropdown">
<a class="dropdowntext" href="reserve/index.html">By Location</a>
<div class="dropdowngap"></div>
<a class="dropdowntext" href="tel:+13014333005">Call Now</a>
</div>
</div>
Any ideas? Im having a very hard time figuring it out. Ive tried ":active", ":focus". and of course, ":hover". Cant get anything to work on iOS safari. Any help would be appreciated.
Cheers!
-Julian
I was able to get it to work by tweaking your HMTL slightly
http://codepen.io/bjornmeansbear/pen/wGdzMg
I simply made sure that the <a class="reservetitle">Reserve</a> had an href="" … Reserve
The browser for sure sees it as a link that you would click/hover on, and everything then works fine.
Following annoying problem: jsfiddle.net/f6juduq1
Two buttons, one input type="submit", the other an a tag, should look the same:
HTML:
I'm a button
<br><br><br>
<input type="submit" class="button" value="I'm a button">
CSS:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
The last line (box-sizing) is needed to achieve the same width. (Or min-width - the buttons should be flexible in width.)
Now the issues:
Firefox 40
The inner box (inspect the first button with Firebug and click the Layout tab) is 150 x 22px.
Second button: 150 x 24px. Why?
Chrome 45
First button (inspect with Chrome's Developer Tools): 150 x 21px.
Second button: 150 x 21px. Okay, but they differ from Firefox. Why?
Internet Explorer 11
First button (inspect with IE's Developer Tools): 150 x 20.7px.
Second button: 150 x 20.7px. Okay, but "20.7" huh? Why?
Safari 5.1.7
(Can't inspect the jsfiddle's result iframe.)
Opera 31
(Same as Chrome.)
Taking a screenshot from Firefox's result and comparing it in Photoshop shows the input (second button) is 2px higher than the a tag (first button):
In Chrome and Safari it looks good:
In IE the a tag is 1px higher.
Now the final question is how to fix this or rather how to prevent those messy issues?
Thanks in advance!
Very interesting observation here. The issue affects both height and width, specifically in Mozilla Firefox, due to built-in CSS style declarations.
Adding the following CSS should fix both height and width discrepancies.
input::-moz-focus-inner { border:0; padding:0 }
Illustration of the bug and fix here (notice, I've taken out your CSS styles for height:
html{font-family: Arial; font-size:0.8em;}
.wrapper {
background: red;
white-space: nowrap;
}
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
input.buttonfix::-moz-focus-inner {
border:0;
padding:0
}
NOTE: Use Firefox browser to see the issue.<br>
<div class="wrapper">
I'm a button
<input type="submit" class="button buttonfix" value="I'm a button">
<input type="submit" class="button" value="I'm a button">
</div>
Notice last button has extra height forcing the container to show top/bottom of other buttons
<br>
<br>Input Button - Fixed<br>
<input type="submit" class="button buttonfix" value="I'm a much longer button">
<br>A Tag - fine<br>
I'm a much longer button
<br>Input button - bug?<br>
<input type="submit" class="button" value="I'm a much longer button">
Read about the issue in detail here: https://css-tricks.com/forums/topic/button-padding-issue/
The solution
Basically there are three issues:
Different box lengths
Different default settings across several browsers
Firefox CSS discrepancies
The solutions are listed below.
1. Different box lengths
An a tag is longer than an input submit:
To solve this you have to add box-sizing: content-box; to the input's CSS. As from now the (short) buttons look like:
2. Different default settings across several browsers
The buttons have different heights thanks to different browser default settings:
The input (second one) is higher.
The solution here: resetting all those defaults. Set line-height and height:
3. Firefox CSS discrepancies
And finally the last one, a pretty annoying behavior just in Firefox.
The buttons above are equal: same height, same width. But if the button text gets longer you might see this:
The input button is wider. This is because Firefox uses pseudo elements within the button elements. To redress this problem reset padding and border for input::-moz-focus-inner:
The code
Here's a sample: http://jsfiddle.net/f6juduq1/12/
CSS
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
line-height: 1.5;
height: 27px; /* 18px x 1.5 = 27px */
}
input[type="submit"].button {
box-sizing: content-box;
}
input.button::-moz-focus-inner {
border:0;
padding:0;
}
Thank you all for help. I hope this answer is concise & clear to help other people finding the solution as soon as possible.
To obtain the same height in all browsers you need to specify the height
and for vertical align center line-height same as height value
for example try this:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
min-width: 150px;
cursor: pointer;
padding: 0 20px;
/* Adjust your height here */
line-height: 35px;
height: 35px;
}
I was having a problem with <a> being sized differently than <button> only in Safari, and it was caused by having SVG icon buttons.
The SVGs were sized at 35px, and both the anchor and button tags had explicit height of 35px set on them.
The problem was that the buttons were smaller than the anchors only in Safari.
I removed the height declarations on the buttons and it made the button take the size of the SVG inside it.
I am testing my site on mobile, tablet, and cross-broswer. I have noticed that my images that are inside of an anchor tag are displaying improperly. This only happens on FireFox. Has anyone had any issues with this? I am attaching two images...the first is chrome, the second is FireFox.
The html is:
Learn More<img src="/sites/all/themes/merge/img/arrow.png" />
And the SCSS:
.body-button{ width: auto;display: block; #include open-bold; font-size: 14px; line-height: 14px; border-radius: 0px; opacity: .9; text-transform:uppercase; color:white; background: $blue; padding: 15px;}
.body-button img{ float: right; width: 9px; height: 15px;display: inline-block; }
Does anyone know why Firefox does this?
I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
I am trying to float a <button> to the right. the <button> is outside of <form> but is on the same line. For some reason this is not working in FF. I made my form background red and found out that the <button> is still in the <form> in FF even though its not! Every other browser works fine, the <button> is not in the <form>.
Screenshot:(left is chrome...the one with http:// and the right is Firefox
alt text http://img375.imageshack.us/img375/3824/ffchrome.png
HTML:
<form>
<input type="url" placeholder="http://" />
<input type="submit" value="Crypt" />
</form>
<button type="button"> ? </button>
CSS: (Took out the unnecessary code)
section.crypter {
padding: 25px;
}
section.crypter form {
display: block;
float: left;
background: red;
}
/* Input */
section.crypter input[type="url"] {
border:1px solid #666;
color: #939393;
font: italic bold 1.7em Verdana, Arial, Serif;
outline: 0;
padding: 10px 10px;
width: 240px;
}
section.crypter input[type="submit"] {
border:1px solid #666;
color: #000;
font: 2em Verdana, Arial, Serif;
margin:0 0 0 -10px;
padding: 8px 20px;
}
section.crypter input[type="submit"]::-moz-focus-inner {
border: 0;/* Firefox hack */
}
section.crypter button {
display: block;
float: right;
padding: 10px 25px;
}
I tried your code with firefox 3.6.8 and did not have the issues you got. I also don't think Firefox will manipulate the DOM (moving the button into the form tag), what seams to happen.
So I guess its one of your Firefox extensions, that causes the issue.
It might be worth trying to uninstall and install firefox and the good old fashion reboot.
Hey guys, I figured it out thanks to Kroc Camen. In Firefox, I cannot float something to the right unless it is first in order within the wrapping element. (A engine quirk since the 90's) haha Thanks for the help though!