Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Context may or may not be important here: I'm using Ghost on Github Pages via Buster. Buster is a tool that generates a static site from a local Ghost blog, so that it can be hosted properly on static site hosting. The blog post I'm looking for help with is hosted here: http://dresscode.danhakimi.com/why-i-love-belted-coats-and-cinched-waists/. Inspecting elements seems to work pretty effectively, and more effectively than I could copy all the relevant HTML, CSS and Javascript over here. As a disclaimer: I wrote none of this code, and am not a developer by trade, but have played enough with web frontend technology that I should be able to understand most of what's going on.
Aside from one detail I'll touch on later, this works well in Firefox on multiple platforms, and in Internet Explorer. In safari, the images show, but can't seem to set height correctly, at least on my laptop -- at full screen, the images are stretched out, but they respond nicely as I change the window's height. So I'm pretty sure the problem involves the way different browsers process adaptive heights... But I have no idea how to handle that.
The strange thing is what happens in Chrome (on both desktop and android): the images aren't visible at all. I go in and inspect element, and... the only way for me to get images to show is to set the height on kg-gallery-row to a fixed pixel count. Obviously, that's not a practical solution -- I want the heights to set responsively, properly... I've seen a lot of guides talking about setting the flexbox height to 100%, but that isn't doing anything, no matter where I do it.
The last detail worth considering -- although it's a less significant issue -- is that none of the zoomable boxes open correctly, locally or on production, in any browser. They seem to be targeting some area much further down. If you can help with that, I appreciate it, but the priority is just getting the galleries to show.
Per request of an answer:
You can set the height of the image to auto.
.l-post-content figure .kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: auto;
}
It looks like Chrome is setting the container height to 0. So, if you have your image height set to 100%, that means 100% of it's container height - which is 0.
Setting the height: auto will set the height in relation to the image itself. This will also solve your stretching issue.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to help a friend with a blog on wordpress.com http://mpiedgeworldclass.wordpress.com/.
They have the css editing option paid for/turned on so we can edit css but can't touch the theme itself.
There is a vertical image repeating between the sidebar and content area. It runs too high in Safari but works fine in Chrome.
If I could access the theme / html I think this would be easy to fix, but trying to do it only from the css.... I'm not sure if this one is even possible.
Any CSS wizards got any ideas?
(I sincerely wish I had more css skills, but it doesn't seem to come easily nor after 6 years very quickly either.) :(
The whole thing is a bit of a mess, but the best solution I can find (which has no effect on Chrome), is to set height: 187px; on #header.
It's an interesting issue, where Safari treats margins differently depending on whether you defined the height or not, even though the calculated height for auto comes out to the same value. I had a similar issue the other day.
Safari and Chrome are both based on WebKit and, as such, have no inherent differences when it comes to css rendering. However if your chrome browser is using a different version of webkit than your safari's you could potentially see some issues. This problem looks to be either a position or display issue...which havent really changed as far as I know.
What I would do is check to see if the css is doing anything new or weird in order to place that element which is the likely cause of the problem. Code would really help, but I can suggest checking the respective versions of safari and chrome and perhaps update them both to their latest builds. At the very least you'll know it is a backwards compatibility issue if updating them fixes the problem.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
For the sake of this question, let "efficiency" mean, more-or-less, page rendering speed. Albeit, we should also take into account performance issues, like smooth scrolling.
Let's say you're putting a striped background on a page. From an efficiency standpoint, is it better to tile an image 100px wide (showing ten stripes), or an image 20px wide (showing two stripes)? Of course... a large image takes more time to load, but I feel like I've encountered trouble when tiling very small images. Is there an optimal point?
I'm starting to think this depends on the browser (and maybe the operating system as well?), especially given part two of this question:
To achieve translucency, is it more efficient to tile a translucent .png file, or work with CSS opacity attributes (again, the question of large vs. small tile comes up)? From my experience, older versions of IE seem to behave better with a tiled, translucent .png than they do with CSS opacity attributes (though I've never done any scientific testing).
Rounded corners are another good example... in some browsers, the use of images instead of CSS attributes or JavaScript implementations seems to make the page much faster, with much smoother scrolling.
This is really a question broader than CSS, but it's just something I've been thinking about lately.
-Peter
Yes, this is all OS and browser centric.
For instance, in Safari, it's more efficient to use CSS transformations to animate elements than JS.
In general:
you want to avoid tiling very small images. A 20px image will tile better than a 1px as the browser is doing a lot less work to repaint the entire screen. Likely not much of a difference between 20px and 100px, though.
anything that can be done with CSS will likely be more efficient than loading another image. (such as rounded corners, drop shadows, etc.)
a big caveat is IE's css filters. A lot of those are not efficient and you may be better off reverting to images.
Based on my testing, it seems the page renders faster using the smallest image possible, and let CSS do the tiling for itself. The speed at which this takes place is solely dependent on the browser.
As for translucent backgrounds, using CSS would be lighter on bandwidth, but CSS opacity still isn't fully supported, so I would take that into consideration when tackling something like that.
I'd be very curious to know what the results of other people's testing...
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way
For instance:
I still do layout with tables and not with just CSS. I haven’t still found out a way to correctly present data aligned and tabular.
I don’t know the difference between display: none and visibility: hidden (well, I know it now. but there are many cases like- padding, margins, overflows etc)
I haven’t really followed the inheritance way to writing CSS. Almost every style starts with a # and not a class.
Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
I don’t know what this picture in firebug is conveying (by the way, firebug is my savior. Life would have been impossible without Firebug)
Whenever layout’s in a mess I am tempted to use position:absolute. Invariably it ends up in a bigger mess.
I know I am doing a lot of things wrong(and I need to get it right) here but I manage to get things into place and somehow show it up, only to see it messed up in a different browser.
I don’t want do a primer on CSS or CSS for dummies. I know more than that. I want to learn CSS the right way. Focusing on problems like the examples I showed above and rectifying them.
Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.
Check out Designing With Web Standards by Jeffrey Zeldman.
Here are some general rules to live by:
Tables are good for tabular data. If the data you're presenting belongs in a table, don't go out of your way trying to make a grid out of <div>s. Doesn't make sense.
As far as layout is concerned, use <div> tags, stay away from tables. Get to know the float property well. With CSS3, there are going to be new, improve standards to the display property. Learn them.
display: none completely removes the element from the viewport. Conversely, visibility: hidden retains the whitespace that the element would have otherwise taken up. In both cases, the element remains in the DOM.
General rule of classes and IDs. Page elements and IDs should have a one-to-one relationship per page. For example, #Column1, #Column2, #Footer, #Header. Page elements and classes, on the other hand, should be a many-to-one relationship, like: .container or .navLink. Use classes when you know you're going to be using a particular element quite a bit.
Think in terms of efficiency. The less style rules you have, the more quickly your page will load and the easier style issues will be to debug.
I have about a million other things to say but that should get you started.
For layout-driven CSS, be sure to check out Everything You Know About CSS Is Wrong. It's a bit cutting edge, since IE 7 doesn't support display: table (pity, I know), but it does cover traditional layout CSS techniques like floating and absolute positioning, and provides a good transition from table-based layouts to CSS ones. I highly recommend it.
I don't know if you're building off of any dynamic language or if you're just coding raw HTML, but you should also look at using SASS in your projects, as I think it helps force you to pay more attention to inheritance. Otherwise, reviewing more "rudimentary" tutorials (like CSS for Dummies) might actually be helpful, as they go over a lot of CSS's fundamental principals in detail.
Lastly, CSS works best when you have semantically correct (x)html underneath the hood. In my opinion, it's easiest to see and learn "good" CSS when you have great, semantically correct html underneath. Here's a good overview of when to use what tags. Generally, I find it best to write my content with no regard what-so-ever to how it will look later, then use CSS later to make it gorgeous.
As always, you can pick up lots of neat tips and tricks at CSS Tricks, which have always helped me learn more about the correct usage of the language (like when I learned about overflow: auto for contained floating elements! Genius!).
Hope that helps!
Visit CSS Zen Garden to see what you can do only with CSS.
Visit W3 schools and follow the tutorial. It might seem simple for you, but you will learn the basic stuff.
Visit some sites, such as A list Apart to see how to do things and learn tricks.
See if a CSS framework suits your needs (such as 960 Grid).
I'm assuming you've installed Firebug?
Also, http://www.doctype.com might get more relevant results.
Practice, practice, practice. You know what you don't know, and that is the key to success in my mind. Every project you do, try to improve your skills, and eventually it will become second nature to do it the right way.
Eric Meyer's Cascading Style Sheets 2.0 Programmer's Reference is a great resource to understand exactly how selectors and rules work, and serves as a great reference as well.
Some thoughts on what you posted.
A Master Reset style sheet will
help with browser differences.
And Tabular data should use tables.
It's layouts that should avoid table
tags in favor of css.
Plenty of people here give good advices. I'll just add two more:
First, try to write valid (X)HTML. You can easily test your HTML code using W3C's HTML validator. Focus mainly on content, not on style.
Second, try to write valid CSS, preferably in a separate .css file. Avoid using the style attribute. (This part can be hard, if you want to support certain old browsers from Redmond). You can test your CSS using W3C's CSS validator.
Read CSS: The Definitive Guide by Eric Meyer. He explains why CSS was created, how it works (according to the standards), and will give you the background to understand the finer points. It also makes a good reference.
Experiment in Firebug
I don’t know what this picture in
firebug is conveying
Firebug itself can help you there. Do this:
Create a div with some text in it.
Use CSS to give it padding: 5px; margin: 5px; border: 1px solid black;
Examine it in Firebug, as you show in your question.
Click on any one of those numbers in the box model it's showing you, and start pressing the up and down arrows (or type a different number).
See how it changes in real time? This is one of the best things about Firebug: it lets you tweak without reloading, then modify your stylesheet when it looks right.
Keep doing this until you understand how padding, margins, and border work.
I think you should use, for your layout needs, one of the so called "css frameworks" (960.gs for example).
They are fast and reliable enough to build cross-browser layouts and also easy to read and understand as well, so you can learn all the good practices while you are coding.
CSS are easy and aren't a real programming language: don't be afraid of the word "framework" ;)
You could start by reading some good books on the matter. The ones of Eric Meyer are hands on and of very high quality. The other book that of which I learned a lot was the Zen of CSS design book.
And the rest is effort and practice. Be sure that you understand why something works the way it does, don't be satisfied with 'trial-and-error' css development.
http://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/ref=sr_1_1?ie=UTF8&s=books&qid=1255629419&sr=8-1
http://www.amazon.com/More-Eric-Meyer-Voices-Matter/dp/0735714258/ref=sr_1_1?ie=UTF8&s=books&qid=1255629449&sr=8-1
http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X/ref=sr_1_1?ie=UTF8&s=books&qid=1255629462&sr=8-1
Well, I will address some of these issues as best I can.
The difference between display:none and visibility:hidden is when the display is set the space for that item is not reserved. So imagine it as when the display is set the item is 'gone' off the page. Whereas if you are using the visibility option, the elements are on the page, in their place just invisible. Did I explain that clearly? Hopefully, that makes sense for you.
As far as the padding, border and margins, this is all referred to as the CSS Box Model. The information is contained as the element, its padding, border, then its margins. So padding is the distance between the element's content and its border whereas the margin is the distance between the border and the neighboring element. Again, I hope this helps clear this up for you a little bit.
Transitioning to CSS is sometimes tricky but well worth it.
Well the basics are quite simple, you should really get a hang of the quite easy if you've already don't some css coding.
The best practices, browser quirks, hacks and other sketchy stuff concerning crossbrowser layout is something else.
Here is my suggested reading list, all of them are on my bookshelf and certainly worth reading! If you ask me i'd say these are the book you should have read if you are a webdesigner.
Designing with webstandards
CSS Mastery
Bulletproof webdesign
for me, Pro CSS and HTML Design Patterns by Michael Bowers changed it all. no more endless trial-and-error, but problem - pattern - solution. indispensable.
Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
Are you putting your stylesheets at the top, in the <head> section?
Are you declaring explicit sizes for images, or does the browser have to guess, then rearrange things when the image shows up?
Depending on your learning style, I might recommend going straight to the source: the definition of CSS. You can find each of the various specs here: http://www.w3.org/Style/CSS/. While the specification doesn't really cover specific browser quirks (if it did, they wouldn't be quirks, would they?), it does a really good job (for me) of explaining how each piece works.
I will tell you my secret: follow this two classic tutorials
Listutorial
Floatutorial
And you'll know 80% of what you need to know about CSS.
30 Websites to follow if you’re into Web Development
http://htmldog.com/ is, in my opinion, one of the definitive resources to learning front-end web development the proper way.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Mine would have to be the float and margin bugs...
If you float an element, and then specify a margin for it, it will double the margin.
The solution to this is to add display: inline to the element. This will stop the double margin, and all other browsers will ignore it because only block level objects can be floated.
I wish I'd known that I'd be spending hours trying to fix a bug in IE 6 over and over again for years on end and I really would have been happier delivering pizza.
I wish I knew about quirksmode.org. The compatibility tables, bug reports, javascript examples are all very useful.
Don't code for IE6 first. That's the path to madness.
I wish I'd known that many IE 6 error line numbers are off by one.
Number one thing: hasLayout
If I had known about this from the start most of my worries would've been solved.
I even regard it as a worse problem than IE6's stupid box model.
That if your really anal and spend shit loads of time on it that it pays off and you then become an IE guru fearing nothing but the sad self you have become...
Although it is nice to impress people with your amazing IE bug fixing abilities...
Most IE bugs can be avoided by using different (normally better) CSS methods and super clean logical xhtml
Always clear your floats with overflow hidden (or just hasLayout for IE)
Understand what hasLayout is (basically a css porperty that gives IE a kick in the ass)
When you start devving sites check IE6 all the time, untill your a pro ;¬P
Unfortunately, and I do train a small team of 6 developers, experience is one of the only things that really helps with these problems, stay calm, do good research in google and post your problem to a community if you really are stuck with a good demo of the problem.
Nice links >
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/ (although I recommend the PNG fix by Bob Osola /-0)
http://www.gtalbot.org/BrowserBugsSection/ (amazing and funny... great!)
Good luck!
I wish I'd known why Microsoft hated me so much.
I wish I'd known about Position is Everything, but specifically the peekaboo bug has always got me.
I wish I'd known about
the conditional comments to include stylesheets just for IE
xhtml headers to make IE render in compliant mode
the box model problem, so that I knew what to put in my IE stylesheet
After I learned about these things, I haven't really used a lot of time fixing problems in IE6
.Hauge
Transparent PNG should have been supported...
the underscore trick
if you put an _ infront of the css atribute it only gets read by ie6.
ie. _border: 1px solid #000000;
creates a border only in ie6
Probably that SELECT elements dont render with the correct z-order.
For example, if you have a floating DIV with a higher z-order overlayed on top of a select - the SELECT element will still render on top of the DIV.
Infuriating.
The rendering quirk which causes a small white space underneath an image in a table cell if there is any white space between the end of the img tag and the closing td tag.
This renders right:
<td><img src="myimage.jpg"></td>
This renders wrong:
<td>
<img src="myimage.jpg">
</td>
The main problem we have had is with scheduling enough "fix in IE6" time. That and the designers' tendency to come up with stuff that is easy to do in Flash and tricky to achieve in CSS has cost us many days of extra work.
I wish I knew that my code didn't validate. Or that an XML declaration in XHTML puts IE into quirks mode.
http://www.pushuptheweb.com/ or one of many other sites pushing to drop IE6 support. I'm aware that rendering web pages correctly for IE6 visitors is the core of many web businesses, but sooner or later something has to give. I just dont get why MS doesn't force an update >.<
That even with all the PNG hacks in the world, if you're using PNGs as backgrounds in your divs (to make, for example, a panel with rounded borders), you're headed for a world of pain. (Links and other elements not being clickable, IE6 crashing in earlier versions of the png dll, etc.)
In summary: don't use transparent background PNGs if you want it to work in IE6.
The importance of DOCTYPES in IE, and
Web Bug Track
I Wish I'd Known That Internet Explorer Is The New Netscape Navigator 4.7.x
1
hasLayout and this excellent explanation:
http://www.satzansatz.de/cssd/onhavinglayout.html
I had a new lease on life once I'd wrapped my head around it! Ensuring that the containing element hasLayout fixes the vast majority of my problems.
2
jQuery!! Writing IE-specific CSS is bad enough, so I'm glad I rarely have to worry about JS anymore.
I wish I'd known about dev tools like Firebug Lite and HttpWatch that make debugging lots easier.
in addition to other IE bug lists that Ross and Loque gave above (gtalbot.com, what a beautiful site!
http://css-discuss.incutio.com/?page=InternetExplorerWinBugs
http://webbugtrack.blogspot.com/search/label/IE7
http://www.enhanceie.com/ie/bugs.asp
http://channel9.msdn.com/wiki/internetexplorerprogrammingbugs/
(like gtalbot, it'll take you hours to scroll thru this
and, hey, IE 8 beta 2
http://css-class.com/test/bugs/ie/ie-bugs.htm
finally, the IE voodoo doll!
http://www.flickr.com/photos/chisa/1349759901/
*{margin:0; padding:0; border:none}
i swear to god this line changed everything. presto! everything is the same size! and then i dove into the rabbit hole that ya'll find me in now. marvelous.