I have the below page where the column header is fixed and the table body is scrollable. But when i scroll the data, i have the result like the image 2. Please suggest as to what to do to get rid of this. This is the code for my div. The table is sitting inside the below div.
<div style="overflow:auto; height:400px; position: absolute;">
Before scroll
After scroll
You have to declare a background color, like this:
#element {
background: white;
}
Please post a JsFiddle or Codepen of your markup.
The bgcolor attribute is deprecated. Use background-color: #FFF or background: #FFF instead. Also, please terminate your style declarations with a ; you are going to experience strange issues otherwise. It also may be that you are not applying the style to that header row correctly, but it is difficult to say without some example markup.
There's two odd things I'm noticing:
1) You are using a div tag as a table header, which I haven't seen anyone do nor do I see any obvious reason for it.
2) I heard position: absolute can cause some weird issues in IE. http://www.impressivewebs.com/absolute-position-css/ I'm not sure if that's the main issue though.
Related
I've been trying to apply a simple background image to a div. It seems like such a simple problem but after hours of searching through many threads on Stack and other sources, and trying many of the solutions, i'm still looking at an empty div.
I've verified that the asterisk.png file exists and renders when called by itself from an tag.
Here is the HTML
<div class="element"></div>
Here is the CSS
.element{
background-image: url('images/asterisk.png');
background-repeat: repeat-x;
width: 400px;
height: 50px;
}
Im hoping someone can point out the simple error I'm making here ... Thanks!
It should work, check in inspector if any other styles are not added to this element.
Something may make your element display: inline in this case, yes BG will be not visible, change it to display block or inline-block
Fixed it. I was incorrectly linking to the image file. 'images/asterisk.png' vs '../images/asterisk.png'.
My apologies ... I guess I had been staring at the screen for way too long and just needed to rest!
Thanks everyone.
There is some empty space on the right side of a subreddit that I moderate, r/Fantasy. The page looks normal on load, but there's a horizontal scrollbar, which if I scroll shows the empty space, with just the background, like so:
Same issue on mobile. The CSS for the subreddit can be seen here.
I think the element causing the issue is the div containing the AMA schedule in way down in the sidebar, but can't figure out what's wrong with it. I'm pretty much dead in the water when it comes to web design/CSS, so any help is appreciated.
And yes, I realise plenty of similar questions exist already, but none of their solutions helped me yet.
Problem is caused by the class .side .md blockquote:nth-of-type(1):after ,
which is used to create the separator. This has the property display:block and width:400px; which is causing it to overflow. You can change the display type to initial or put a overflow-x hidden on parent element.
you can add the property overflow-x: hidden to the class .side .md blockquote to get rid of the empty space.
.side .md blockquote {
color: #000;
font-size: 13px;
overflow-x: hidden;
}
In my html document, I am using the table elements to create a sort of photo collage grid. When I change the z-index to -1 for my post it just cuts off the document and you have to scroll to see it, this is very confusing, please help. Thanks
Here is my jsfiddle of it
Have you noticed your ordered list div #posts is the direct child of body? Just remove the style of body like height: 100%; background: #e1e1e1; and it'll work. Hope this works for you.
Here is a demonstration: http://jsbin.com/egezog/edit#html,live
Sorry if this is newby, but I can't figure this out. I have a title, and I need (in decoration purposes) a line going from its edge to the right of the page (not an actual page, but a wrapper, but I have overflow hidden anyway). The wrapper is fixed in width, but the titles vary in length. I can't use absolute position, and I prefer not to use tables. And if we get this sorted out...
Here: http://jsbin.com/ibeciv/edit#html,live. So in the end, I actually prefer this all right aligned. You may ask, why do I need advice if it's there, implemented? Well, as you may see, the title is in two rows, which is unacceptable in my situation, and also, I prefer not to use tables.
I guess I can use float:right, to right align, but well, it depends on the implementation that I hope you'll advise to me. Thanks!
PS: jsfiddle is down for me right now, so here I used jsbin.
http://jsbin.com/ujiquq/edit#html,live
Will work in IE8 and all modern browsers. The background of the parent element can be anything. The line will still be vertically centered no matter what font-size is chosen.
HTML:
<h3><span>The title</span></h3>
CSS:
h3:after {
content: '\00200B';
background: url(data:image/gif;base64,R0lGODlhAgABAIAAAP8AAAAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==) left center repeat-x;
display: block;
overflow: hidden;
}
h3 > span {
float: right;
padding-left: 5px;
}
Here is a solution without using tables:
http://jsbin.com/ujawej/5/edit
And here is the one with tables (from my comment):
http://jsbin.com/osovev/2
Write like this:
HTML
<div class="title"><span>Title Here</span></div>
CSS
.title {text-align:right;border-bottom:1px solid red;}
span{background:#fff;float:right;margin-top:-9px;}
Check this http://jsbin.com/ibeciv/3/edit
UPDATED
Check this http://jsbin.com/ibeciv/4/edit
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 3 years ago.
In this test page, the element has a strange extra amount of space on the top:
http://dl.dropbox.com/u/3085200/canvasTest/index.html
I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.
html
{
padding:0px;
}
body
{
margin:0px;
padding:0px;
top:0px;
}
Try this in css:
h1 {
margin-top: 0;
}
This is a common scenario (logo image wrapped in h1 tag):
I believe this is actually caused by the margin on your h1 element.
You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.
body > h1:first-child { margin-top: 0; }
My console is showing a 0.67em top margin on the <h1> surrounding your top element.
Try this...
h1 {
margin: 0;
}
Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:
All okay, except for a pesky extra space at the top of the file.
The solution was this:
Tools>Page Editor Options>Authoring
Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."
I hope this helps someone else as naive as I.
You can try to put a display flex on your body, it worked in my case
Hope it will help someone :)
I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!
html > h1:first-child { margin-top: 0; }
I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.
Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:
In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:
#ContentContainer{
border: 1px solid transparent;
};
I'm not quite sure why it works or why it's needed, but it made the gap disappear.