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/
Related
I'm trying to do something which I thought would be really simple..
I want to display a background image at the bottom of each table rows (or cells, whichever works best) but i'm getting some alignment issue.
The image always seems to align to the bottom of the cell content, but ignores any padding.
border-origin:border-box doesn't seem to have any influence on the result either.
Setting the background on the row itself (ie. the tr tag) produces the problem.
The background uses this syntax: background:url('...') bottom left repeat-x;
See the following screenshot of the results - i've added a semi transparent outline of the cell just to show the boundaries. The red dotted line is the background.
Here's a fiddle for it: http://jsfiddle.net/bendog/gvtqwhw0/
(note: the fiddle CDNs to bootstrap, which i'm using for the project)
One would think this should be easy...
The problem occurs on my latest Chrome and Firefox on Mac (but haven't tried other browsers yet)
Use background-position adjust pixels wherever necessary
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIxMHB4Ij4NCgk8bGluZSB4MT0iMSIgeDI9IjMwMCIgeTE9IjEiIHkyPSIxIiBzdHJva2U9IiNlOTRjMWEiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLCA1Ii8+DQo8L3N2Zz4NCg==) repeat-x;
background-position:0% 104%;
}
Working fiddle
http://jsfiddle.net/gvtqwhw0/23/
Oh, well, do I feel a bit stupid!
The extra padding was blank space part of the image itself.
It works fine with a corrected image: http://jsfiddle.net/bendog/gvtqwhw0/24/
Here's the updated image tag (apparently I can't post a link to jsfiddle without copying some code here too)
tr {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMi4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMi4yIiB4bWw6c3BhY2U9InByZXNlcnZlIj48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNFOTRDMUEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMSw1IiB4MT0iMSIgeTE9IjEiIHgyPSIzMDAiIHkyPSIxIi8+PC9zdmc+) bottom left repeat-x;
}
It became apparent when I used the same effect on a heading tag.
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.
I'm trying to understand this webpage:
http://www.canadianliving.com/food/slow_cooker_beef_stew.php
It is divided into several sections where each section has a border around it. For example, to the right of the title "Slow-Cooker Beef Stew" is an image "tested till perfect". Immediately to the right of this is a border, which separates it from an advertisement. This border extends down and separates the section from the "Related Content" section below.
But what is making the border? I am using Chrome's Inspect Element, Computed Style, but none of the tags seem to have a border-style. What else can create a border?
(I'm not looking for the best way to make a border; I need to understand how other pages do it.)
EDIT:
Based on people's answers, I tried the html below, which is not working. I don't get how an image in a parent div is repeated in each child div in such a way that it fits exactly along the border.
<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>
</div>
http://www.canadianliving.com/media/images/background_02.png?201206051535
Its an image, not a border, remove the image to get rid of the 'border'.
I deduced this by selecting the container element and reviewing the css background property,
for future reference.
Here an example:
<style>
div#test {
height:800px;
width:800px;
background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
}
</style>
<div id="test">TestDiv<div>
Keep in mind, this is a rough sketch of what it should look like. I'm not planning on learning you this without some effort. Try w3schools for an html / css tutorial.
I'm betting we all did this kind of research and a lot of trying before trying to submit to these kind of forums.
Happy coding, good luck!
D.
The background is set on the div#right_col where the ads are. They have a padding-left of 8px (width of the shadow background image) and a background set on content-container with url('/media/images/background_02.png') 0 630px repeat-y.
basically, it is a background url that is used as a shadow border. Please look at the CSS of #content_container in firebug/chrome inspect element.
It is not a border but used as a seperator.
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.
I've an image that is wrapped in an anchor tag that, through jQuery, triggers an action somewhere else on the page. When I click on the image, two tiny 1px by 1px boxes show up in the upper and lower left corners of the image.
My CSS styles explicitly state no borders for images: a,img { border: 0; }
It also seems to only happen in Firefox 3. Anyone else had this issue?
Here's a screenshot of the left part of the image (the graphic has a white background):
alt text http://neezer.net/img/ss.png
It's not the background, or the border of any other element. I checked.
Is your anchor tag under or overlining?
Set the a and a:hover in that situation to text-decoration: none.
Happened to me, and the reason it was two tiny boxes is because the width of the element didn't quite extend, or something.
Good luck!
D'oh: I see it's upper- and lower- LEFT boxes. Might be something else, like background or border of containing element peeking through.
Have you tried also setting border-style:none;? It's a long shot, but you never know...
What is the display property of the anchor element? You can try setting display property of as "block" and make sure that the inner IMG elements float setting is set to "none".
I've chalked this up to a bug with Firefox 3 & jQuery 1.2.6, since I've yet to replicate it with any other version of Firefox or jQuery.