I have a Chrome extension with a browser action that is trying to imitate the visual style of a different app. Part of this style is a header and footer that extend to the edges of the app. The problem is that the browser action popup contains a small margin and rounded border by default that appears to be hard coded to display as white space.
It would be nice if there was some way to either remove this margin or force my content to be able to extend all the way to the edges. Does anyone know of a way to do this? (I highly suspect that there's nothing to be done, but it never hurts to ask, right?)
Oh, and for the record, negative margins get you nowhere in this case. :(
From my experience in developing the extensions as well as using them. There isn't a way to get rid of that small border.
The best experience I've seen is matching the rounded corners with a border-radius: 5px
You can't remove the 1px white margin but you can remove the 8px margin you have to add body{margin:0px !important;} to your css then you can add a border-radius as suggested by Ryan
Related
I am not sure what is causing this.. I have been looking at different smart phone screen sizes in chrome dev tools mobile view, and that random white space on the right side of my page is always there. I can't see any element that has margin showing, or padding on that side.
I thought maybe it was the bootstrap row class causing it, and I made sure to add the row inside of a container-fluid div as the docs say to do.
The weird thing is, when I hover over every element on inspecting, they all show this white space on the right; even if I hover over the html tag... So I'm thinking the issue is bigger than bootstrap at this point.
I have tried adding the following with no changes.:
html{
box-sizing: border-box;
overflow-x: none;
}
When I'm in the mobile dev tools looking at the screen, I can drag and move the cursor left and right and the whole screen shakes to fill that right blank spot... So it is not behaving like it is using border-box..
When actually viewing the live site on my phone, this shaking back and forth doesn't happen, but I still see a slight white vertical space on the right side behind the cursor.. Idk if I'm being too picky and this is just space for the cursor in the phone settings? Although I see the same blank spot on every phone size in google chrome dev tools mobile view.. I know I'm not crazy! Well not completely yet!
Also, not that it helps in this situation(I think), my site is built using .NET Core 6 MVC. I am using Bootstrap 5. I am ready to start removing my media-query css line by line to see what could be causing it.. Its not an obvious issue, but I notice it of course.
If anyone has any idea what it could be, please let me know where to start.
You have to take into account that an element's width is not just the width itself, but a sum of its width, padding, border, and margin, and sometimes border-box doesn't fix the problem.
If you're using animations on scroll like a slide from left to right or vice versa can also screw your pages sometimes.
Well I can't believe it but I had overflow-x: none, instead of overflow-x: hidden; I also had it on the wrong media query in my CSS.
Just glad I'm not crazy! lol
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.
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 use the following CSS styles to debug where my div and span outlines are (normally keep it commented):
div { outline: 1px dashed blue } span { outline: 1px dashed green }
While that shows the outer bounds of divs and spans and gives an idea of padding relative to the object/text inside, it does not help visualize where the margins assigned to the same style are. I understand the difference between padding and margins but I really need to be able to see the visual effect when building a page (too much detail, too little attention span).
Is there any way to add an outer rectangle to show where the margins are for a style?
I am not aware of any attribute that allows a border on the outside of margin as that goes against the purpose of what a margin is. W3's Box Model Explanation
While this was a great technique in early web development, I cannot recommend strongly enough taking a few minutes to install Firebug or to familiarize yourself with Chrome's Developer tools, or Safari's "Inspect" features, etc. You can just mouse over code and get far more data than hours of messing around with hand-made debug styling.
You'll love them!
Firebug especially allows mousing over code and it will highlight your main box, color coded padding and margin, etc. An invaluable tool - it's even better than Dreamweaver's built in visual outline tools.
You can use my new tool for this. You mouse over any element in your page and it will show you all parts of its layout (margin, border, padding, etc.).
HTML Box Visualizer - GitHub
As far as I know, there isn't. I would recommend either using Chrome's Dev tools or Firebug as previously mentioned. A nice perk you get with those tools, is the ability to manipulate the DOM on the fly. This makes testing out placement very quick and painless. Sometimes if I'm trying to place a div juuust right, I'll right-click the div, select inspect this element, and then look at the properties on the right-hand side. You can actually adjust these real-time and see the changes reflected in the page. A nice trick is that many of the properties allow you to use the up and down arrow keys to cycle through their values. This makes adjusting the margin-left or a margin-right value a cinch.
After having went through the GWT StockWatcher tutorial, I find a small UI problem, as shown in this image
When I change the background color of body from white to green manually, a small white square becomes visible. I have seen several examples of this, so I'm pretty sure it is not a programming error that I have made. On the contrary, it seems to stem from one of the hidden iframes inserted by GWT, since it disappears when I delete the iframe or all of it's contents.
Also it seems to be a Chrome- or Chrome-GWT-plugin specific issue, since I could not replicate it in Firefox.
Does anyone know the cause/fix of this problem?
Disclaimer: I just tried this and it seems to work but its not very well tested.
The body had a margin of 8px on all sides. I set it to 0px with
body{
margin: 0px;
}
This seemed to have removed the problem. If you wanted the margin you would have to add it back to a nested element inside your body.