I'm developing a website and I suddenly noticed that in IE9 nearly only layout of mine has such issue (different from other websites that I recently browsed)
There is a gray border around my page which I cannot remove.
I already have body{margin:0;padding:0;} and I tried html,body{margin:0;padding:0;} but it still continued to exist.
Here is a small screenshot
Help me remove this border please.
Those borders are from Internet Explorer itself, you can't remove them.
To remove that spaces just add this to your css:
body {
margin:0px;
}
Related
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
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've recently added an image to my website, where the image is wrapped in an anchor tag, like this: .
The problem is, that this image has a border, but only in firefox; no border is showing in chrome. I want the border to go away. I have set in the css for both the a and img tags, the following:
text-decoration:none;
border-style:none;
border:none;
outline:none;
box-shadow: 0;
-moz-box-shadow:0;
background:none;
color:white;
The image is a small gray icon on a white background, and I have double checked it in gimp and there is definitely no border around the image. So, what have I missed? Where is it coming from? Why does it only appear in firefox? And how do I make it go away?
Firefox version is 17.0.1
So, what have I missed?
The 90s and 00s.
Where is it coming from?
It's coming from the browser's default stylesheet.
Why does it only appear in firefox?
Browsers seem to make up their own rules on whether they display a border around linked images or not.
And how do I make it go away?
a img {
border: none;
}
Unbelievably, I found the answer - turns out that I had zoomed in, and I didn't notice because it was only by one. Wasn't until I went and pasted the entire contents of my page in jsfiddle that I noticed the sizes were marginally different.
Apparently, when firefox zooms in it adds borders to images. Can't imagine why, but once I zoomed out the borders went away. Problem solved, I guess. Just wish I'd found this sooner - it's been bugging me for days!
http://www.pachamber.org/www/news/headlines/2011/whatsnew/PA%20Chamber%20joins%20nationwide%20business%20community%20in%20fight%20for%20reasonable%20regulation.php
If you open this site in IE then open it in Chrome or FF, you will notice the gray space on the left hand side. I've been trying to play with the widths on the tags but still can't get it right.
Can anyone suggest anything?
Thank you.
Edit: Adding link to show the differences:
http://i.imgur.com/x4yLD.png
In your CSS, set:
body, html {
height:100%
}
And don't use tables for layouts. The 90's are over.
I'm having problems in ie7 with notification's that are styled using the p tag. I've used them before and they render fine in IE7, however, in my latest theme, they cut off the top border with no change to the code which is giving me a major headache trying to figure out.
Here's the problematic page, the notifications are at the bottom of the page.
Link
It's annoying because I've used the exact same html and css here in this theme
Link
Can anyone see what the problem with the buggy version is?
You have triggered some bug in IE7, but I'm not sure which one...
The difference between the pages is that you have specified a width for the notification elements in the page that works. If you specify a width for the elements in the other page, they work too.
Forcing layout seems to do the trick. You can read more here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding this:
<style>
.notification { zoom:1; }
</style>