I'm working on a new site but there is a small design thing which I just can't get my head around.
Basically, I'm creating a site which users are able to upload funny pictures to. Although the area where the picture is displayed there is a 3px gap underneath. Here's a link to a screenshot of what I mean, dead link.
I've tried a ton of things but nothing seems to work. If anyone can suggest any solution, please do.
Thanks.
It's due to the default vertical-align value of images. They are baseline. Change to top or bottom and it will go away.
img{
vertical-align: top;
}
The extra space is the area below the baseline which is for letters that hang below like y or g.
Related
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
I am using wordpress and I can only add Custom CSS to it. I want to push it a bit more on the right side so that my text (article) width can increase.
Here is my website, http://www.defensionem.com/schwellenpflug/
http://www.defensionem.com.
Notice the side-bar on the right, which has a link for Facebook. I want my content to appear in the "middle" of the screen hence I added a bit of padding on the left. But I find I am unable to increase the width of the text.
How do I move the side-bar a bit to the right?
Yes I did try, but nothing worked.
Also, how do I hide the the paragraph tags?
http://www.defensionem.com/profile/Renaud-Mayers/
I typed that info in the Wordpress column. (I cannot make a new post for 90mins so I added it here. Sorry)
The easiest way is just to do lower the margin-right value:
.content-wrapper__inside.sidebar--true.sidebar--right .main-content__inside
{
margin-right: 180px;
}
Be aware that the styles are for a responsive site. So you might have to change it for other screen sizes as well.
it looks like you put your paragraph tags inside of the quotes:
"<p>Currently working on behalf of the Belgian Ministry of Defence, thanks to my high knowledge in WWII and other areas. Working in two WWII era fortresses still belonging to the Army.</p>"
just move them to the outside, or perhaps get rid of them altogether.
Issue only relevant for Safari browser.
A picture is worth a thousand words, so here's a screenshot:
As seen, the problem is with a bottom border extending too far right. This seems to be an issue with the original template. Yes, I've contacted the designer, but it appears they're of little help (even after purchasing the $10 "quick help").
Interestingly, when viewing the demo with their global site navigation, as seen here the border is contained correctly, however, removing the top black navbar will produce the issue.
How can i fix this? Is there someway to implement the black navigation, but do so invisibly? Can I fix this with css? Please Advise?
In your screenshot I can see you have padding: 50px 100% on your .txtabs-content div, the 100% could be adding the unwanted padding, this should probably be padding: 50px auto.
Although, you should post some code and if possble, a JSFiddle so this can be verified as the issue.
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.