I have one question. I want to know how to solve the following example:
I create html page with "div" tag and in browsers looks different...
CSS code:
*{
margin:0;
padding:0;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
#font-face{
font-family:myFont;
src:url('PTN57F.ttf');
}
body{
background:#f5f5f5;
}
.content{
width:200px;
height:30px;
background:#EEE;
border:1px solid #CCC;
margin:auto;
margin-top:40px;
font-size:16px;
font-family:myFont;
text-align:center;
}
Browsers different:
Problem is in font weight and padding. Is there any solution on this?
Different browsers/systems have different rendering engine, hence the output rendered by them will be different. And no noone serious about webdev is going to complain about it. That's just the way it is - deal with it :)
I would explicitly set two things via css and it should give you a much closer cross-browser experience:
font-weight: 300 //<-- this can be 100, 200, 300...900
line-height: 1.5em // <-- this is em or px and should be roughly 1.5x your font size
You can use a normalize.css file to make browsers display everything as similar as possible.
http://necolas.github.io/normalize.css/
i think problem is in screen resolution, 1000px in typical display would be N santimeters, but in high resolution displays, it would be N - x, where x is screen resolution difference, thats why your margin-top: 40px renders differently, try to use margin-top: 5%
Related
This is the third time I have faced this problem.
I don't know what is wrong.
Here are two pictures of how it looks like:
On desktops:
On mobile devices:
As you can see on mobile devices text is not aligned center vertically.
Again this problem is only visible on mobile devices.
What is the problem? What did I miss? This problem is also visible in inputs.
I am using the following code for the buttons:
.button
font-family: 'Gotham Pro', sans-serif
font-size: 14px
color: $color-text--button
padding: 10px 15px
text-transform: uppercase
background: $color-button--default
border: 1px solid $color-transparent
Please note, I use padding for setting height of buttons
UPDATE
I have just tested in mobile android Firefox browser, everything works just fine the issue only with Chrome
There is no line-height specified in your code.
Try setting a specific line-height. In addition I suggest, that you center your text via line-height and not via padding. Set a line-height with the same height the button has.
CSS
.button {
height: 40px;
line-height: 40px;
}
This works of course only for single line texts.
Also have a look at this SO question
Did you specify a media query SPECIFICALLY for mobile?
You may need to add
// you can use any other value of screen width mobiles use like 640, 768
#media (max-width:480px){
line-height: 15px; // The line height you want to show on mobile
}
Not all browsers have a default. Almost always I make a habit of setting styles on the body element
body{
font-size: 100%;
line-height: 1.333%;
}
to take care of things like this.
I had to work with a fancy font today and I noticed that it has different line-height rendering on chrome mobile device and chrome desktop mobile emulator (devtools). Which is apparently a bug to be reported for either dekstop either mobile chrome. Changing line-heights is the option to fix but cumbersome if you have many elements. After some digging I figured out this properties
ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */
Futhermore as I needed font change for mobile chrome only I tried media query and it worked.
#media (max-width: 1000px) {
#font-face{
font-family:'FancyFont';
src:url('fonts/FancyFont.ttf');
font-weight:400;
ascent-override: 92%;
}
}
I'm making a site and I'd like it to scale properly on all devices.
On my 1080x1920 screen, it works perfectly, but on thinner devices the page does not look very good.
The white space is where the header text should be.
My code can be found here:
.header {
height: 80px;
background-color:#00117D;
background-size:100%;
color:#FFF;
font-size:30px;
font-weight:bold;
line-height: 80px;
padding: 0 30px;
border-bottom-style:solid;
border-width: 2px;
border-color:#FFF;
font-family:"Segoe UI";
}
.header p, .header a {
float: left;
margin: 0;
margin-left:30px;
color:#FFF;
text-decoration:none;
}
https://github.com/MooneyDev/project-Mooney
What I have done in previous projects it used em font size values on all properties but the body, and then used media queries at various stages to change the px based body value as required. This should catch all other values and keep them proportionate.
I would suggest you look into using bootstrap as it should really speed things up and take away a lot of the pain involved in responsive dev.
I need to make a Headline with background color which is not a block(only the text-bg is colored).
Here is an image of what I have to archieve:
And here is what I've got so far:
http://jsbin.com/tiwuquze/1/edit
You can see the padding is not right and I couldn't figure how to set it.
When you play around with the padding, you will see that it will overlap and the second line is not going in like the first one.
I am happy about every hint!
Solution:
John Smith made a working example: http://jsbin.com/tiwuquze/21/edit
He used box-shadow to emulate the left padding.
UPDATE got the solution, use box shadow :D
h1 {
background-color: #FE8020;
color: #FFFFFF;
display:inline;
white-space:pre-wrap;
line-height : 24px;
font-size: 18px;
font-family:arial, sans-serif;
padding: 5px;
padding-left:0px;
box-shadow: -16px 0 0 #FE8020; /* box shadow is emulating padding liek a charme */
}
for me this looks good
http://jsbin.com/tiwuquze/21/edit
Nowadays (understanding years have passed since this question was posted), if you were willing to use experimental technology and concerned primarily with modern browsers (and could accept how it looked without it on unsupported browsers), you could use box-decoration-break.
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
h1 {
background-color: #FE8020;
color: #FFFFFF;
display:inline;
white-space:pre-wrap;
line-height : 24px;
font-size: 18px;
font-family:arial, sans-serif;
padding: 5px;padding-left:0px;box-shadow: -16px 0 0 #FE8020;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
https://jsbin.com/hadedulici/1/edit
Also, for what it's worth, box-shadow-based solutions don't seem to work for me in Firefox 55.0.3 (Windows 7) nor Firefox Quantum 62.0.3 (Windows 10) at time of writing.
Try setting a bigger padding and use line-height
example :
line-height:24px;
padding:4px;
You can do as #ReKnawn suggested increase the padding and line-height just ensure that the line height is larger than the font-size + padding x 2 since in this case both the top and bottom are padded. eg if the font-size is 16 and padding is 4px line-height must be greater than 24 to ensure reasonable space and avoid overlapping
here check this solution:
http://jsbin.com/tiwuquze/17/edit
Add a span inside the h1 element.
I search for a long and I can't find an answer :/
In Chrome (Internet Explorer, Konqueror, and many others) the h1 margin at bottom is added to .blue. However, Firefox respect the css rules properly.
Any suggestion?
HTML
<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>
CSS
.red{
background: red;
/* All this contain margins */
float:left;
/* padding-top:1px; */
/* display: inline-block */
/* overflow: hidden */
}
.blue{
background: blue;
min-height: 60px;
}
h1{
margin: 10px 0 20px;
background: green;
}
Gecko-based: [This one is the correct, I guess]
Webkit-based, KHTML-based and Trident shell:
CODEPEN
http://codepen.io/marquex/pen/fzsIk
The margin issue you are having is related with the min-height rule in the .blue div. Replace it for a height rule if it is possible to get the same result in Chrome and Firefox.
I have no idea why that is happening when using min-height though. Maybe is some kind of Chrome's bug.
Define your fonts, this is the problem, every browser have different settings for default fonts, headings (h1...h6) respectively. So the actual height of the text in h1 will be different and this is the cause for different margins at bottom/top.
As you can see, Gecko-based browser uses a sort of Garamond-styled font, all other use by default Times New Roman, of course if user was predefined the fonts for pages, sometimes everything may look the same across all browsers, example:
h1{
margin: 10px 0 20px;
background: green;
font-family: "Your-favorite-font", Times, sans-serif;
font-size: 2em;
}
RESOLVING
After a long search I reported the issue on chromium repo. And they accept it as a bug. So, if anyone wants to know the final of this history can follow the fix process here.
Thanks anyone who try to help us, but let me add that I did not believe that Stackoverflow can be able to not see an error of this magnitude. I am a little less stackoverflowita.
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.