CSS for my button is:
.custom-input-button {
text-align: center;
position: absolute;
left: 64.4%;
top: 12.3%;
}
and rate box:
.rating-input {
font-size: 25px;
float: right;
position: relative;
left: 35%;
}
But bot button and Rate me option appears at varying position in Firefox and chrome.
More as Firefox version change position get affected. On my Firefox 23.0 it looks ok,
but in my friend PC FF version is different and position of button and Rate me option changes.
inHm, try using
.rating-input {
font-size: 25px;
position:relative;
left:35%;
}
Without float left, because then you using such combinations some browsers can set it incorrectly.
The problem is that you use % to set a distance. Different browsers use percentages differently. Try to do it using px.
Related
How do you do?
I have converted XD file to html, css code.
I checked on my PC(windows), but I didn't check on Macbook.
Details:
I coded button and used pseudo element to display right arrow at the right side.
Here is my code.
HTML
<button class="register btn-top-register">Register</button>
CSS
.register{
background-color: #FF6D1F;
border-radius: 10px;
color: white;
padding: 20px 50px;
margin-right: 5%;
border: none;
position: relative;
box-shadow: 1px 5px 0px #8b3507;
}
.register::after{
content: '\1F892';
width: 20px;
height: 20px;
position: absolute;
right: 0;
}
This register button displayed triangle on Windows, but step shape on Macbook.
I tried many times to fix difference.
Could you help me how to fix and display the same shape-triangle?
You can use browserstack to test your code in different devices such as mac and ios
Have a look at these unicodes https://www.toptal.com/designers/htmlarrows/.
If you want to use of unicode I don't know exactly.
I suggest you to use SVG or img to display an icon on your button.
You can download an SVG icon from flatiIcon, or you can use of featherIcon or font awesome for example.
I'm stuck with issue regarding text positioning over responsive images.
I have ribbon pictures with different sizes (mostly the width varies)
Once the browser's window has been resized the text jumps out of the ribbon.
.first-block-first-ribbon-text-position{
transform: translate(-15%, 60%); /*Actually -15%, 40% works in my project*/
color: #fff;
font-weight: 700;
font-size: 2.0vmin;
}
For media queries I'm making in that way:
.second-block-second-ribbon{
transform: translate(-15%, 60%);
color: #fff;
font-weight: 700;
font-size: 2.0vmin;
}
Is it right approach in this way? Should I only fix the media-query or I it should be overwritten from the scratch?
Also I need that the text would be centered inside images.
Now I'm confused, because I've got a suggestion that all these approaches are wrong...
I need universal solution for different browser window sizes.
P.S. After the code update it seems that JSfiddle example works... But on production ribbons doesn't fix to right corner and text jumps our of it. (I could post a link to a live version)
I'm attaching the img how actually it should be rendered (Look at first part).
JSFiddle: https://jsfiddle.net/DTcHh/19252/
IMG: http://i79.fastpic.ru/big/2016/0412/25/d591b9e5a4ee75d82f9db7c609c81425.jpg
Basically, you just have way too much going on. Why are you using the Bootstrap caption class? That adds some goofy styles. Then, what's with all the transforms?
I'd start with something very simple, and increase font sizes with media queries.
.ribbon {
position: relative;
}
.ribbon img {
width: 100%;
}
.photo-caption {
position: absolute;
top: 15px;
right: 30px;
bottom: 15px;
left: 30px;
color: #fff;
}
Demo
I'm trying to put an image (a hat) above the letter "u" in the word "blablablau".
The result I expect is that:
I solved this with this code:
<img id="img-hat" src="hat.png">
<p id="title-bla">blablablau</p>
#img-hat {
transform: rotate(25deg);
position: absolute;
margin-left: 118px;
height: 23px;
width: 37px
}
#title-bla {
margin-bottom: -5px;
font-weight: bold;
font-size: 170%;
margin-top: 2px;
font-family: 'Open Sans',sans-serif
}
The problem is that, using the SAME browser (like chrome) in different devices, I get different margin-left results in my img-hat.
Example: in my computer it shows correctly. In my laptop it shows correctly too. But, in another laptop (with same screen resolution), it shows the hat a little bit more to the right, like that:
And this behaviour continues in my cellphone and in another computer that I tested.
Why this happens and how can I solve this?
I'd prefer not to have the image in the HTML at all...it's styling so it should be in the CSS.
So, I use a span to wrap the letter to receive the hat, give it a class and apply the image as a background to a positioned pseudo-element.
By sizing everything in em the hat size will be dynamic to the text size.
.title-bla {
font-size: 24px;
margin: 0;
}
.large {
font-size: 72px;
}
.hat {
position: relative;
}
.hat:after {
content: '';
position: absolute;
top: 0;
left: 0;
margin-top: -.25em;
width: 1em;
height: 1em;
background-image: url(http://b.dryicons.com/images/icon_sets/christmas_surprise_four_in_one/png/128x128/santa_hat.png);
background-size: cover;
transform:rotate(15deg);
}
<p class="title-bla">blablabla<span class="hat">u</span>
</p>
<p class="title-bla large">blablabla<span class="hat">u</span>
</p>
Then you can adjust either the margins or the positioning values to nudge it into place to suit...even rotate it to a jaunty angle. :)
First, you want to absolutely position from right, not left, because your letters may not be exactly the same in different devices. Even with a web font, the displays vary slightly for each browser with letters.
Second, if you want it very exact then you need font-size and line-height in px or rems. 170% may be slightly different depending on the default font size for various devices. Additionally, sometimes mobile devices adjust font size on short or long paragraphs.
This Fiddle should help: https://jsfiddle.net/cjc5myde/1/
#title-bla {
position:relative; top:-2px;
display:inline-block;
margin-bottom: -5px;
font-weight: bold;
font-family: 'Open Sans',sans-serif;
font-size: 28px; line-height:38px;
}
#img-hat {
transform: rotate(25deg);
position: absolute;
top:0; right:-25px;
height: 23px;
width: 37px
}
To avoid this kind of issue I truly recommend you to use a CSS reset like normalize.css which will make browsers render all elements more consistently.
One way to get the result that you want is trying something like this:
<h1 class="title">Blumenau <i class="hat"></i></h1>
Use your icon/image with position: absolute within a parent element with position: relative so you can control more precisely where your icon should appear. You can change the icon position by change his top/right or bottom/left declarations.
/* Just to put away from the border to this example */
body {
padding: 100px;
font-family: sans-serif;
}
/*
To avoid that margin and padding to be consider on the width and height set
*/
* { box-sizing: border-box; }
/*
Parent
*/
.title {
display: inline-block;
position: relative;
font-size: 32px;
}
/*
Icon/image
*/
.hat{
background: url('http://s23.postimg.org/os0nl4rrr/rsz_hat.png');
transform:rotate(15deg);
top: -2px;
right: -9px;
width: 35px;
height: 19px;
}
/**
* Icon/image position
*/
.title i {
display: inline-block;
position: absolute;
}
See it in action on JSFiddle.
If you put the img tag inside the p tag, it will automatically be placed at the end of the text. From there, you can just position the hat relative to its original position. You're probably going to need to tweak the left value a little.
<p id="title-bla">blablablau<img id="img-hat" src="hat.png"></p>
#img-hat {
transform: rotate(25deg);
position: relative;
left: -20px;
height: 23px;
width: 37px
}
Different machines have different resolutions so their response in how they handle images and text with are displayed differently. This is as expected. Basically a browser will attempt to readjust the website to fit the viewing device.
That being said have you tried adding a z-index to your img-hat. I personally do not use z-index often but in situations like this it could be helpful. Another option have you tried relative positioning?
Different browsers have different default padding and margins that they resort to when our styles aren't applied. Sometimes, it's best if you drop all of that to 0.
Start your css file with
body {
margin:0;
padding:0
}
Check if it works
I have a weird problem whit my css and I cannot find a solution on the net…
I have this css for my “submenu” of the navigation bar on this site: http://ahornung.tk when I look at the submenu in every browser except Safari it needs a margin-top: -43px; for it to look ok but in Safari it does not…
Does a css detect web browser and ignore css if Safari rule exist?
.submenu {
position: absolute;
z-index: 1000;
display: none;
left: 100%;
margin-top: -43px;
border: 0.5px solid black;
}
Update:
In Safari it looks good whit out margin-top: -43px;...
Difficult to tell exactly what is going on but rather than using margin-top try using top:0 and adjust as required.
I am having cross browser problems with this site, can someone explain to me why it's not working in Firefox but does in google chrome please?
When an image is clicked, the text is not positioned correctly in Firefox
http://dl.dropbox.com/u/2306276/problem/index.html
I think it has something to do with
display: table;
but I do not know why.
thanks
Change these bits of your CSS:
div.container {
height: 215px;
line-height: 215px;
width: 215px;
text-align: center;
}
div.child {
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
It's normally safer to avoid display: table-* where possible.
You're seeing https://bugzilla.mozilla.org/show_bug.cgi?id=10209
It's also fixed in Firefox nightlies; the fix will ship in Firefox 10.
try to set "position:relative" it may work