Mindaugas Posted March 19, 2011 Share Posted March 19, 2011 Hello all, I`m just creating a simple website for my friend, now done just with basic template how it will look. When i see it in Firefox - everything is ok, but in IE ... omg it hurts my eyes ! ;( Check this out , and please, any tips ? http://mpersonal.puslapiai.lt/ Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 Well, quite some people hate IE, because they have no idea what they are doing. Not saying that that's the case here, but your markup is missing something vital And that's a doctype, this makes IE to go back to IE 5 isn't that great! See my signature....5 out of 10 this is the cause of browser differences So it's not IE it's you as coder that should supply a doctype. Anyway i like the looks of your site, nice black white and red great all time combo Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 so in otherwords place a doctype above the <html>tag Typical usage: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> ... </head> <body> ... </body> </html> also make sure it's at the first line and there is no space at the left of that doctype. Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted March 19, 2011 Share Posted March 19, 2011 Sometimes IE is more forgving, I looked at it in firebug and looked at the css, nothing stood out to me. Try the doc type thing and see what happens. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 Sometimes IE is more forgving, I looked at it in firebug and looked at the css, nothing stood out to me. Try the doc type thing and see what happens. IE does not forgive omitting a doctype! and it shouldn't. this is typical the case here. Your page is not centered in IE, because of omitting the doctype. it now interprets the page as if it were IE 5. And for centering in IE 5 we need text-align:center; and not margin :0 auto; Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted March 19, 2011 Share Posted March 19, 2011 Sometimes IE is more forgving Sometimes means sometimes and I wasn't talking about doctype. Is a missing doc type the only thing that can go wrong in html or css coding? But true the file does need a doc type. Quote Link to comment Share on other sites More sharing options...
Mindaugas Posted March 19, 2011 Author Share Posted March 19, 2011 Thx all of You ! Now I won`t ever forget a doctype ! but.. When i added it it helped about centering, but now new strange things appeared: Firefox changes: Home page missing left column Some other pages missing footer and comment is showing IE changes: Galerija page missing image About missing column i tried to make that div wider but it didn`t worked.. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 ah good to hear that worked out. Now what i would do is place a reset.css above your existing css. This will screw up some things at the beginning, but it will make sure that most other browser differences are gone. You can find one here, i use it myself: http://meyerweb.com/eric/tools/css/reset/. in a nutshell, it will reset the differences most browsers have. after that you can easily style elements yourself. More info can be found here Now something to pay attention to is that IE 6 has a margin bug on floated elements, to eliminate that you can say display:inline to anything that is floated (easiest to remember way). After you have done that, let me know, what version you see weird stuff and we will fix it. also, i haven't looked, but images require an alt="" tag in the declaration, so don't forget that. If you use a background image, make sure if you use no-repeat that there is a space between no-repeat and the url(image.jpg) like: #element{ background: #000 url(../images/image.jpg) no-repeat; } instead of #element{ background: #000 url(../images/image.jpg)no-repeat; } Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted March 19, 2011 Share Posted March 19, 2011 Acording to Firefox you have your main div commented out. You have <!---- END side ---> Not <!-- END side --> and it's the same with some of the others. It's two dashes not anymore. Back in the day if you typed <!--END side --> in fire fox with no space between the dash and the E in END it would mess it up. I would spend a day looking for the cause of my problem. I don't think firefox is that picky any more but I still make sure I use two dashes and a space. Noting your tags on divs is a good idea on the big ones and on big files (for people like me anyway). Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted March 19, 2011 Share Posted March 19, 2011 PS cssfreakie I like your blog Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 PS cssfreakie I like your blog cool thanks, i just started with it, since i saw so many of the same questions around here. Quote Link to comment Share on other sites More sharing options...
Mindaugas Posted March 19, 2011 Author Share Posted March 19, 2011 Well guys what I can say, THX ! really, a lot ! You`re so helpful and not angry at me well the footer was missing because i was using <!---- comment ----> for my comments, now i fixed it to <!-- comment --> and it works fine ! and my image in IE was missing because I forget to write slash at the end of img line: <img id='greta' src='$image_folder/$image_name' alt='$image_name'/> And yes, that thing with CSS reset is cool, thx for sharing it ! Big thx! Try look now in both IE and Firefox, looks cool well maybe design is crap but it works ! Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 your design looks good enough! black white and red are great. Just for your next project, start of with a valid doctype and a reset.css than design the website for firebug (gecko) and adjust it with conditional comments for specific versions of IE. Oh And I can also recommend to use <h1><h2><h3> elements for your headings. indexing bots love em good luck! Quote Link to comment Share on other sites More sharing options...
Mindaugas Posted March 19, 2011 Author Share Posted March 19, 2011 Thx for tips maybe some day i can earn 5euro/moth for creating website Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 19, 2011 Share Posted March 19, 2011 or 50 an hour Quote Link to comment Share on other sites More sharing options...
Mindaugas Posted March 19, 2011 Author Share Posted March 19, 2011 omg! well now 5euro/month would be nice :} Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.