Can some body tell me, why my menu disappears when I open "Case Studies" and when I put a mouse on it.
I am identify the problem in the transform: translate() property, but do not know how to fix it.
http://dinamickadevelopment.github.io/Nousles/index.html
Many thanks.
remove
#header {
z-index: 55;
}
from index.css line 33
That will bring back your menu when you select Case Studies
DCdaz is correct. I've checked it in chrome, safari, firefox. Firefox displays it just fine (though your :hover for the top-right corner isn't working for firefox). Removing the z-index: 55 fixes it in chrome and safari and does not adversely affect the page in firefox.
You're using a lot of z-indexing on this site. I realize that a lot of this is coming from bootstrap and the like, but you might want to consider a different way of handling it. Chris Coyier presents an interesting idea taken from video game development. However it utilized using a pre-processor for css, so it' might not be an option for you. He does discuss another method that would work, but, for personal reasons, he doesn't like them.
Anyways, long story short, removing the z-index: 55 from line 33 on index.css seems to fix the problem. Your site looks nice enough that I doubt you don't already know most of this, but you say you tried removing it, so here are some ideas why that may not have fixed it:
How did you get rid of the z-index:55? Did you delete it from your files and re-upload it? If you did then make sure you clear your cache before you check to see if the issue is gone away. Chrome and Safari have built in ways to do this. I don't know of a quick way in Firefox, but there are ways. CSS especially can fall prey to this.
If you didn't delete it from the file (which I don't think you did, since I still see it when I check your code), then you might have removed it by using the developer tools directly in your browser. All major browsers (that I know of) have this option. This is the way I checked it and it worked for me (and probably DCdaz), so I have no idea why it wouldn't for you.
If you didn't use either of the methods above then you might have edited and ran your code locally. I have no idea why it wouldn't have worked locally, but that's the last thing I can think of.
If you didn't use any of the above methods I'd love to hear how you went about removing it. I'm always up for learning new ways to skin a cat.
EDIT
I didn't even consider that you may have simply changed the z-index value to something else. I tried changing it and z-index: auto, z-index: inherit, and z-index: initial all seem to work just fine, but any number value (even negative ones) allow the error to remain intact. So either delete it or change it to auto, inherit, or initial.
...Screenshot of my abomination
jsFiddle: http://jsfiddle.net/ELZD8/
It was looking fine, until I needed to change the fieldset size: and since I was using position:relative for literally every element on the page, changing the fieldset screwed everything up, bad. Forgive me but I'm pretty new to CSS and I know I'm using wayyy too much code.
So, as you can see in the imgur, it looks like hell now. What's the quickest way to fix this? I know it probably has to do with floats and margin:left and margin: right, but could someone provide some insight before I go bananas?
Any input is appreciated, cheers.
Easy fix:
You need to use proper div sectioning, that is, make each section a div and then place elements inside each div, otherwise it becomes a clusterfuck. You also need to list your elements in your css file by order of appearance in the html, otherwise it's painful to look for things...
Don't use massive amounts of <br>, use padding and margin css rules instead
Yes, you may use position:relative, but since you asked for advice, I am strongly against it, it takes longer to build, longer to update, longer to fix, etc. Use sections, floats and keep it simple, Simple is your friend.
I also suggest strongly against using fieldset, use <form> instead, its a major html/css breaker imo.
Here's a chopped up example after cleaning/tweaking the code considerably. There's still a thousand ways left to clean and refine it but at least now it looks more like what I suppose you wanted:
http://sotkra.com/stackoverflow/positionrelative/index.html
I found this method:
.fontSmooth { text-shadow: 0 0 1px rgba(51,51,51,0.5); }
and it works perfectly! but in some places it is said that it's a bad solution (with no further explanation), why is that?
It'll probably work, though there are two main issues.
First off, as coreyward originally pointed out (though he apparently deleted the post after one downvote), the text-shadow property is part of an ever-changing HTML5 spec. It's relatively new on the scene, and its syntax and implementation are liable to be extremely different across browsers and may change even further over the next few years.
The more short-term issue here, though, is that blurring a text shadow takes serious work on the part of the browser. It's fine for maybe headers and the like, but if you're planning to apply this to your whole page, please bear in mind that it will run much slower in older computers, and even scrolling up and down will be laggy. So, be careful in deciding to what extent such smoothing is appropriate.
I'd also like to point out that, if the user hasn't enabled anti-aliasing system-wide, it's quite possible that the user doesn't want it. It's just kinda silly to use CSS tricks to override a platform-level setting.
Normally you should not try to fix that kind of things that are responsibility of users-side. It might work well under certain conditions, but as shadows were not meant for that, you cannot be sure its visual impact on different conditions.
Here's the site in question: http://cbcsettlementfunding.com/dev/
Almost finished up with development, just have a few bugs left to fix in IE6, one of which is particularly annoying: horizontal scrollbars on every page of the site.
Firstly, I can't readily identify what is causing this since it's only happening in IE6 (7, 8, and 9 beta are unaffected).
Secondly, the one trick I had hoped to quickly fix this issue for the time being, setting "overflow-x: hidden" on the html and body tags, isn't working either.
I've been staring at this code for days and can't find anything wrong, so I'm hoping it's just something small that I may have overlooked like forgetting to close a tag or something small.
Thanks in advance for your help!
Try adding <style type="text/css">#sb-container { left:0; }</style> to the head section of your pages.
I know that this might be considered as a non-answer, but if it's eating away at a lot of your time I would strongly recommend simply letting the scrollbars be. Unless the client has a substantial amount of IE6 traffic, this might be the perfect time to let "graceful degradation" take its toll. Especially since an extra scroll bar on the bottom (probably) isn't breaking the layout.
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.