Jump to content

Website Only Works In Chrome


Martaizoku

Recommended Posts

Hello! :):rolleyes:

 

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 :rolleyes: )

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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 */

Link to comment
Share on other sites

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.

 

:D

Link to comment
Share on other sites

  • 3 months later...

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! :D

 

 

 

Martaizoku

Edited by Martaizoku
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Yes I will! And I accidentally filled in my email address in stead of my website :bash::P 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 by Martaizoku
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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: :bash: :bash:

 

Anyway;

 

 

http://www.martijnmensink.nl/

 

http://www.martijnmensink.nl/music02.html

 

Works in both chrome and IE! :clap: 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!

Link to comment
Share on other sites

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!)

Link to comment
Share on other sites

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. :D

Link to comment
Share on other sites

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. :D

 

Yes I can! : an0a.png[/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 :D BTW - danke fur die schnelle (? :P) reply!

Link to comment
Share on other sites

(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 by Martaizoku
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...