The design of the site I'm working on calls for underlines squished right along the bottom of the text, literally touching the baseline. I'm absolute positioning an after pseudo element with a border-bottom to accomplish this, and I'm seeing a strange inconsistency between the box height in Mac Chrome and PC Chrome.
Notice the "Visit" link in the top right corner. This screenshot is Mac Chrome and it's how it is supposed to look. The dev tools claim the box height of the <a> tag is 30px.
Look what's happening for the same site in PC Chrome. As you can see, there's a small gap below the text and the underline because PC Chrome thinks that same exact element has a box height of 22px.
The CSS for the underline:
a {
position: relative;
&::after {
content: '';
position: absolute;
top: 1em;
width: 100%;
left: 0;
border-bottom: 4px solid;
}
}
As you can see, the 1em that positions the underline lands in a different place on the two different OS's.
What's going on here!?
Here's a round-up of things I've checked:
I exported the woff/woff2 files using FontSquirrel with the "Match X-Height" option turned on to "100%"
Both browsers have the zoom set to 100%
The calculated font-size of the element is 22px on both.
The calculated line-height of the element is 22px on both.
Both elements have box-sizing: content-box.
If the box model is truly the issue, you can set the box-sizing attribute on your a tag and ::after element to force consistent rendering of the box-model, then adjust your variables as necessary.
box-sizing: border-box
Related
I've created an 'underline' animation that uses an ::after pseudo-element underneath the link. Here is the code for the link and the pseudo-element:
Link
a {
position: relative;
}
::after
a:after {
content: '';
display: inline;
position: absolute;
height: 2px;
width: 0%;
background-color: #ce3f4f;
left: 0%;
bottom: 0px;
transition: all 0.2s ease;
}
a:hover::after {
width: 100%;
}
This all works fine when the link is on a single line, but if the link flows onto the next line then it only fills across the bottom of the first line, as seen here:
http://i.stack.imgur.com/7SX7o.jpg
If I inspect the element then it appears that the issue is not solvable, as the browser (in this case, Firefox) isn't selecting the entirety of the wrapped element:
http://i.stack.imgur.com/342GH.jpg
Is there a way of solving this purely with CSS, or is it a problem with the way the browser renders the objects? I have played around with a lot of white-space, display and position configurations but to no avail.
Here's an example of the behaviour:
https://jsfiddle.net/57Lmkyf4/
This cannot be done with CSS. (I've implemented it using JS for links that wrap over not more than 2 lines: https://jsfiddle.net/6zm8L9jq/1/ - you can resize the frame to see it at work)
In my Chrome (39.0.2171.95) the underline under a wrapping a doesn't work at all, while in FF it displays like in your screenshot above. Primarily this is because your a element is inline (default), and when it wraps, any pseudo/child elements that depend on its width get 0 width in Chrome and the element's width on the first row in FF. Inline elements don't have control on their own width/height properties (eg, you can't set a width:100px on them without changing them to block elements), and this also affects any absolutely positioned elements that depend on them for width/height.
If you call the window.getComputedStyle method on the pseudo element in FF and Chrome, like:
var a = document.querySelector('a');
a.onmouseover = function(){
setTimeout(function(){
var width = window.getComputedStyle(a,':after').getPropertyValue('width');
console.log(width);
},300); //timeout so that animation to 100% width is completed
}
...in chrome you will see 0px while in FF you will see 100% - and neither will span to actual 100% of the parent. If you added a child element (eg a span) to a instead of a pseudo element, you could investigate the child's actual width after mouseover by calling getBoundingClientRect().width on the child, in which case again, in chrome you would see 0px, and in FF the width of the part of the parent element falling on the first line.
You can change the a element to display: inline-block and it will work, but it will obviously no longer wrap.
I have a DIV with position absolute that contains an INPUT field, i need this input to be centered vertically and horizontally inside the div which i have accomplished with display:block and text align, the problem is that the width property is not working the same way for IE (10 and below), the parent div have the proper width in chrome and firefox but a totally different one in IE10,9 and 8.
Just in case this information is relevant, the parent div is inside another div with position relative. I know it sounds like a question from back to the future but i was really surprised to notice that that im still having this issue after normalizer, etc.
Here's the code
HTML and CSS
<div>
<input type="text" />
</div>
div {
position:absolute;
background: blue;
width: 180px;
padding:8px 0;
display:block;
}
input {
border-radius: 5px;
margin: 0;
height: 20px;
position: relative;
display: block;
margin: 0 auto;
}
The problem is caused by the em units.
If you compare IE and Chrome you will see that the green bar in the menu is more to the left in IE than Chrome. That is because there is a pixel difference here and there in the font-size.
They are calculated differently. I think IE approximates differently.
Maybe instead of trying to make the 2 browsers look the same, you could make it look good on both browsers. Users will not know.
Use either a CSS file that gets added in IE browsers, or detect the browser with javascript and add classes on body (similar to modernizr), or use CSS hacks.
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
I'm trying to position a check-mark next to a menu item by doing the following:
#userInfo div.dropDownContent p span
{
position: absolute;
margin-left: -20px;
}
A span inside a paragraph is absolutely positioned in order to preserve the centering of the menu item's text, otherwise the check-mark is centered along with the text and it makes it look bad.
As you can see in this jsFiddle, the check-mark looks ok in your average Windows browser, but Safari on Mac and iPad (perhaps even Chrome on Mac) shows the check-mark outside the menu, and there's nothing I can do to make it move even a pixel.
Does anyone know what I'm doing wrong? Is it a webkit bug? Thanks.
I do see that odd behavior in Safari, and I really can't explain why it's in that browser only.
That being said, this updated fiddle should show you what worked for me.
Basically, instead of positioning the span absolutely, I used relative positioning and set it to left -20px like so:
#userInfo div.dropDownContent p span
{
position: relative;
left: -20px;
}
I am working on this site. When I zoom in the browser (ctr +/-) the elements at the top change position (the menu, and featured slider). Is there a way to make them stay in the some position no matter what the zoom.
Here is a link to the site - http://www.independentlynew.com/dev/5church
it seems like the main menu container is overflowing the logo container, causing it be pushed upwards. this is likely to be caused by those containers having an access margin or padding, fitting exactly into their wrapper, and the browser's rounding method used during the zoom.
try and remove the left padding from the #menu container:
#menu {
float: right;
background: url(images/left-menu-bg.png) no-repeat top left;
/* padding-left: 12px; */
height: 48px;
margin-top: 40px;
}
The browsers often have poor zooming algorithms that lead to rounding errors manifesting themselves when zoomed in or out.
I believe this is more of a user agent issue, as the iOS version of Safari has no issues performing zoom, while other browsers do.