I am a Programmer and not a Designer.
My boss asked me to modify the print.css
I modified the print.css 10 Hours, nothing nothing and nothing happened.
If with IE everything looks good, in FF it looks horrible.
If with FF everything looks good, in IE it looks horrible.
What did i wrong?
Pls have a look at this website
www.trigami.com
Thanks
You could try validating your CSS and your HTML.
If you can get the CSS to look good for each individual browser, just serve different CSS files based on which browser is being used. You can check for IE/CSS on the server, or use a client-side trick.
If you are having specific problems with your CSS - you should ask questions about them, but asking people to "figure out why your site looks horrible" isn't likely to get you much help.
You might start by using a reset CSS, there's this widely from meyerweb.com or the Yahoo option in YUI site, this way you'll reset the nasty defaults from the browsers. After using reset CSS I've found it's easier to get your site running the same in every browser
It's a bit hard to help you if you don't give any details.
But it sounds like you've bee hit by the box model problem
Related
I would like to test out CSS on a webpage that I don't have direct access to. Does anyone know how to achieve this ?
So I write my CSS, and on save, that code is used on the webpage.
Of cause this will only happen on my local machine
You could use a simple Bookmarklet, similar to how various jQuery Injectors work.
http://mcdlr.com/css-inject/ might do the trick. For something a bit more dynamic (which takes a URL to a CSS file), check out this jsfiddle I've whipped up! It shouldn't be too hard to modify to pass in inline styles, etc.. so should be a good starting point.
javascript:var%20csshref=prompt('enter%20css%20url');var%20s=document.createElement('link');s.setAttribute('href',csshref);s.setAttribute('type','text/css');s.setAttribute('rel','stylesheet');document.getElementsByTagName('body')[0].appendChild(s);void(s);
Re your comment...
You can just use F12 Dev Tools. Chrome, Firefox and IE are all quite good now. (My preference is Chrome).
So I have stumbled upon this problem, CSS just doesn't work on my computer, and what is more interesting, it doesn't work only for files that I create and it doesn't work only for me. So when I go to any webpage, CSS will work perfectly, however when I go to websites created by me, it wont work only for me, but it will work for other people.
Things I've done so far:
Tested other browsers (didn't work on chromium and firefox)
Checked from other computers (CSS worked on them)
Told other ppl to check it(worked for them)
Some people said that it might be because of adblock, disabled it
everywhere, still no results.
I have Linux Mint 15, and I either suspect that it might be something to do with either my OS or the way I save files, but I'm clueless of what to do to be honest, I've never had a problem like this before.
The link to your stylesheet is bad. Stylesheets have type text/css.
Solution: change type="style/css" to type="text/css".
There are other errors in your page as well, such as the missing > after <ul, so you should validate your source, for instance with the W3C Validator. But the above one is the problem you're after.
I've just recently downloaded dreamweaver cs6. I've been following tutorials online, and I've run into a bit of a snag. I'm almost embarrassed asking this question, because I know I must be missing something obvious, but here it goes:
I'm following a tutorial right now on making a drop-down menu out of pure CSS. After implementing the first few lines of CSS code I was losing all of my sub menus in the drop-down. After pulling my hair out trying to figure out why for the better part of 2 hours, I finally preview in Firefox. (can't believe I didn't try earlier.)
It all seems to work fine in my browser, but I was wondering: Is there a way I can look at it in Dreamweaver? Its really inconvenient popping in and out of my browser everytime I want to check something. Like I said, I'm basically (not really basically, I just am) a complete noob at all things web-design. Thank you for your time.
Dreamweaver is just an IDE and it is not a browser. It doesn't execute :hover events and JavaScripts. You need to preview what you have done using F12 and check it out. :)
Short answer: no. At least, there's no reasonable expectation that you should. The problem with web-design is that the only real way to do things properly is to code by hand and preview it in a browser in another window - this does come as a culture-shock to "designers" who are used to WYSIWYG programs like Photoshop and InDesign, but the web is a completely different media where the underlying markup matters the most and is open to re-interpretation by browsers.
Dreamweaver has historically had good WYSIWYG rendering (thanks to their partnership with Opera years ago) but ultimately it's still not the best way.
I note that Microsoft's "Expression Blend for HTML/JS Applications" (there's a mouthful) does actually have first-class design-time WYSIWYG support because it works directly with an instance of IE, so you can test things like :hover and client scripts at design time - unfortunately it isn't suited to actual "web" sites - just "desktop" HTML, which is a shame.
I don't know if there is any easy answer to this, but can anyone give me any idea why my site is totally crapping out in IE8? Is there something relatively easy that I can address to make it not become a complete mess?
Or at least any area to start investigating where similar problems tend to crop up in IE8?
Thanks!
http://firewalkcreative.com/2012/
Start by viewing and fixing validation errors. The most critical errors are often structural ones, like an unclosed tag. While it's good practice to fix non-structural errors (such as the one you mentioned in your other post), browsers are forgiving if you get the basic structure right.
The bigger culprit (but don't neglect fixing validation errors) is that you are using HTML 5 tags which IE8 knows nothing about like section and header. Thus, the CSS styles aren't applied to those tags. Modernizr will easily fix this.
I noticed it was using html5, then got a timeout upon refresh. Without being able to access the site I can't tell you exactly, but html5 and ie8 are going to cause problems (most of the time) unless you use a workaround like a .js plugin.
I frequently use Modernizr
I'm doing css for a website. I send the html and css to a guy, he puts it into ASP.net. The problem is that the transfer didn't end well for my code and it needs some fixing. The problem is that when I look at it in Chrome, or Firefox, or IE8, I get three completely different renderings. I spent a good amount of time trying to fix a drop-down menu that is supposed to appear while hovering over a link. The one he had in place from ASP.net worked in IE, kinda worked in Firefox, and was completely broken in Chrome (I haven't tested Safari or Opera.) Just getting it to look basically the same in firefox and chrome was a struggle. The html source is showing me two completely different pages as well.
Does anyone have experience with this? I know nothing of ASP.net, and it seems like the guy is modifying my layout with a wsyiwyg (I found tables used in random places, which I did not put there.) Faced with this, what is my best option? Is this fixable, or am I in over my head?
Many times WYSIWYG programs don't generate code that results in reliable, consistent renderings. However, there are a few things you can do to check your site's consistency.
You can use a program like Adobe BrowserLab (there's a free trial right now) to automatically render your page in multiple browsers side by side
You can use the w3 Validator to make sure that your code is standards compliant. If your code isn't standards compliant, then you will likely have issues across browsers.
Note that you can force asp.net to generate XHTML Transitional- or Strict-compliant code (if that's the standard you choose to implement) via the web.config file. Use the directive
<xhtmlConformance mode="Transitional"/>
if you want to enable this behavior.
Was your code rendering fine in those browsers before you sent it off to the .NET guy? If so, the programmer is doing something to muck up your work. ASP .NET won't change the way your code renders... it's simply the Windows equivalent of PHP (simply put).
I would suggest (if you haven't already) testing your code before hand-off to verify proper rendering. Take some screenshots, and if after sending your code to this developer things break, you can point out that it was working until he started messing with your markup. If that ends up being the case, at least you know it wasn't you. If it was, then we have more work to do. :)
Can you provide any samples?
The html source is showing me two completely different pages as well.
That sounds like your asp.net guy is doing something wrong there. You can use asp.net to do browser-dependant rendering, but it sounds more like his job is to just make the site render what you gave him, and it's usually better to get your html and css right to begin with.