I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
Related
For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
First time I've ever noticed this but is probably an easy one. How come IE and chrome give different heights to fonts? What are the best practices to combat this? This is messing up my header layout, I'm trying to get it to look the same on all browsers.
The code to produce Img:
<html>
<head>
<style>
body{margin:0;}
div {
margin-top: 5px;
font-size:16px;
}
.c1 {
font-family: Arial;
background: blue;
}
.c2 {
font-family: Lucida Sans Unicode;
background: red;
}
</style>
</head>
<body>
<div class="c1"> My Text 1 </div>
<div class="c2"> My Text 2 </div>
</body>
</html>
Edit: - Additionally
Here is an image of the text laid over one another. The text height in pixels is the same in each but the problem seems to be that they don't both use the same margin/padding(whatever it is) at the top and bottom of the text.
Have you tried setting defaults for the webpage?
This problem actually looks like it is line-height.
Browsers tend to render things differently from one browser to the next. Try setting defaults.
Line-height actually changes the size of the line the text sits on. Might be padding in this case...
line-height
margin
padding
font-size
Theres a lot of defaults you should/could set. This does not ensure the same look from one browser to the next. It does help alot though.
Good luck!.
It's only because you haven't set a font-size, so it uses the default size of that browser. I tried the code and had the same thing, but after setting a size it didn't show up anymore.
div {
margin-top: 5px;
font-size: 30px;
}
And just for your knowledge, you can use rem to set size by default browser size, like this:
div {
margin-top: 5px;
font-size: 1.5 rem;
}
And that gives you 1.5x the default size of the browser.
Update
Problem seems to be in line-height, which you should set for the divs. It could also be the padding of the divs. Try setting those and I hope it helped. If not then try setting div display: block.
I have discovered an inconsistency in the way Chrome adds padding to span tags. When using a simple span tag with a small font-size and a text, the padding above and below is larger than in Internet explorer. When using a large font-size the padding is the same.
This can be tested with the following code/jsfiddle
<span>Testing A Text</span>
<span>Testing A Text</span>
body
{
font-family: Helvetica,Arial,"Sans Serif";
font-size: 10px;
}
span
{
border: 1px solid red;
}
span:last-child
{
font-size: 200%;
}
(Can be previewed here: http://jsfiddle.net/gR9em/5/)
Of course, this can be solved by conditional CSS or using different fonts but that is a thing I would like to avoid if possible. This might be "Arial" -related... However, could anyone explain this and perhaps provide a solution? Or is this a known browser CSS "bug"?
Example with image here:
I don't believe the issue is related to padding, but rather line-height.
Example with correct padding: http://jsfiddle.net/qh3aY/1/
Ideally you would set up the line-height on the <body> but I wanted to follow the OPs markup.
IIRC, <span> elements should always be inside another element like a <p>.
I have tested the jsFiddle again in Chrome and it seems like the padding below the text has disappeared and the padding above the text is less than it was when I posted this issue. Maybe something was updated in Chrome.
I guess the line-height should ideally not work differently between different browsers...
I have a simple <input type="text"/> styled with the following:
font-size:1.5em;line-height:1.5em;padding:.6em .4em;
It displays perfectly normally in Chrome, Safari (i.e. Webkit browsers).
However, we arrive at Firefox, and this happens:
As you can see, Firefox decides to cut off the size of the font at a certain height. Why is this happening? This problem occurs even if I remove the padding from the <input>.
Note:
It might help to know that the additional styles applied to this input are the default styles used in Twitter Bootstrap v.2.0.
Here's a JSFiddle, with the exact problem I'm describing:
http://jsfiddle.net/xxepX/
Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.
This helped me in a similar case:
input.with-fancy-styling {
box-sizing: content-box;
}
I had this problem also, and wanted to share my fix.
First, be sure you have the proper doctype declaration, like so:
<!DOCTYPE html>
<html lang="en">
Even with that, I was getting minor trimming of the lower-case j, g, and y.
I inspected and found this style on the .form-control class:
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-box box sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
.form-control {
padding: 5px 12px;
}
And it solved the issue.
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
or see the live demo:-
http://jsfiddle.net/xxepX/2/
UPDATED
please check your updated css i have added line-height & height in your css and removed the padding.
.huge-form input, .huge-form button{
font-size:1.5em;padding:0;
line-height:31px;
height:31px;
}
or you can see the live demo:- http://jsfiddle.net/xxepX/5/
I too tried the technique of increasing 'line-height'. But it makes the text too long in height. Replacing 'line-height' with 'height' solved my issue in FF and chrome, without making it too long in height.
With css you should not use padding for an input box, for indentation use text-indent instead.
Alright,
I feel dumb asking this but I am having issues with a stylized anchor tag and displaying both a repeating background image and text in IE7/8. My code works fine in Firefox, IE9, Chrome, and Safari but in IE7/8 the text will not show up.
My PHP is outputting something like this:
<a class="anchorLink border-radius-5 anchorButton" href="#anchorPanel2">Would you like to know more?</a>
My CSS for this element looks like this:
.anchorButton {
background-image: url("./images/button-gradient.png");
height: 52px;
background-repeat: repeat-x;
background-color: transparent;
background-position: 0 0;
float: left;
line-height: 52px;
font-size: 1.4em;
color: #fff;
border: 3px solid #a8a8a8;
margin-top: 10px;
padding: 0 15px;
z-index: 900;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #fff !important;
text-shadow: -1px -1px #707070 !important;
display: block;
}
To see what I am talking about you can visit: dtelepathy.swampedpublishing.com. If you look at the site in Firefox and IE7/8 you will see that the Orange 'buttons' that I made out of anchor tags do not show the text in IE.
I am willing to give whatever a shot as I am REALLY unsure what is going on here.
I don't have IE7/8 to test, but this sounds suspiciously like a variation on the IE peek-a-boo bug. Maybe some of the changes suggested around the interwebs will help.
I've just written a guide for you. Make sure that you follow these steps, and -perhaps- edit your question to be more specific. Currently, we can only guess and find the problem by trial&error.
Steps to debug your CSS code (yes = next step, no = see below):
Ensure that the problem is caused by CSS
Disable JavaScript. Does the problem persist?
What's the source
Temporary disable all specific selectors, eg: <a class="foo bar"> > <a x-class="foo bar">. Did the problem disappear?[2]
Which selector?
Add all selectors, one by one. When a newly added selector is causing problems, disable all selectors, and use the same selector to make sure that the problem is caused by this selector only.
Which property?
Disable all lines, and add enable a few lines (block) of the CSS code. When the problem shows up after re-adding a block, remove the just-added block, and add the properties back, one by one.
Cause found
Use Google, Stack overflow or the Mozilla Developer network to find documentation about the property. Perhaps, you've used the property in a wrong way.
[2] The problem is caused by a tag selector, or an inherited style.
I can see the text in the orange buttons just fine in IE8 on Win7.
Your hover for the border color doesn't work on them though in IE8, but that is because of the VML used for the rounded corner effect. I have experimented a lot with VML and it causes tons of problems for element layouts.
I would check to see if removing the border-radius-5 class fixes the problem. That way you can see if that is causing the text problem you are seeing.