I am using google speed insight for improve my site.I have problem in fixing "Eliminate Render blocking CSS".I have moved my CSS to Footer.But,still i having this error.Anyone can help to get rid of the issue?
Please move your CSS to the <head></head> or otherwise to the top portion of the document, not the footer. CSS is processed first and without being able to process CSS, certain items like backgrounds will not load.
Without having the CSS at the top, your browser will first render raw HTML markup (unstyled) and only after hitting the bottom of the document will it finally learn that styles or an external stylesheet exists.
Related
I'm making a web page to try to learn HTML, CSS, PHP, and Javascript better. I've been revisiting the code trying to work out a few bugs and I discovered that my search bar is hiding the page contents and a button on my sidebar. I spent about 10 to 11 hours this week to try to fix the problem. The thing is though I'm not sure what the problem is and so I don't know which part of my code to post. All I need help with is identifying a few possible problems. If you have an idea what the problem might be I would really appreciate your help. So far none of my ideas have worked.
Here is a picture of what the page currently looks like.
Can you try adding a css property of padding-top: 100px; to the content under the header and see if that does anything?
from the diagram it looks as if your search bar has been removed from the normal document flow. This is usually done in CSS setting the position attribute to absolute or fixed rather than static or relative.
Check your styling for position and set it to static or relative.
I'm making a website for an event, then I've added a countdown to it, but my footer and the button above it, are behaving differently in the page where the countdown is present.
I've come up with this:
the countdown is good as far as it's connected to a Bootstrap CSS;
That Bootstrap CSS makes my footer and button change aspect;
My question is: how do I make the countdown stay and work with the footer and button aspect unchanged?
This is the page of the website which doesn't work: http://goo.gl/mH9nLh
And this is the one which works:
http://goo.gl/24SZxQ
I'm not linking you the code 'cause I don't know where the error is, this way you'll be able to see each part of code and mostly: what should I take from that Bootstrap css file or some other tricks to get around the problem.
If you need anything please don't ignore this question, rather leave a comment I'll text back instantly!
I checked the 2 links you pasted above.
There is a main.css file which is included in the second link , which has styles for the table and it's subsequent child classes.
The same is not available in the first link and this is the reason you are seeing 2 different styles.
Please include the same set of css files in both the pages so that I can better debug the possible problem areas.
I am currently transitioning a site from one host to another. The original .swf files I am trying to replace but for some reason there is a strange looking border around the images. Can anyone explain why or how to fix it?
Here is the site that is currently being hosted where the header image .swf file is displayed properly:
http://www.waimeasmiles.com
This is the site under the new host where the strange border is:
http://waimeasmiles.com.192-185-7-17.secure22.win.hostgator.com/smile_gallery.asp
Thanks for any help.
That's a weird little border alright. I've glanced over the code and didn't see anything glaring. I can tell you that the "border" you're seeing is the swf's declared background color. (One black, the other white.) It's as if the swfs have a 1px offset but from what I can see nothing has changed regarding their embed or styles.
In fact, one of the only differences I noticed while scanning your code was:
The original location's html has a closing paragraph tag at the end of the file (outside the closing body and html tags) but it seems to have been removed from the new location's html.
Errant or "catch-all" closing tags are bad, mmmk. I can't think of any reason this would affect the flash, but considering the heavily nested, difficult to read code on that page, I might try adding it back just for the sake of having tried it. ;)
Aside from that you may want to try "zeroing out" some elements in your css to see if that helps. Something like:
div, object {
margin:0px;
padding:0px;
border:none;
outline:none;
}
I've been tasked with reproducing the look and feel of an intranet site in SharePoint, at first I was thinking no problem just mod a Master page and voila.
The problem occurred when I opened the source of the site and saw that they are using 12 disparate CSS files that override each other, and are written in the worst way possible.
My question is is there a tool that can take the mess and generate the resulting HTML so I don't have to manually.
Base.css for example sets BODY width to 90%
custom.css then sets it to 960px !important
Mod.css lastly tries to set it to 100%
I would need it to look at this and generate BODY with the style to set the width to 960px
You can do this using chrome's developer tools:
Right click and inspect the element and then click on the computed tab on the far right top corner .
It will give you the styling that the element has after all the overrides and such.
As a starting point, you coud use window.getComputedStyle() for obtaining such information.
Have a look at: https://code.google.com/p/instyle/
It seems like it does what you need.
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.