This white border is driving me crazy in IE and Edge, it does not appear in Chrome and Firefox.
If you follow the link:
Might.to
You will see that at the bottom of the page there is a white space of around 1 pixel high. I tried the common ways (after researching) to fix this:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
border:0px;
margin:0px;
}
In my CSS:
*{
margin:0;
padding:0;
margin-top:0;
margin-bottom:0;
}
The white space only appears when I use position:fixed on my nav div (the top part). I want the "top" section to stick as the user browse through the website.
I looked around and I tried all solutions I could find on Stack Overflow or Google to no avail.
And I am unfortunately running out of ideas, can anyone help me out with this please?
Most of the site is made of "placeholders" for now, I want to fix the bugs and display glitches before changing everything.
Try to add:
width: 100%;
height: 100%;
border: none;
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
I have a problem that I am struggling to solve on IE8. I need a 100% height div but everything that I have tried doesn't solve the problem.
You can see the problem here: http://gyazo.com/71ffde560df4d3f87c0fb55a92ef8313
or reproduce here: http://maahes.ninja/ie/ie.html
Problem is that little white margin in the bottom of the page, and this only happens on ie8 (it's ok on ie9). I was able to solve it by removing the doctype yet that fixes the problem, but breaks all the application.
CSS:
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%;
min-height: 100%;
background:#9699FF;
color:#fff;
}
Sorry for not adding more images / links but I have no reputation for that.
There is no white margin on the screenshot you shared. What you see is an embossy-stiled Windows GUI-Element - the border of IE8s browser window.
You could try to verify this by adding a red background to the <html> tag.
html {
background: red;
}
This way you should see a red background, if your div had any margin-like effec on it.
I testet your link on my IE8/WinXP virtual machine and there was no extra margin. (see: Screenshot)
I enlarged the lower left corner of my screenshot (click here) so the inner window-border is more clearly to be seen.
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
http://mistcave.com/temp/
Zoom into the page and scroll right. The 1px black border at the bottom of the header is cut off a bit short. How do I fix this issue?
put the border bottom property in your header div
also to note if you are using google chrome you can go to select elements and view the dimensions of each div which will help you trouble shoot in the future
Made a dirty hack. Tough it work flawlessly.
Demo Fiddle
#wrap {
width: 100%;
}
#header {
border-bottom: 1px solid #000000;
margin-bottom: -1px;
}
That doesn't really matter. Because the Border-bottom effect follows the size of your browser. No web users would zoom in and out pages except you.
It will also be fine in every screensize, just don't zoom it in and out.
That thing is fine every site has that problem too but it's not a big deal.
set the width of the #wrap in CSS to be 100%
OR simply do the following:
body
{
overflow-x: hidden;
}
.extendfull, .extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}
.extendfull, .extendright
{
padding-right: 3000px;
margin-right: -3000px;
}
overflow-x: hidden prevents horizontal scrolling, and increasing the padding is pretty self explanatory.
I am trying to write a CSS in which when the user writes text and it overflows instead of having a scrollbar or hiding, it just goes down like in a normal Word Document or so. I have this code:
#content-text {
width: 960px;
padding-left: 10px;
padding-right:10px;
text-align: left;
color:#000;
height:100%;
margin-left: 25px;
margin-right:25px;
}
The odd thing, is that while this code actually does what I want in IE in Firefox it overflows and becomes a scrollbar. I've tried overflow:auto; overflow:hidden; and overflow:inherit; just to see if any helped but no luck so far, and I honestly have no idea of why is this happening in Firefox, =/ would any of you know?
Update:
I tried with overflow:visible; but I just get the overflow...well visible but still it doesn't wraps. and ONLY in Firefox so far. =/
Update:
The only other thing that could be affecting is that I have another CSS code and the first is contained:
#content-title{
background-color: transparent;
background-image: url(../img/content-title-body.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
height:auto;
position:absolute;
z-index :100; /* ensure the content-title is on top of navigation area */
width:1026px;/*1050px*/
margin: 160px 100px 5px 100px;
overflow: visible;
top: 55px;
}
and the HTML that uses this is:
<div id="content-title">
<div id="content-text"> Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!
</div>
</div>
So your css is probably fine. For example on my page I have css is like this:
textarea.input_field2 {
margin: 10px 10px 10px 0px;
width: 440px;
height: 150px;
background:#696969;
color: white;
border: none;
font-size: 14px;
text-align: left;
vertical-align: middle;
}
Then in the body I call it up like this:
<textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>
It works fine.
But make sure when you test it you test it with something like Lorem Ipsum, words with spaces and not one long string like 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' cause that will force a scroll bar probably. Also check your html and css for validation.
Try: overflow: visible.
There must be more to the story than you are showing here. I used the CSS provided and I am seeing the same behavior in both Internet Explorer and Firefox. The page is rendered 960 pixels wide and when the browser width is less than this, a horizontal scroll bar is rendered.
If you specify a width on an element, the browser is not going to render it less than this value. If you remove the width declaration from your example, the element will only render as wide as it needs to.
If this is not the answer you are looking for, please provide more code to give us the whole picture.
Add word-wrap: break-word; to your #content-text