Parsing/Ignore/browsers

@KalevAug 10.2013

Hello everyone. I am having a problem with firefox an chrome and parsing html and css. It’s simple coding right now no javascript or any jazz yet. I point my code to the local hard drive and firefox will not show the image however then I point the HTML5 and CSS3 with as simple as my code it any browser should pick it up. I am not sure if I am posing this in the right area this involves both css and html. However below is my code.

body {
background-color:white;
}

.container {
width:500px;
}

.header {
background-color:white;
position:absolute;
left:750px;
}

.menu {
background-color:#FFD700;
height:200px;
width:100px;
float:left;
}

.content {
background-color:#EEEEEE;
height:200px;
width:400px;
float:left;
}

.footer {
background-color:#FFA500;
clear:both;
text-align:center;
}

the html is below

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”E:/Internet Programming/Ultimate Light Media/style.css”>
<title>Welcome</title>
</head>
<body>
<div id=”container”>

<div id=”menu”>
<b>Menu</b><br>
About<br>
Portfolio<br>
Contact
</div>

<div id=”content”>
Content goes here
</div>

<div id=”footer”>
Ultimate Light Media
</div>
</div>

</body>

</html>

I cleared the cache in firefox and nothing. I contacted customer support on my server they were able to replicate the issue. My question is. Is there a global problem with browsers parsing html or just firefox. I code is right it not please correct me! I have racked my brain on this a whole lot. Does anyone see an error with my coding? Does anyone know of firefox having an issue with parsing html. No matter how much I adjust firefox nor chrome will parse any of my positioning at all! this is really really weird can anyone help me please?

to post a comment

CSS

5 Comments(s) _↴

@rtretheweyAug 10.2013 — #I don't know what you mean by "pointing the code", but the 'src' attribute in your <img> tag:

<i>
 </i>&lt;img alt="Ultimate Light Media" src="E:/Internet Programming/Ultimate Light Media/img/logo.png"&gt;

is certainly the reason why the image isn't rendered in all browsers. Since the 'src' does not begin with the 'http://' protocol prefix, browsers treat it as using relative addressing. In this case, that would technically translate into a file path that begins with a folder named "E:". The fact that some browsers recognize it as a drive letter and not a folder name surprises me, but it's not going to work once you leave the environment of your local computer or server. See the [url=http://msdn.microsoft.com/en-us/library/bb208688(v=office.12).aspx]Microsoft article on absolute vs. relative addressing[/url]. It should help explain this for you.

@KalevauthorAug 10.2013 — #Okay I am actually adressing the src to my server which is www.ultimatelightmedia.com that works however when I try to edit my code it then upload the new code via FTP and then wait a moment and then refresh Firefox not Chrome show the changes as you can see my image should not be in the upper left hand corner. It will not move it stays threre.

@rtretheweyAug 10.2013 — #I should have spotted this right away. The problem is that you're using class selectors (ie. '.container' instead of '#container') in your stylesheet, but the HTML elements are all using the 'id' attribute. This means that your current stylesheet has almost no effect because the rules don't correspond to any elements in your page. You need to change the stylesheet to:

<i>
 </i>body {
 background-color:white;
 }
 
 #container {
 width:500px;
 }
 
 #header {
 background-color:white;
 position:absolute;
 left:750px;
 }
 
 #menu {
 background-color:#FFD700;
 height:200px;
 width:100px;
 float:left;
 }
 
 #content {
 background-color:#EEEEEE;
 height:200px;
 width:400px;
 float:left;
 }
 
 #footer {
 background-color:#FFA500;
 clear:both;
 text-align:center;
 }

These changes will mean that your stylesheet is now actually affecting the individual elements on your page, so you're likely to see some radical differences in how the page looks. But at least now when you change your stylesheet, those changes will be reflected in the page. Good luck!

@KalevauthorAug 10.2013 — #Interesting. I will defentaly do that! Also I just got this message from my server.

Hello Kalev,

Thank you for your patience.

You are experiencing issue with CSS file is because of server setup. We do cache on our server. Varnish caching software is implemented to cache static pages for better performance. Now, I have updated the .htaccess file in your account to remove caching in your account. I have updated the following code in .htaccess file:

<Files *>

Header set Cache-Control: "private, pre-check=0, post-check=0, max-age=0"

Header set Expires: 0

Header set Pragma: no-cache

</Files>

Please check this by updating CSS files. If still the issue persists please let us know.

If you have any further questions, please don't hesitate to reply through Support Console. We are available 24x7.

Sincerely,

Navaneeth K

Technical Specialist

So with their change and what you said I should be fixed up I am not home right now but will be soon I will post back and let ya know how it worked out. Thank you for your help sir. :-)

@KalevauthorAug 10.2013 — #Thank you for your help sir. Between the two of ya all is normal now! ? I have not did html in years XHTML was just released back then. I am doing it again now and I did not think I was that out of it. I know there was something more! I am in your debt sir if there is anything I can do to repay you with in limits let me know! ? thank you sir! ?

Also in #CSS _↴

Rollover with an animated gif CSS spacing help css alignment and placement

Success!

Help @Kalev spread the word by sharing this article on Twitter...

Tweet This

Parsing/Ignore/browsers

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Parsing/Ignore/browsers

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴