A webpage I'm working on for a client www.afterthemagic.com (slightly NSFW) looks OK in Firefox & IE but I can't for the life of me make it look properly in Chrome or Safari. I'm trying to mess with different variables the following element in style.css, but can't seem to get it to go.
#banner-text .left span {
font-size: 96px;
font-style: normal;
text-transform: uppercase;
position: static;
}
Any pointers on how to get the "THE" text to look fine in Chrome or Safari?? Thanks!
I would argue that you're going about this layout incorrectly.
Semantically speaking, you shouldn't be combining your H1 heading with the 'begin reading' link.
Your heading, 'begin reading' and author subsections should be floated and styled independently. Otherwise, I'm not sure what you mean by 'look properly'. Your h1 heading has a font-size of 200px, and your h1 .left span has a font-size of 96px. If you're referring to the text alignment, try:
#banner-text h1 .left span {
display:inline-block;
margin:0 0 10px 0;
font-size: 96px;
font-style: normal;
text-transform: uppercase;
}
Play with the margins until you get the alignment you're looking for.
This is a good resource to better understand the CSS 'display' property:
http://css-tricks.com/almanac/properties/d/display/
Related
I have a problem with the font icon in firefox please check the Image
CSS:
[class^="icon-"]::before, [class*=" icon-"]::before {
font-family: "untitled-font-1" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
line-height: 1;
text-transform: none !important;
}
The top bar in the firefox and the bottom in the Chrome and here the Live Link
http://mohammadsamy.com/Nest/
This would be easier to answer for me if you also supplied the relevant html code in order to try and test this out, but have you considered a more browser/screen-agnostic measurement type such as vh or em? Example:
[class^="icon-"]::before, [class*=" icon-"]::before {
line-height: 1vh;
}
If that still doesn't work, you can always play with their margin-bottom or padding-bottom attributes.
Margin-bottom MDN Article
Padding-bottom MDN Article
I'm doing print layouts with HTML and CSS with AntennaHouse renderer.
A box in my content should have a left margin of 20pt on left pages and 10pt on right pages.
/* on left hand pages */
margin-left: 20pt;
margin-right: 10pt;
/* on right hand pages */
margin-left: 10pt;
margin-right: 20pt;
So the outside margin of the box should be 20pt and the inside margin 10pt.
Basically I'm looking for a syntax like this (which doesn't exist):
/* pseudo code */
margin-outside: 20pt;
margin-inside: 10pt;
Does anyone have an idea how to do that?
And if yes, is there an equivalent for padding inside/outside?
XSL-FO solutions are welcome as well, as AntennaHouse has equivalent functions for FO and CSS rendering...
If you use PrinceXML, it definitely supports margin-inside and margin-outside. I used it for laying out a novel:
#page {
size: 6in 9in;
margin-inside: 0.75in;
margin-outside: 0.625in;
margin-top: 1in;
margin-bottom: 1in
}
http://www.alecos.it/new/125027/125027.php this link is an example of my problem... I used a png 1x16 for drawing the rows... the rows are visible in the link posted... my question is:
why under IE 6/8, FireFox, Opera, Safari and other browsers the rows are perfectly aligned with the text while under IE 9/10/11 the text do not fit in the rows?
I used a simple css:
/* Style Source Code */
.code {
border-radius: 7px;
border: #6666FF 1px solid;
background-color: #FFF5EE;
background-image: url("../bkg/Bkg_116.png"); /* Horizontal Rows */
background-repeat: repeat;
background-position: 0 10px;
}
/* Style Source Code */
.xcode {
color: #008000;
font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
/* Style Div */
.alignment {
line-height: 20px;
text-align: justify;
}
Hope in workround to fix the issue...
here there is my css: http://www.alecos.it/css/alecos.css
I'm not on Windows machine right now but my guess is .xcode(line-height:16px;} would solve your problem, but I must say that this is the wrong way of creating row borders. Why not add:
.xcode td{border-bottom:1px solid #ddd;}
instead of using background image?
Firefox is temporarily outdated unti it's next update meaning that it's browser does not have the ability to process codes in the same manner as other browsers.
.alignment {line-height: 20px;}
Gets over ruled by .xcode line-height normal;
IE aint normal ;)
Besides content tages like h1, p, font all have slightly different margins/paddings around them. So a non responsive img isnt the best way to go.
Would be better if you could wrap each line with a span, div or sinces its a table a tr,td and give those a border-bottom.
Gr.
Kevin
In order to make your text inside .xcode aligned with the horizontal lines, the "code" lines must be distributed vertically. Unfortunately, It seems that you did not understand the meaning of line-height property and use the default value without considerations.
The line-height property
As you can see, the line-height property will decide how much is the distance of two lines of text. In your case, we need it to be exactly 16px inside the whole block of .xcode.
The value of normal value of the line-height property
From the W3C CSS spec, the value of normal value is defined as:
Tells user agents to set the used value to a "reasonable" value based
on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
From some online resource like this article or this page, you can see that the real value of normal value depends on many arguments like font size, font family, OS, user agent, ... Therefore, it is recommended that you should use some css normalize stylesheet to set the value of line-height correctly and cross-browser.
About your case
The quick fix here is setting the line-height inside the .xcode class to be 16px (which is the height of the of your background image).
http://codepen.io/maxwbailey/pen/nxaFr
I'm trying to get the text to center vertically. This is only important when there is white space (I.E. when the auto height would be less than min-height). How can I accomplish this? I've seen this question asked several times, but none of the answers I've yet found apply to my application.
Thanks! ^_^
Given the fact that you've set a min-height of 75px, you can just add padding of half that to the top and bottom of the text, like so:
.warning {
display:block;
font-family: sans-serif;
font-weight: bold;
padding: 32.5px 0;
/*vertical-align: middle;*/
}
.warning needs to be display: block; to accept padding, but those are the only changes that are necessary to accomplish your objective, I think. Check it out: http://codepen.io/maxwbailey/pen/qcvre
EDIT
If you want to keep the text centered until the container gets small enough that it fills the min-height, you need to use display: table-cell, like so:
.warning {
display:table-cell;
font-family: sans-serif;
font-weight: bold;
vertical-align: middle;
height: 75px;
}
http://codepen.io/maxwbailey/pen/dwfar
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.