I had a page setup the way I wanted, with a logo absolutely positioned in the lower right:
http://testing.wizbury.com/onlinegamepage2.php?id=6
Then I added the following entry to the css, so that when a line of text in the box ran too long it wouldn't add so much extra space:
.ogfeatures li span {
vertical-align:middle;
display:inline-block;
line-height:1em;
}
That addition causes the logo to sit in the upper left of the content area (under the flash game). I can only post to links, but it is the same link as above, using onlinegamepage.php
The page dynamically generates a lot of content from a db, so Dreamweaver's preview doesn't work well. I decided to throw the code into fiddler and hard code things so I could play with the layout...and it works fine in fiddler, even with the spans added in.
http://jsfiddle.net/wrX8g/
So now I am completely befuddled. I'm sure there is something simple going on that I am missing, but I can't figure it out. I'd greatly appreciate any insight.
Thanks,
Doug
I'm not sure if StackOverflow is doing it or if it's in your original code, but when I copy your CSS into another file, after the closing }, there is a Zero-Width Space character, which isn't valid in CSS and, I believe, causing the declaration to be thrown out by the browser. I speculate that in whichever browser ytou're using, it's also throwing out all subsequent declarations, and that you've put that bit of CSS code right above the CSS declaration that positions the logo, thus preventing that declaration from taking affect and putting the logo where it would be without any applied CSS.
The fix is to simply remove the offending character, which you can probably do by putting your caret to the send of the line with the } in it, and backspacing. The caret shouldn't move, which tells you it removed an invisible character. If that doesn't work to remove it, you could also do it in a hex editor.
Related
At first, it looks simple, and at the end of scroll event, a margin (or padding) will be applied at the top.
This is useful when there is a sticky element at the top. Then when a link is clicked and scroll down to somewhere on the page, it's nice to have this element "skipped" by the scrolling.
This article explains it pretty well: https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
I could make it work on really simple examples, and that works. However, I am trying to make this work on a normal website, and I can't. I think there is something not clear for me (or in general?) about how it works.
Please have a look here: https://meowapps.com/media-cleaner/tutorial/#Media_Library_Scan
When a link is clicked on the right, it scrolls but the scroll-padding-top is completely ignored. I have tried many techniques, moving the CSS property in many different places in the code, but that doesn't do anything.
Do you see what's wrong? Ideally, it would be great to find real the cause and maybe have an explanation why it doesn't work in this case and describes what's that case actually is.
Thanks a lot :)
scroll-margin is not useful if scroll behavior is controlled by JS
Looking at your page source, I found easy-table-of-contents WordPress plugin, which relies on smooth-scroll jQuery script. Also, I don't see scroll-behavior: smooth; in your body either (see this MDN page for reference).
It looks to me that your anchor link is not controlled by CSS but by JavaScript. And, as you'd know, when something is controlled by JavaScript, any relevant style declaration via CSS might be ignored.
What to do?
I honestly don't know. Perhaps you could replace the table of contents plugin with something that gives you a finer control. Perhaps you could refactor the said plugin yourself. In any case, should you need to keep the jQuery dependence and a particular WP plugin, you might have a tough luck for this fix.
I got your point, sorry for a long answer but I am sure this will clear your doubt with the output.
scroll-margin-top and scroll-padding-top define the amount of space to be given from within the element or from outside the element whenever a scroll event occurs.
Sometimes we see some text gets cut from the viewport such that it's half visible.
To avoid that kind of thing scroll-margin-top is helpful.
when no scroll event happens:
when scroll event happens but with scroll-padding-top:20px;
see an example from MDN Web Docs
Now applying this logic to your link example
When we click on the link it takes us to the specified div,
But when the scroll-padding-top is applied the output looks like this it gets stuck to the top of the viewport, even if we specify a certain margin with CSS the output is the same because the padding is applied from within the element:
When we apply scroll-margin-top we get the desired output on the link click event or scroll event:
a{
font-size:30px;
text-transform:capitalize;
}
#down{
scroll-margin-top:30px;
background-color:royalblue;
height:100px;
width:50%;
}
<center>
down
<section style="height:1000px;"></section>
<div id="down"></div>
<section style="height:1000px;"></section>
</center>
See Output
Correct me if I am wrong anywhere.
Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space
I have a Raphael.js SVG element living inside a div. Occasionally—when the page loads, or when a jquery-ui-draggable is dragged over the main svg node—the whole SVG element (over?)flows almost below the page. That is, if it started at 0,0 and it's 500px high, it jumps to 0,500 all of a sudden, and not always. I've tried setting position:relative but that doesn't seem to fix it. Actually, tweaking the position: in the Chrome debugger makes it "come back", but keeping it there through a page load doesn't fix the issue permanently. It happens maybe half of all page loads.
Anyone know what might be causing this, or at least a way to keep it jammed at the top? I'm rather CSS-ignorant.
Apologies for not having an example; it's part of a large setup that I can't share at the moment. I'm hoping someone has a hunch.
Can you examine the generated source code while it's happening (I use the Web Developer tool and there's an option in there to view the generated source code — and am sure there0s something similar in Chrome) to see if there isn't an element being inserted before it (or that something in your program logic is causing the canvas to be duplicated). I once had some very strange behaviour with Raphael and found that it was linked to my inadvertently loading the same script twice on the page.
I could always suggest absolute positioning too in CSS but that doesn't sound like it would fix the underlying problem.
Good luck and a hope that helps.
Apparently it was some CSS transforms: the input paths weren't in the right coordinate space, so we were doing a -webkit-transform: translateY(400px) scaleY(-1); in the <svg> element. I'm gonna try scaling the paths before putting them in the DOM instead.
I've just started a new project for my clan. First i worked in chrome, but one of my friends told me there was a strange problem with the site. At the top of the page there is a white space, but this happens only in Mozilla. When i inspect it, it says it's apart html. I've triple checked the css for margins and paddings, but i couldn't find the problem.
Here is the CSS:
https://docs.google.com/file/d/0B8jNXRky-LW_aUw4Z1hXVlVwbHM/edit?usp=sharing
This is quite a strange issue. I see it in chrome also. It seems to go away if I add display:inline-block to .content
I'm looking through it atm but i am unable to find why it requires this. will edit if I find
EDIT:
its the span inside .content it has a lot of margins / padding on top of it, it is shoving everything else down. You need to modify this
The best way to display what I see is by giving you a couple of screenshots:
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr1.jpg
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr2.jpg
The link above also shows the html/asp code.
The question is why am I getting that white line when I render content in the web browser????
PS. I'm using VS2010 (that I am ready to smash with a hammer...)
Images are inline elements.
Inline elements are rendered like characters.
Characters sit on a line.
There is space below that line for descenders (which you find on letters like g, j and y but not a, b, and c.)
That space is what you are seeing.
You could twiddle the vertical-alignment of the images or stop using layout tables
User CSS Reset, and everything should be solved. The reason you're getting the weird artifact is that, browsers by default apply some style on HTML elements. To nullify those default styles, designers usually use CSS Reset. A CSS Reset is a CSS file that tries to remove all default styles applied by browsers.
To debug your CSS margins and paddings, use Firebug with Firefox. Here is an image of how to do that:
You may be getting the browser's default styling here. I would recommend grabbing a CSS reset and seeing if that helps
OK, guys, I got the bottom of it. The following style should be added to the tag that hosts the image. I don't know why, but it helps:
td{ font-size:0; }
Thanks everyone for your help!