I am sorry for all of the confusion and wrong post type. I will keep playing with it or try to get all the css in order so I can paste it correctly on here.
Thanks for the info and help that you were able to give.
Grady
I am not sure if anyone can help me but for some reason I can not figure out why my nav bar has a 'shadow' without any shadow tag. It is very annoying and I can not figure it out. I am able to change the entire navbar to the same color as the background but then it does not stand out. If you can offer me any advice or things to try that would be great!
Here is a picture of the nav during regular view and then I zoomed in and took another shot.
https://dl.dropboxusercontent.com/u/11217802/nav%20bar%20issue.png
I have tried border: none and box-shadow: none but nothing seems to remove that little overflow.
UPDATE:
I should have posted this to start with. I do not have the complete html/css as I'm using wordpress so the code is not exactly mine to share. You are welcome to view our site here, http://jrummy16.com/test/
I have just been using the console in Chrome or Firebug in Firefox to style it to that point.
Thanks in advance
Grady
This has nothing to do with overflow or box-shadow. What you are seeing at the edge is just the continuation of the background of the parent element.
You can fix this by correcting the positioning of your blue support nav so that it properly aligns to the far edge and doesn't leave the small section showing at the end.
EDIT:
Looking at the actual code, there are two "rogue" pixels that account for your excess right spacing. The first pixel is from the border from css line 394:
#mainmenu.scaled li.menu-item a {
border: 1px solid #E2E2E2;
}
You can either leave this here so the 1px border around elements stays constant, or you can remove it from your last nav using the :last-child pseudo-selector to set border-right:none;
So second rogue pixel comes from a clearing div that you have in the navigation. Deleting this div and applying a CSS clearing fix seems like the best solution. A basic clearing would be setting overflow:hidden; on the container element, but there are more robust css clearing you can use if your situation calls for it.
My guess is it's your padding on your grey box. Set padding:0px; on that get box element and see if that does it.
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.
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.
Google Chrome is acting buggy using border-radius, background color, and top and bottom borders. Here's the evidence and code to reproduce:
http://jsfiddle.net/6ADtd/4/
<div></div>
div {
background:blue;
border-top:10px solid red;
border-bottom:10px solid red;
border-radius:20px 20px 0 0;
height:100px;
/*
border-right:1px solid transparent;
*/
}
The border-right:1px solid transparent; is a trick suggested in the comments which did help remove the unwanted middle solid bar, but when you resize the window/browser - it appears again. It has something to do with the proximity of the element to the edge of the browser window, I can't quite understand it. You have to resize then hover over the element sometimes.
Videos from my desktop:
http://www.screenr.com/6wU8 (without border-right)
http://www.screenr.com/NVU8 (with border-right)
I've tried -webkit- prefixes on several properties and was unable to fix it.
I first posted this because I needed a quick fix for a specific website, but now I'm noticing it show up on several sites and I've nailed down what causes it. That's what I get for not testing in anything but Firefox. This is probably a bug and I should report it, but I'm still stuck in need of a fix in the meantime.
The ideal solution is with CSS, so I can write one or two selectors in the CSS file for the fix instead of digging through loads template files and in the database to apply div-wrap or other markup fixes. Does anyone know any tricks to get rid of this bug?
At the time of me looking into this question, there was still an issue on the prod website visible when the browser is resized to force horizontal scrolling on the document:
The "solution" I used was to apply both
border-left:1px solid transparent;
border-right:1px solid transparent;
to #header with developer tools - this seems to force the issue to go away regardless of resizing, at least on a Mac Chrome 18.
This seems like buggy behaviour to me - I'd speculate it would have something to do with blending corners where colors intersect, which, because of a bug, end up bleeding into the element itself.
I've attempted to, rather fruitlessly, look into the possible connection between a border radius higher than the border width causing this behaviour. This was, of course, untrue - playing around with different x-/y-radii yielded no results without having the "solution" from the above applied. Good to know I guess.
Sorry I was being a bit lazy with my initial reply.
What about wrapping a div with the border properties around the header with overflow hidden: http://jsfiddle.net/jugularkill/Jsdcz/
I've never seen such behaviour in Chrome, very buggy indeed.
Anyway, you can get rid of border-bottom and it will work alright. If possible, just add a <div> with background red at the bottom. Something like this:
http://jsfiddle.net/6ADtd/5/
Or a CSS only solution, add content after your div:
http://jsfiddle.net/Cthulhu/6ADtd/6/
I am trying to do a very simple tab setup on my site, but I'm having some problems because of the margin/padding pixel differences between firefox & chrome. Here is a jsfiddle link to what I'm talking about: http://jsfiddle.net/xqhf6/3/
Here's what it looks like in chrome:
Here's what it looks like in firefox:
Basically, here's the setup I have:
.mydiv { ... } : each box is a mydiv that has a padding of 6px and a
1px borders on left, right & top.
.header { ... } : contains the two
divs with borders at the top and has a bottom border
.subheader { ...
} : sits underneath the header (contains other stuff on the right
that is irrelevant).
I have tried to set a color for the subheader, tried to increase its z-index to be greater than that of the header and yet nothing works. I just want the little dangling borders to go away.
Help would be greatly appreciated, thanks Stack Overflow!
UPDATE Here is a jsfiddle link to what I'm talking about: http://jsfiddle.net/xqhf6/3/
UPDATE 2 In trying some of the options, it looks like my best bet is try and figure out a way to use the subheader to somehow mask the dangling borders. Not able to do that (as I mentioned, nothing works when I play around with z-index/subheader opacity & color)
Ringo
You get some weird effects if you try to apply a border to an inline element. Change your <span> elements to display: inline-block;.
Preview: http://jsfiddle.net/Wexcode/2A2s8/
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.