Martaizoku Posted February 12, 2013 Report Share Posted February 12, 2013 Hello! I have a little problem with my html/css, It only works in Chrome, in Safari or IE the site looks completely different. In most similar questions the problem was the type="css", what needs to be type="tekst/css ". Unfortunately that was not the case. I hope someone can find something in my code! Note: I am veeeeeery new to all of this (also new to this forum), so my html and style-sheet might (and probably will) be full of useless codes (correction of course appreciated!), but now I'm focusing on this - only works in Chrome - problem . (My English might be rubbish, sorry for that in advance ) So here is the HTML <! DOCTYPE html> <html lang=nl> <head> <meta charset=utf-8> <meta name=description content="pagina beschrijving"> <meta name=keywords content="key, words"> <title>Pagetitle</title> <link rel="stylesheet" type="tekst/css" href="css/index.css" media="screen" /> <style type="text/css"> body </style> </head> <body> <div id="pageframe"> <div id="header"> <img src="pics/header.gif" width="1440" height="1000"> </div> <div id="menu"> <ul> <li><a class="back" href="#"> BACK</a></li> <li><a href="#">MENU1</a></li> <li><a href="#">MENU2</a></li> <li><a href="#">MENU3</a></li> <li><a class="bprojects" href="#">bprojects</a></li> </ul> </div> <div id="content"> <div id="text"> <h3>Lorem ipsum dolor sit amet </h3> <hr> <p> Lorem ipsum dolor </p> <hr><p> Lorem ipsum dolor </p> <p> Lorem ipsum dolor </p> <p> Lorem ipsum dolor </p> </div> </div> <div id="footer"> <p class="foot"> <a class="voeta" href="http://www.Baka.inmyclan.com">Bprojects</a> - Name ©Copyright 2013 - 2014 </p> </div> </div> </body> </html> And my stylesheet: html, body { height: 100%; } hr { height: 0; border-width: 2px 0 0 0; border-color: black; border-radius: 3px; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); border: 0; height: 2px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); } body { overflow-x:hidden; background-image: url(../pics/bg.gif); background-repeat: no-repeat; background-attachment:fixed; background-color: #00000; } h1, h2, h3, p { font-family: ARIAL; } /* reset voor browser defaults */ body, form, fieldset, input, textarea { margin: 0; padding: 0; border: 0; outline: none; } #fbbanner { position: absolute; top: 100px; left: 1300px; z-index: 2; margin-left: 0px; } #soundcloud { position: absolute; top: 100px; left: 1240px; z-index: 2; margin-left: 0px; } #pageframe { width: 1440px; margin-left: auto; margin-right: auto; position: relative; max-width: 1440px; } #header { height: 302px; width: 1080px; position: relative; top: 0px; z-index: 1; margin-left: 0px; } li { display:inline; } #menu { text-align: center; margin-left: 25px; font-family: ARIAL; font-size: 20px; position: relative; top: -5px; left: 140px; z-index: 3; } .bprojects { opacity: 0.5; color: black; position: relative; top: -130px; right: 150px; } .back { color: black; position: relative; top: 7px; left: -200px; } ul { padding:auto; margin:0px; } a { text-decoration:none; color:white; margin-right: 60px; font-weight: bold; } a:hover { color:#123456; } a:active {color:#123456;} #fbbanner:hover { opacity: 0.7; } #soundcloud:hover { opacity: 0.7; } #content { height: 660px; width: 1040px; position: relative; top: -25px; left: 200px; z-index: 1000; } #text { text-align: left; position: relative; left: 20px; top: 50px; margin-right: 40px; z-index: 1001; } h3 { text-align: center; text-shadow: rgba(0, 0, 0, 0.199219) 1px 3px 2px, rgba(255, 255, 255, 0) 0px -4px 30px; } p { font-family: ARIAL; font-size: 11pt; position: relative; } .welkom { text-shadow: rgba(0, 0, 0, 0.199219) 1px 2px 2px, rgba(255, 255, 255, 0) 0px -2px 15px; position: absolute; top: 210px; left: 115px; font-size: 20pt; } #footer { position: relative; text-align: center; color: black; font-family: ARIAL; font-size: 12pt; position: relative; bottom: 10px; } p.foot { text-align: center; text-shadow: rgba(0, 0, 0, 0.199219) 2px 6px 5px, rgba(255, 255, 255, 0.398438) 0px -4px 30px; color: black; text-decoration: none; } .voeta {color: black;} Thanks, Martaizoku Quote Link to comment Share on other sites More sharing options...
newseed Posted February 12, 2013 Report Share Posted February 12, 2013 (edited) The correct type for the css link should be type="text/css" And your doctype should not have a space between the exclaimation point (!) and the the word DOCTYPE It should look like this: <!DOCTYPE html> Edited February 12, 2013 by Eddie Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted February 14, 2013 Author Report Share Posted February 14, 2013 The correct type for the css link should be type="text/css" And your doctype should not have a space between the exclaimation point (!) and the the word DOCTYPE It should look like this: <!DOCTYPE html> Thanks, but unfortunately that doesn't fix my problem.. Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 14, 2013 Report Share Posted February 14, 2013 What exactly is it that only works in Chrome and not anywhere else? Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted February 14, 2013 Author Report Share Posted February 14, 2013 Well, the images are in place, but the content is at the bottom of the page, also, the menu is not as it should be in firefox or IE, it becomes a simple (not-inline) link again. Like this: menu1 menu2 menu3 menu4 menu5 Instead of: menu1 menu2 menu3 menu4 menu5 Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 15, 2013 Report Share Posted February 15, 2013 It I upload the code as you have provided it - http://aandbwebdesign.com/KSforum/martai1.html - I get in: Firefox: a black outline around a large rectangle with some symbol in the upper left corner. IE9: Same rectangle, red X in upper left Opera: Same rectangle, the word "image' in the upper left Chrome: here I see your lorem ispsem content. When I make the correction that Eddie suggested - removing the space between '!" and 'DOCTYPE' and fixing the spelling of 'tekst' to 'text' - here: http://aandbwebdesign.com/KSforum/martai2.html I see an actual page displayed in all browsers. Note that your image won't show anywhere as I don't have it. then, looking at your code, you are missing several quotes in your head section. <meta charset=utf-8> <meta name=description content="pagina beschrijving"> <meta name=keywords content="key, words"> should be (you're missing the quotes) <meta charset="utf-8"> <meta name="description" content="pagina beschrijving"> <meta name="keywords" content="key, words"> I also removed this: <style type="text/css"> body </style> It's incomplete. I've created a spaceholder image for your dimensions: 1440 x 1000 and that gives me this: http://aandbwebdesign.com/KSforum/martai3.html Now looking at your CSS, I note the following: The image you are inserting into #header via the HTML is 1000 px high, but in the CSS you define #header 302 px high. If I reduce the image to fit into the header div, all the content suddenly moves out from under the image (it was covering it) now things work. I did change the background color so the white menu text would show.: http://aandbwebdesign.com/KSforum/martai4.html PS - I started this post yesterday, but got interrupted and could not finish. I now see your post #5, but we cannot help you much unless we see everything you have - and that is HTML, CSS, and images. If your page is online, please post a link. Quote Link to comment Share on other sites More sharing options...
kralcx Posted February 18, 2013 Report Share Posted February 18, 2013 border: 0; height: 2px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); } Even though vendor-specific extensions are guaranteed not to cause conflicts (unless two vendors happen to choose the same identifier, of course), it should be recognized that these extensions may also be subject to change at the vendor’s whim, as they don’t form part of the CSS specifications, even though they often mimic the proposed behavior of existing or forthcoming CSS properties. Although these extensions can be useful at times, it’s still recommended that you avoid using them unless it’s absolutely necessary. It’s also worth noting that, as is usually the case with proprietary code, the extensions will not pass CSS validation. Having said all of the above you have some errors in your linear gradient code. Vendor specific code comes before standard code. You're also missing the vendor specific code for IE plus you have one too many sets of rgba code in your code. I rewrote it below: background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75)); /* vendor specific code for webkit browsers */ background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75)); /* mozilla */ background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75)); /* opera */ background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75)); /* IE10 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#9900000 /* IE 5.5-7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000 /*IE8 */ background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75)); /* standard code */ Quote Link to comment Share on other sites More sharing options...
grabenair Posted February 18, 2013 Report Share Posted February 18, 2013 Here are a couple of links that may help you. This one is for CSS http://www.w3.org/TR/css3-syntax/ it is a little technical but not too bad. This one is for browser support of things like box shadows, gradients excedra. It will tell you if you need to put on the vendor-specific extension for each browser version. http://caniuse.com/#feat=css-boxshadow Just put what you are looking for in the search bar. This one is for gradients http://www.colorzilla.com/gradient-editor/ it is the lazy way to make gradients or the easy way depending on how you look at it. Another tip is when you have code that you will probably use often keep it in a folder for reuse. This is good for things like forms that you know work well. Then all you have to do is change a couple of things in the code and you are ready to go. Remember once you get going reuse code, for me it is the number one time saver. Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted June 12, 2013 Author Report Share Posted June 12, 2013 (edited) Sorry for not responding, I was (and am) very busy with school and other things (plus my pc crashed after many weeks of not being able too use , well, almost anything, notepad crashed almost everytime I opened it xD. But I have upgraded it now so no more excuses), sorry! I did read the replies and I really did appreciated all of them! Andrea said you guys couldn't be of much help unless you could see everything, so I have been putting effort in uploading my websites to the web, and I now have an own domain etc.! This is my website Note that it does only work in chrome, the site is messed up in mozilla and IE. (On mobile devices it works good tho, just like chrome) I haven't paid much attention to the content of my website, most of it is Lorum Ipsum etc., some of it not. Most links in menus are or not yet given or not yet redirecting to the right page. MANGA is redirecting to a second Music page with a different design. The website when you go to MUSIC is not yet finished either. But my main problem now is that the website (all of them) won't show how they should in Firefox and IE. But other tips than how to fix that problem are always very much appreciated as I want to become better at this hobby of mine! I haven't yet tried all of the things you guys said, I will soon! But I thought now that something is online I better show you guys quickly so maybe you instantly see the problem now ( xD ) Thanks in advance and sorry again for not replying for such a long time. I look forward to hearing from you guys! Martaizoku Edited June 12, 2013 by Martaizoku Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 12, 2013 Report Share Posted June 12, 2013 You really should make the corrections we suggested first - who knows, we may have already solved your problem. Also - I clicked your link, got this message You are about to log in to the site "planet.nl" with the username "www%2Emartijnmensink", but the website does not require authentication. This may be an attempt to trick you. Is "planet.nl" the site you want to visit? and turned around. Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted June 12, 2013 Author Report Share Posted June 12, 2013 (edited) Yes I will! And I accidentally filled in my email address in stead of my website I'm not yet used to type my full name without @planet.nl wich is my email. I changed it in the previous post too. http://www.martijnmensink.nl ! Thanks for responding so quickly once again Andrea! (btw sorry if my English is incorrect at any point) Edited June 12, 2013 by Martaizoku Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 12, 2013 Report Share Posted June 12, 2013 Now it works - but fix the already mentioned errors first. Also, br tags are not meant to me used to create space. If you want space around an element (like your p tags), add margin and/or padding to your CSS. Using a validator is also a good way to catch any mistakes. Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted June 21, 2013 Author Report Share Posted June 21, 2013 I changed it! I thought "tekst" was ok because I had copied that part from some html teaching website. Oversaw it when I first changed the code in html after your first reply.. :bash: Anyway; http://www.martijnmensink.nl/ http://www.martijnmensink.nl/music02.html Works in both chrome and IE! Firefox not tested. The only problem left is that the menu is not quit right, any idea why? Might it be something with padding in stead of margin or anything like that? Thank you guys so much! Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 21, 2013 Report Share Posted June 21, 2013 (edited) Which menu and what is "not quite right" you are referring to? BTW - you still have all those <br>s in there.... Edited June 21, 2013 by Andrea Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted June 21, 2013 Author Report Share Posted June 21, 2013 Which menu and what is "not quite right" you are referring to? BTW - you still have all those <br>s in there.... The menu at the top of the page, MUSIC DESIGN MANGA. Only in Internet Explorer, in Chrome it's fine. I know, I haven't figured out how to change that yet. When do you actually use <br>s then? (Sorry if my english is a little disturbing, it's not my native language but i'm trying the best I can!) Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 21, 2013 Report Share Posted June 21, 2013 What is the problem with the menu when it's not fine? Can you describe or provide a screenshot? Don't worry about your English, it's fine, and English isn't my native language, either. Wir koennen jederzeit auch deutsch reden. Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted June 21, 2013 Author Report Share Posted June 21, 2013 What is the problem with the menu when it's not fine? Can you describe or provide a screenshot? Don't worry about your English, it's fine, and English isn't my native language, either. Wir koennen jederzeit auch deutsch reden. Yes I can! : [/img] Uploaded with ImageShack.us Ah so, aber ich rede nicht so gut auf deutsch haha, ich komme aus die Niederlanden, ich lerne Deutch auf der schule aber you can probably see I'm not a fluent speaker of the german language quite yet xd So I prefer the English language, unless you speak Dutch by any chance BTW - danke fur die schnelle (? ) reply! Quote Link to comment Share on other sites More sharing options...
Martaizoku Posted June 21, 2013 Author Report Share Posted June 21, 2013 (edited) (I understand german quite well but my answers will be seeehr schrecklich xD ) Oh and I forgot to tell, if you watch closely you see that the text shadows aren't working in IE. Also, on the screenshots it looks like there is more space at the left in Chrome than there is in IE, but that's not the case, positions (besides the menu) are fine! Edited June 21, 2013 by Martaizoku Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 21, 2013 Report Share Posted June 21, 2013 Sorry, don't speak Dutch. I'll look at the page later today or tomorrow, currently only have time for quick replies. Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 22, 2013 Report Share Posted June 22, 2013 Ok - I fiddled around with your code and made some changes. Look at the source and the css - I left many comments as to why I did things. There are some further adjustments needed to look exactly like your page, but that's just fine-tuning. I haven't figured out why your hr doesn't show, but I'm out of time. The main changes I made were to restructure your html, turned your header image into a background image, and got rid of all your positioning and those z-indexes. They were not needed. Let me know if you have any questions: http://wwww.aandbweb...forum/tijn.html Forgot to address your question re the br tags. http://www.how-to-build-websites.com/2011/basic-html-how-not-to-use-the-line-break-br-tag/ 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.
Note: Your post will require moderator approval before it will be visible.