For a simple business-card-style web-page, it seems possible to use the html element in CSS to specify background-color for your document, and add some fancy border / margin: auto / padding: 1em through body. Looks nice in Google Cache, BTW, which would have their header within your body, all nice and fancy, just as it was meant to be.
However, the above seems to conflict with the Internet Archive Wayback Machine, with their interface being overlaid on top of your body (doesn't look very bad, but not the best). Also, the body {margin: auto} part (used to centre the body element) gets lost through the Yandex cache.
We can add a div, and switch the CSS rule from body to div, and from html to body (and it'll look perfect in Yandex cache), but then it starts conflicting with Google Cache, looking really weird; Internet Archive is somewhat better, but their own div's do get dangled with your stylesheets, too, looking quite unintended.
You could argue that I should use an id attributes, but then it's not like it's guaranteed that it's not going to conflict with something else again, too, plus the style will not be generic anymore.
What would be the best approach if I want to stick with standard html5 elements? Perhaps still use body (or html?) to set the background colour through CSS, and an article or section for the box element with the border and central position?
The Internet Wayback Machine does not guarantee1 complete archives2:
Please note that while we try to archive an entire site, this is not always possible....Additionally some sites do not archive well and we cannot fix that.
...
Not every date for every site archived is 100% complete.
So there is no way to guarantee that the archived site's CSS will always display as it did when live or even always be available. The file(s) might not get indexed on a particular date. Nor is there any way to ensure future changes to the Wayback Machine's own CSS (or how they handle archived CSS) won't change and cause other issues.
Related
So while working on a project I noticed that when I scrolled to the bottom the scrollbar would bounce back up a page.
Originally I had to make the front page have less vertical space for the footer and add the space for every other page.
So I moved:
body {margin-bottom: 150px;}
To:
body:not(.home) {margin-bottom: 150px;}
I'm answering my own question here though it's very clear Chrome has widespread issues with the scrollbar behavior in general. For people who aren't web designers it is possible to override the behavior on a live website and in some cases (with extreme subjectivity) programs (e.g. maybe the bookmarks page) though the issue in browser pages is overriding the browser's internal CSS which isn't always possible.
The fix, at least in the scenario I faced, was to split the margin in two and give the other half of the spacing to the padding-bottom.
So in example, this:
body {margin-bottom: 100px;}
Would become this:
body
{
margin-bottom: 50px;
padding-bottom: 50px;
}
This is however generally not an acceptable solution as there are very explicit reasons why margin and padding are two different contexts however the project I'm working on is very graphically heavy and requires breaking proper CSS conventions.
For non-web developers/designers who may come across this issue and page, as I mentioned in the question above, it is possible to override a website's CSS code if the CSS selector can be specific enough to only effect one website. The code would then have to be applied to the browser's master style sheet. I've done this in the past to negate Google forcing ads even around my Adblock Plus filter subscription and won. Each browser has it's own way of applying default styling, since this is a Chrome specific issue and I'm not as familiar with Chrome I did some digging to provide some bread crumbs and hopefully make someone's life just a bit easier:
https://superuser.com/questions/52967/change-default-css-of-google-chrome
I have a responsive Drupal Zen subtheme that I hacked together about a year & a half ago from some CSS & HTML that a non-Drupal designer handed off to me for my website. I've known that in certain layouts, it is buggy, and needs to be fixed, but I just haven't gotten around to it. After repeatedly reaching out to a local Drupal developer (and offering to pay him), I've gotten tired of waiting, and just need to fix this thing.
My bounce rate for folks on mobile devices is awful.
The URL is http://developcents.com. The homepage looks decent on any device. Internal pages need a lot of help, though, when viewed in certain screen sizes (including mobile devices). Let's use http://developcents.com/blog as an example.
In the below scenario, my question is not how to find the CSS files themselves. Rather, my question is, how can I find the necessary CSS settings using Firebug Lite, so that I can debug the CSS through my browser, instead of having to manually update each CSS file every time I want to test a change?
I can't find the actual CSS-styled divs, blocks, etc... causing the layout to break under certain dimensions. I know how to find, and edit, the CSS within the CSS panel, but I can't track down the specific CSS in this instance.
Additionally, as a secondary question, if you want to provide pointers on what I actually need to change, then please be my guest! But if you point me in the right direction on how I can go figure it out myself, that's fine too. :)
Let's get on to the scenario (which you can easily see by testing it yourself):
When I resize my browser window down to a certain size, the links & tweets section in the left sidebar move over to the right, so that the left side of the navbar aligns with the right side of the header area, while the content spans the full width of the page, except for the left margin, which stays in place but gets wider. Basically everything below the header gets screwed up, and it's easier to see the problems than explain them (so go test it).
Using Firebug Lite in Chrome, I can't seem to find the left margin for the "main" content area (see this screenshot clearly indicating the yellow margin), nor can I find the CSS for the navbar / tweets block (which I presume is some sort of float).
To modify the CSS within Firebug or Firebug Lite just select an element inside the HTML panel or inspect it via its inspector. Inside the Style side panel you'll see all CSS rules applying to the element.
Clicking the name or the value of a CSS property opens an inline editor to allow editing it.
On the right side of each rule you'll see the name of the style sheet, which contains the rule. Hovering it displays you the full URL and clicking it allows you to inspect it within the CSS panel.
You can also edit the styles directly within the CSS panel, which lists all style sheets available on the page.
Note: The changes you do there are not permament, i.e. on the next page reload they are gone! To make permanent changes you need to edit the files on the server.
Also note that I'm referring to the panels within Firebug. The panels within Firebug Lite basically work the same, though may look and work a little bit different. Furthermore Firebug Lite is not maintained anymore, so there's no guarantee that everything is working as expected.
I just spent an hour troubleshooting an issue I had were all my paragraph elements were shifted down.
This happened after I moved the design from jsfiddle.net to my web host.
I killed an hour before I finally realized I needed to insert
p{margin:0px;}
and all was well...well still off by 1px;
Questions:
Why did this error not occur in jsfiddle.net?
Why does FF CSS Debugger not let me know that there is a margin in there or where it came from. I don't know what is was set to but it was not 0px;
I'm trying to learn from "my mistakes" so I can know what to expect next time.
Web browsers set their own default values for rendering HTML elements. This includes margins, paddings, font sizes etc. When you create a HTML document with no CSS you can see lists, paragraphs and headings are formatted in a default way.
Debuggers tend to show the values that you have applied to the document in your CSS.
To get around these sorts of inconsistencies (browsers use different defaults) some people use a 'reset' CSS file that removes this behaviour by setting as much as possible to 0.
Take a look at http://meyerweb.com/eric/tools/css/reset/
Can you tell me what's the meaning of this:
*{
margin:0 auto;
padding:0;
}
* matches everything. That particular snippet is setting the default padding for everything to 0,0,0,0 and the default margins to 0, auto (that is, vertical margins are 0, horizontal margins are "auto").
* is a wild card. It means the style applies to all tags
that is a wildcard that will effect all the child nodes of the document node. Every DOM element basically on the page. You always wanna put that at the beginning of the CSS otherwise it will overrule all the other rules above it.
I recommend using css reset style sheets. One of the best is on Yahoos YUI project, google I believe also has it. This will do all the initializing of the css and reseting everything for every browser so everything you do will look the same regardless of the user agent. the reason I really recommend this for you is because you are a beginner and you will be banging your head against the wall like I did when css first came out and none of these were available.
You can also jump into fun things rather than dealing with these sort of rules.
It will also speed the performance if you link to it on google or yahoos server. this is totally legal and thats what they are serving it for.
I've been racking my brain trying to figure this one out as it's been a problem on the past few sites I've worked on (though they haven't gone live yet) and rather than trying to rig up a solution I'd like to try and discover the root of the problem.
Here's the site in question: (URL removed)
Basically I coded this homepage out as plain HTML and then inserted JavaScript and Flash elements as I completed them over time. When I got to adding the Flash (using SWF Object), I noticed that it had pushed the elements beneath it down roughly 5px, and only in Firefox and Safari (Internet Explorer, oddly enough, isn't affected). Turning off Flash or disabling JavaScript, which also turns the Flash off, removes this extra padding.
Can someone enlighten me as to what is causing this issue? I don't notice any major JS or CSS errors (other than a few hacks for IE), so I'm stumped.
Try to add line-height:0; to the div around the flash-swf:
<div id="flashDiv" style="line-height:0;">
This worked for me.
Try removing the whitespace between the DIVs on the page, and try putting the swf object into its own DIV. That way you can control what the page looks like without loading the swf, and it won't affect the other elements when it loads.
Try explicitly setting the margin and padding of the object element to 0px
You're using SWFObject 2.0, which does things slightly differently than the SWFObject of old. The old one would plant the embed INSIDE of a target div. The new one seems to actually replace the entire target DIV with an object tag.
Something I don't like, which is why I still use the old SWFObject.
SWFObject inserts an <object> element. Some browsers treat <object> as an inline element, some treat it as a block-level element.
The fix is to use CSS to ensure that objects are always treated as block-level elements:
object { display: block; }
See the SWFObject FAQ on the subject.