I've added a new link to my navigation bar, and for more visibility, have added a "New" marker to this link for improved visibility. This "New" marker is 0.8rem compared to the link's text being 1rem. I mention this because if the "New" marker is changed to be 1rem, then this issue does not occur.
The issue itself:
When hovering over the "Order Now" link (see Codepen), you might notice that the container height is stretched by maybe a pixel or 2 from the bottom - it's somewhat hard to see in this example but tried to make the colours as obvious as possible. It's most obvious when looking at the blue underline that there is a small gap between the active link (About us) and the hovered link. This only happens when hovering over "Order Now", and as mentioned, is rectified when setting the font size of "New" to 1rem (or removing "New" completely)
Codepen with minimum example: https://codepen.io/ftahir192/pen/PoPXjEv
This is the css for the "New" marker:
.new-marker {
color: red;
font-size: 0.8rem;
}
There's nothing special going on with that aside from the differing font size. I've tried:
Setting absolute positions on the container
Setting relative positions on the links itself
Playing with line-height - this fixes it but seems more of a hack.
It's a minor nuisance but still a nuisance nonetheless and something I haven't been able to get to the bottom of. Any tips would be very much appreciated
You can fix that by adding line-height its not a hack, the <i> tag inherits the <a> tag line-height attribute value (which is 60px), line height will fix it for you:
.new-marker {
color: red;
font-size: 0.8rem;
line-height:1rem;
}
setting the min-height:70px is the reason for this issue. My suggestion is you should change to height: 91px or any other hardcoded value. and avoid using min-height.
Related
The logo element on the website:
puerteaspecialists.co.uk
was originally at the front. I didnt even update anything and one day i check the site and now the top 3rd is hidden behind the nav bar.
Ive tried z - index and have kinda worked out why this isnt working, but also havnt actually found the solution.
Is there a way to bring this to the front or anyway to show the full image via css?
Thanks!
A simple solution is to remove the solid background of the uppermost navigation bar...
.top_nav_out {
background-color: transparent;
border: none;
}
The problem is that class name .top_nav_out in your top navigation block applies a high z-index which causes the top-most nav block to overlap the lower navigation block (.top_nav) which hides your logo partially.
remove property:
z-index
from class:
.top_nav_out
and your logo will be displayed in full.
From what I have seen, the z-index property is redundant anyway in that class (layout stayed in good shape after removing it)
Hope it helps a bit!
Given an element with a certain left and right padding, it seems to not be possible to set its width to anything less than the sum of the two.
A quick Google search would have you believe salvation lies with the box-sizing property, and while that would indeed make sense (given how the box model works), it surprisingly enough does not change anything.
What have I missed?
In this minimal working example, the red element should not be visible. I'd like to avoid cluttering the HTML with extraneous elements if possible.
The red area appear because of the text inside it. you have 2 options either to remove the text or to set the font size to 0 like that:
#c
{
background: red;
width: 0em;
font-size: 0em;
}
Hello I have problem which you can see here: http://adrianwajs.pl/monika/. "coming soon" sign when you hover over h2,which wraps it you can see that, in firebug you can see that letter g doesn't fit the height of h2 element. I have seen it many times but I can't find solution for this, maybe someone has?
First of all your h2 says 'Comming Soon' Instead of 'Coming Soon'
I don't see a problem in Chrome, IE, Firefox.
There are two things you can do:
More padding on your h2 tag. for example h2 { padding: 30px; }
A line-height of for example like line-height: 1.5;
In general, a glyph may well extend below the bottom edge of a line box, even when text is set solid (line height equals font size). This is up to the font designer. If this causes a problem, use a larger line height or a different font.
On your page, the descender does not actually extend that far, as you can see by drawing an outline for the heading, for example. However it almost extends to the bottom of the font and far below the baseline; this is not uncommon in fonts that imitate handwriting.
Update: The features of the Pacifico font used on the page cause line boxes containing text in that font to have a largish height, larger than line-height. On the page, in Firefox, the span containing “Comming soon” is 128 pixels high for such reasons and thus extends past its container, the h2 element.
Line box heights are calculated by browsers on the basis of height requirements, including font properties, and there is no direct way to control this. You just need to live with it and provide sufficient spacing with margins or padding.
I'm trying to implement this tutorial, and it works well. However, I'm trying to use a Cufon font in my menu. The font that I'm using is too small, so I need to increase the font size.
But in this case, the animation is activating when the mouse is in between two menus because the original font needed more space. (30px Arial is much bigger than my font in 30px.)
How can I restrict the hover area only to that area where the "label image" is?
Not sure if I understand your problem correctly (example would be nice), but try to set the line-height: __px; property to exactly the amount of clickable space you want.
Or make the element containing the text a display: inline-block; so you can set the height: __px; and make sure the font is not blowing it up by forcing overflow: hidden;.
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.