I've designed a 3 column site and I wanted to place a thin horizontal line between each column. I did this quite easily and got the exact height I wanted in Chrome, I then opened it in Firefox and the horizontal line was about 10px shorter, the same thing happened with IE9.
Is this normal or am I doing something wrong? Is there anyway to fix this or do it better. This is the css I used, the html was just a div:
#horizontal-dividing-line-news-arabnews {
border-left: solid 0.1em #0099FF;
height: 31.8em;
float: left;
color: #FFF;
margin-top: 7.3em;
}
thank you!
You're using em ("ems") here as the unit for the size.
"Ems" are proportional to the current font-size and browsers might not all have the same default font-size so this is why the size vary.
You'll want to use px (pixels) for this.
Related
When I zoom out on Chrome, the content of my website gets cropped off. Here is a screen shot of what I mean.
I can't find a solution to this. Is there even one? I read about changing sizes to ems and tried that but that didn't fix it. Hope someone can help.
This is the link I'm talking about but there are more pages with the same issue http://wardrobeicons.com/the-icons-update/elle-ferguson-perfect-wardrobe-5/
It is this part that causes the crop I think.
#content.weekly-update #magazine {
border: 1px solid #ccc;
height: 580px;
overflow: hidden;
}
As a quick fix you can increase the height value too 600px or more.
Or drop the floating layout, use CSS table layout instead for example - it has one of the greatest features of equal height on the cells.
I have a page which contains a table.
The <tr>'s have a border-bottom: 1px dotted black;, but as you can see from the image below, they are rendering quite strangely. Does anyone know why this might be?
Relevant CSS
.basket-item{
border-bottom: 1px dotted black;
border-top: 1px dotted black;
padding: 10px 0;
}
.basket-item td:nth-of-type(2){ //included this as it seems to be the second td in every row
padding: 25px;
vertical-align: top;
text-align: left;
}
HTML structure is a standard table, <tr>'s have a class of .basket-item
Thanks in advance for any help
Extending from comment:
This problem seems to only/mainly affects Chrome (or WebKit), and after some unsuccessful trial, I finally come up with this:
add
h4 {
margin-bottom: 1.5em; /* or whatever length that ends in an integer pixel */
}
The reason for this, is that you have specified
font-size: 14px;
And Chrome has an internal CSS that looks like:
h4 {
-webkit-margin-before: 1.33em; /* works like margin-top */
-webkit-margin-after: 1.33em; /* works like margin-bottom */
}
That makes a floating point number pixel (14 * 1.33 = 18.62), and (probably with other elements below, especially float: left elements), Chrome seems to have the need to "calculate" the remaining space height for "placeholder", and finally ends up with a floating point number that is "very close to 200px".
Observation:
In my Chrome, the <td> should be 250px height (including padding). That <td> has padding: 25px, so the "inner height" should be 200px, but with default style, in developer tool, Chrome shows that the <td> is actually 199.609375px height. Overwriting the margin-bottom of h4 to an integer "normalized" the inner height back to 200px.
It's obviously the table display ; if you change your td or your tr to another display (like inline-block), it disappear, but your layout is broken.
It also seems to depend on the zoom level of the viewport : if you scale up, you can make the weird border disappear (both top and bottom border) : the height of tr and td switch from 250px to 251px sometimes.
With so few information, I can't deduce another parameter to change.
Without any actual solution, consider changing your display type, for either tror td, and adapt your layout to fit you requirement.
I'm using GWT's StackLayoutPanel and trying to round the corners of its headers by applying border-radius attribute in the following CSS rule:
.mm-StackPanelHeader {
padding-left: 7px;
font-weight: bold;
font-size: 1.4em;
width: 200px;
border-radius: 5px 5px 0px 0px;
background: #d3def6;
border: 0.5px solid #bbbbdd;
}
When collapsing the header items, the borders don't cover over each other completely, showing ugly white cornered ends.
How to fix this?
Here's the output's snapshot, for a reference.
Assuming you're going for the old widgets' look n' feel, achieving the exact same result will inevitably involve replacing images and messing with the widgets' layout properties (e.g applying negative margins, altering offsets).
Having said that, I managed to get a quick CSS-based solution that seem to target your needs, and is free of further manipulations. I'm sure a more accurate solution is available, as this attempt is far from perfect, but it should provide you with a good starting point.
Abstract
To simulate the old widgets' looks:
Round up the top corners for the item headers.
Apply a background color to the underling container, to avoid those ugly white corners.
Use top round corners on that container as well, to avoid ugly blue corners on it as a result of the background color applied.
Reset the bottom padding of the header items to re-center their content.
Implementation
Add the following rules to your stylesheet:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
background-color: #D3DEF6;
border-radius: 5px 5px 0 0;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
padding-bottom: 0;
}
Illustration
Here's an snapshot of the final result, as created by manipulating the CSS properties on the GWT showcase live example:
Well, StackLayoutPanel was a definitely a newer version than StackPanel.
But I used the latter in this case because there was no other way, and it worked like a charm!
Thanks to all!
The problem is that Firefox and WebKit based browsers seem to align text vertically in different ways when contained in an element that has an even height/line-height and the font-size is uneven (or vice versa). I have looked at some similar threads, but I haven't really seen any great explanations for my question.
Consider the following example:
.box {
font-size: 15px;
font-family: Helvetica, Arial;
background-color: Blue;
height: 20px;
width: 60px;
color: White;
line-height: 20px;
}
<div class="box">
A text.
</div>
Is there any way to fix this? Is there any "text-align" property or something that I missed?
This is due to differences in how browsers handle subpixel text positioning. If your line-height is 20 pixels but font-size is 15 pixels, then the text needs to be positioned 2.5 pixels from the top of the line box. Gecko actually does that (and then antialiases or snaps to the pixel grid as needed on painting). WebKit just rounds positions to integer pixels during layout. In some cases, the two approaches give answers that differ by a pixel. Unless you're comparing them side-by-side, how can you even tell there's a difference?
In any case, making sure that your half-leading is an integer (i.e. that line-height minus font-size is even) will make the rendering more consistent if you really need that.
This is browser rendering issue. Use line-height 1px less than the given height, for example:
.box
{
background-color: Blue;
color: White;
font-family: Helvetica,Arial;
font-size: 15px;
height: 18px;
line-height: 17px;
width: 60px;
}
If you are looking for a way to do an exact vertical align, check out Stack Overflow question Problem with vertical-align: middle; - I described a solution there.
If you want an answer why Firebug and Chrome display this differently, this will be a bit more complicated. Line-height alignment is based on font-line rendering and fonts can be handled in a very different way across the browsers. For example, font-smoothing and font-weight can really mess with your page.
Also, are you using CSS reset for this page? It contains font related adjustments as well, and it may help you to overcome cross-browser issues. Refer to CSS Tools: Reset CSS.
Ugh, terrible but true! I just ran into this trying to create tiny count bubbles on an icon - so small that I had to get right next to text so every pixel counted. Making the line-height 1x less than text-size leveled the display field between FF and Chrome.
Can someone help me vertically center text inside a div, consistently across browsers. In IE9 ONLY, text is one pixel closer to the top of the parent div. All other browsers render the text as expected.
Important: I'm using standards-mode:
<!DOCTYPE html>
Here's some example HTML:
<!DOCTYPE html>
<div style="width:100px; height:16px; font-size:13px; font-family:Arial; line-height:1.2; background-color:red; color:White; vertical-align:middle">
<div style="line-height:16px">XXXXXXXXXX</div></div>
Bit late to the party. However, I came across a similar issue recently. After some digging about I came across this article: Sub-pixel Fonts in IE9.
I think this is directly responsible for the issues of font vertical alignment in IE9. Unfortunately there doesn't seem to be a fix as this is a forced option or customisable by the user (not likely to happen).
So it looks like the only solution is to increase the line-height as mentioned previously.
You might want to look at the following:
CSS: Standard (dynamic) way to centralize an element in the y-axis
There are some useful references that will probably still apply to IE9.
Based on your code: you are setting the line-height in more than one place. Try removing the line-height:16px property in your inner div, in fact, get rid of the inner div since vertical-align will only affect inline elements.
Also, make sure your container height is big enough to hold the text (1.2*13) otherwise you may get into issues related to different fonts or different default font-sizes across browsers.
Probably what is happening is that 1.2*13 = 15.6, and depending how the browser rounds off floating point numbers, that could account for a 1 pixel shift. Set line-height to 16px instead of 1.2 and see if that works.
Second Try:
.outer {
background-color: red;
color: white;
width: 100px;
height: auto;
padding-top: 0px;
font-family: Arial, sans-serf;
font-size: 13px;
line-height: 5.0;
}
applied to:
<div class="outer">XXXXXXXXXX</div>
If anything will fix this, make the line-height large enough so that there is some space above/below the lettering. Set the container height to auto and let the line-height control the height of the container.
There is an answer to this question here:
http://www.sitepoint.com/forums/css-53/text-alignment-w-ie9-standards-mode-745359.html
I had the same problem with the 1px off text rendering, and it would only appear with font size 13px in IE9.
adding the css style
{
height: 16px;
line-height:16.99px;
}
to the surrounding div fixed the problem for me on IE7-9, FF and Chrome on Windows.