Relative Positioning working in IE9 and Fx but not in Chrome

Imaginate · Share | #1 (**permalink**) 04-29-2011, 12:23 PM

I have a flash movie that positions perfectly in IE 9, Safari, and Firefox but in Chrome it is positioning too high. I was having problems with only IE but it was fixed when I added:

HTML Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now Chrome is quriky.

Also, on a side note. All my links are purple in IE and fine in the other browsers and my rollovers don't work in the Projects links. However the rollovers in IE do work correctly.

This is my first website, so I am going through a huge learning curve. Any help would be appreciated!

html:

HTML Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>
<head>

<title>San Juan Insulation and Drywall</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styleproject_category.css">
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-22287443-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<div style="text-align: center;">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="main">
<div id="header">
	<img src="http://www.v7n.com/forums/images/Header-Logo.jpg" width="231" height="115" alt="">
	<img src="http://www.v7n.com/forums/images/Header.jpg" width="527" height="115" alt="">
</div>

<div id="buttons">
	<a id="linkHome" href="index.html" title="Home"><span>Home</span></a>
	<a id="linkServices" href="#" title="Services"><span>Services</span></a>
	<a id="linkProjects" href="#" title="Projects"><span>Projects</span></a>
	<a id="linkPress" href="#" title="Press"><span>Press</span></a>
	<a id="linkTeam" href="#" title="Team"><span>Team</span></a>
	<a id="linkContact" href="#" title="Contact"><span>Contact</span></a>
</div>

<div id="tag-line">
	<img src="http://www.v7n.com/forums/images/projects_tag.jpg" width="758" height="48" alt="">
</div>

<div id="content">
<div id="list">
		<ul><p style="text-shadow:#000000 -1px 1px 1px; font-size: 16pt;">PROJECTS</p></a>
		
		<ul style="text-indent:-15px ;"><a href="entertainment.html">Entertainment</a></ul>
		<ul style="text-indent:-15px ;"><a href="entertainment.html">Education</a></ul>
		
		<ul style="text-indent:-15px ;"><a href="entertainment.html">Government</a></ul>
		<ul style="text-indent:-15px ;"><a href="entertainment.html">Health Care</a></ul>
		<ul style="text-indent:-15px ;"><a href="entertainment.html">Community Projects</a></ul>
		<ul style="text-indent:-15px ;"><a href="entertainment.html">Residential</a></ul>
</div>

<div id="list2">
		<a href="/" class="cat">DURANGO MOUNTAIN RESORT</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">FRANS KLAMMER BUILDING</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">GLACIER CLUB</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">SKY UTE CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">SOUTHERN UTE CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">SPRINGS HOTEL</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
				
</div>

<div id="list3">
		<a href="/" class="cat">SUNRAY CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">THE LODGE IN TELLURIDE</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">TELLURIDE CLUB PROJECT</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">TOWAOC HOTEL AND CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">UTE MT. BINGO AND CONFERENCE CENTER</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">VIEW HOTEL</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		
</div>

<div id="flash">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
	width="498" height="260" id="projectshome_slideshow.swf" align="center">
	<param name=movie value="http://www.v7n.com/forums/images/projectshome_slideshow.swf"> 
	<param name="wmode" value="opaque">
	<param name=quality value=high> <param name=bgcolor value=#333399> 
	<embed src="http://www.v7n.com/forums/images/projectshome_slideshow.swf" 
	quality=high bgcolor=#333399 width="498" height="260" name="projectshome_slideshow.swf" 
	align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </OBJECT>
</div>
</div>

<div id="bottom">
	<img src="http://www.v7n.com/forums/images/bottom_blank.jpg" width="759" height="198" alt="">
</div>
</div>

</body>

</html>

CSS:

Code:

 body {
        background: url(images/Blueprint_Background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

img { 
	margin: -2px ;
}

#content {
	background-image: url("http://www.v7n.com/forums/images/orange-box.png") ;
	background-position:center; 
	margin-top:1px;
	margin-left:-1px;
	width: 758px ;
	height: 363px ;
	left: -5px ;
	}

#flash {
	position: relative ;
	top: 20px;
	left: 66px;
}

#main{
	background: white;
	margin-top: 50px ;
	width: 756px ;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 3px 5px 10px #000 ;
	border: 1px black ;
	overflow: hidden;
}

#linkHome {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/home.png") no-repeat 0 0;
	}
#linkHome:hover{ 
  background-position: 0 -34px;
}

#linkHome span{
  position: absolute;
  top: -999em;
}

#linkServices {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/services.png") no-repeat 0 0;
	}
#linkServices:hover{ 
  background-position: 0 -34px;
}

#linkServices span{
  position: absolute;
  top: -999em;
}

#linkProjects {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/projects.png") no-repeat 0 0;
	}
#linkProjects:hover{ 
  background-position: 0 -34px;
}

#linkProjects span{
  position: absolute;
  top: -999em;
}

#linkPress {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/press.png") no-repeat 0 0;
	}
#linkPress:hover{ 
  background-position: 0 -34px;
}

#linkPress span{
  position: absolute;
  top: -999em;
}

#linkTeam {
	display: inline-block;
	width: 122px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/team.png") no-repeat 0 0;
	}
#linkTeam:hover{ 
  background-position: 0 -34px;
}

#linkTeam span{
  position: absolute;
  top: -999em;
}

#linkContact {
	display: inline-block;
	width: 122px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/contact.png") no-repeat 0 0;
	}
#linkContact:hover{ 
  background-position: 0 -34px;
}

#linkContact span{
  position: absolute;
  top: -999em;
}

NastyBlast · #2 (**permalink**) 04-30-2011, 09:11 AM

Chrome is jacked up. It can't even do tables properly so you're probably going to end up in the good old multisite deployments that are browser specific. So it's not a problem with your coding it's a problem with chrome and you have to make the decision on how important it is for you to support chrome. I tossed it I don't care because I figure most people are using Firefox and if it doesn't work in chrome they will use Firefox

Imaginate · #3 (**permalink**) 04-30-2011, 10:03 AM

I'm surprised to hear you say that about Chrome, because it was working pretty well with my code up until this point. Can you recommend a good place to find multisite deployments? I still have the problem with IE not formatting my text correctly.
Thanks!

**snakeair** · #4 (**permalink**) 04-30-2011, 10:36 AM

Chrome 11 is out. I posted a thread about this in tech talk. Have you upgraded yet?

Imaginate · #5 (**permalink**) 04-30-2011, 10:58 AM

Already? I just downloaded Chrome last month and I haven't received any invites to update. I will download the latest and greatest.

Do you have any thoughts as to why IE9 is not rendering my text correctly? All my text went quirky (rollovers went bad in Fx and Safari and IE is totally off) when I assigned a doctype. Do you think that has something to do with it or is it just browser inconsistency?

NastyBlast · #6 (**permalink**) 04-30-2011, 10:06 PM

Quote:

Originally Posted by Imaginate

I'm surprised to hear you say that about Chrome, because it was working pretty well with my code up until this point. Can you recommend a good place to find multisite deployments? I still have the problem with IE not formatting my text correctly.
Thanks!

http://www.spoon.net/

^^ that is a place where you can download a client component that can run versions of like all browsers for testing your deployments.

Imaginate · #7 (**permalink**) 04-30-2011, 10:33 PM

I guess I misunderstood what multisite deployments are. I currently use Adobe's Browser lab. I was looking for a site that had code specific to each brower so I could tweak my code to work in each browser since it wasn't working consistently.

I actually fixed my Flash placement problem by reworking my lists which weren't working correctly when I added the doctype to the html.

This is my new code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>
<head>

<title>San Juan Insulation and Drywall</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styleproject_category.css">
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-22287443-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<div style="text-align: center;">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="main">
<div id="header">
	<img src="http://www.v7n.com/forums/images/Header-Logo.jpg" width="231" height="115" alt="">
	<img src="http://www.v7n.com/forums/images/Header.jpg" width="527" height="115" alt="">
</div>

<div id="buttons">
	<a id="linkHome" href="index.html" title="Home"><span>Home</span></a>
	<a id="linkServices" href="#" title="Services"><span>Services</span></a>
	<a id="linkProjects" href="#" title="Projects"><span>Projects</span></a>
	<a id="linkPress" href="#" title="Press"><span>Press</span></a>
	<a id="linkTeam" href="#" title="Team"><span>Team</span></a>
	<a id="linkContact" href="#" title="Contact"><span>Contact</span></a>
</div>

<div id="tag-line">
	<img src="http://www.v7n.com/forums/images/projects_tag.jpg" width="758" height="48" alt="">
</div>

<div id="content">

<div id="list">
		<ul><p style="text-shadow:#000000 -1px 1px 1px; text-indent:-15px; font-size: 16pt;">PROJECTS</p></a>
		
		

<div id="list1">
		<a href="/" class="nav">Entertainment</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="nav">Education</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="nav">Government</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="nav">Health Care</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="nav">Community Projects</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="nav">Residential</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>

<div id="list2">
		<a href="/" class="cat">DURANGO MOUNTAIN RESORT</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">FRANS KLAMMER BUILDING</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">GLACIER CLUB</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">SKY UTE CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">SOUTHERN UTE CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">SPRINGS HOTEL</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
				
</div>

<div id="list3">
		<a href="/" class="cat">SUNRAY CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">THE LODGE IN TELLURIDE</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">TELLURIDE CLUB PROJECT</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">TOWAOC HOTEL AND CASINO</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">UTE MT. BINGO AND CONFERENCE CENTER</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		<a href="/" class="cat">VIEW HOTEL</a>
		<ul style="text-indent:-15px ;"><a href="entertainment.html"</a></ul>
		
</div>

<div id="flash">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
	width="498" height="260" id="projectshome_slideshow.swf" align="center">
	<param name=movie value="http://www.v7n.com/forums/images/projectshome_slideshow.swf"> 
	<param name="wmode" value="opaque">
	<param name=quality value=high> <param name=bgcolor value=#333399> 
	<embed src="http://www.v7n.com/forums/images/projectshome_slideshow.swf" 
	quality=high bgcolor=#333399 width="498" height="260" name="projectshome_slideshow.swf" 
	align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </OBJECT>
</div>
</div>


</div>

</body>

</html>

CSS

HTML Code:

body {
        background: url(images/Blueprint_Background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
		font-family: calibri, Arial, Helvetica, san-serif;
}

img { 
	margin: -2px ;
}

#content {
	background-image: url("http://www.v7n.com/forums/images/projects_orangebox_plus.jpg") ;
	background-position:center; 
	background-repeat: none ;
	margin-top:1px;
	margin-left:-1px;
	width: 758px ;
	height: 501px ;
	left: -5px ;
	z-index: 1 ;
	}

#flash {
	position: relative ;
	top: -360px;
	left: 240px ;
	
	

}
#list {
	margin:2px;
	float: left ;
	position: relative ;
	text-align: left ;
	height: 100%  ;
	color: #ffffff ;
	font-size: 14pt ;
	top: -1px;
	margin-left: -5px;
	padding: 0px;
	line-height:27px ;
}

#list1 {
	margin:2px;
	float: left ;
	position: relative ;
	text-align: left ;
	height: 100%  ;
	color: #ffffff ;
	font-size: 14pt ;
	top: -2px;
	margin-left: 10px;
	padding: 0px;
	line-height:27px ;
}

#list2 {
	margin:0px;
	float: left ;
	position: relative ;
	text-align: left ;
	height: 100%  ;
	color: #9F491B ;
	font-size: 13pt ;
	top: 100px;
	margin-left: 60px;
	padding: 0px;
	line-height:24px ;
}

#list3 {
	margin:0px;
	float: left ;
	position: relative ;
	text-align: left ;
	height: 100%  ;
	color: #9F491B ;
	font-size: 13pt ;
	top: 100px;
	margin-left: 120px;
	padding: 0px;
	line-height:24px ;
}

a.nav:link {
	color: #ffffff ;
	text-decoration: none ;
}
a.nav:hover {color: #9F491B ;}

a.cat:link {
	color: #9F491B ;
	text-decoration: none ;
}
a.cat:hover {color: #333333 ;}

#main{
	background: white;
	margin-top: 50px ;
	width: 756px ;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 3px 5px 10px #000000 ;
	border: 1px black ;
	overflow: hidden;
}

#linkHome {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/home.png") no-repeat 0 0;
	}
	
#linkHome:hover{ 
  background-position: 0 -34px;
}

#linkHome span{
  position: absolute;
  top: -999em;
}

#linkServices {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/services.png") no-repeat 0 0;
	}
#linkServices:hover{ 
  background-position: 0 -34px;
}

#linkServices span{
  position: absolute;
  top: -999em;
}

#linkProjects {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/projects.png") no-repeat 0 0;
	}
#linkProjects:hover{ 
  background-position: 0 -34px;
}

#linkProjects span{
  position: absolute;
  top: -999em;
}

#linkPress {
	display: inline-block;
	width: 123px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/press.png") no-repeat 0 0;
	}
#linkPress:hover{ 
  background-position: 0 -34px;
}

#linkPress span{
  position: absolute;
  top: -999em;
}

#linkTeam {
	display: inline-block;
	width: 122px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/team.png") no-repeat 0 0;
	}
#linkTeam:hover{ 
  background-position: 0 -34px;
}

#linkTeam span{
  position: absolute;
  top: -999em;
}

#linkContact {
	display: inline-block;
	width: 122px;
	height: 34px;
	background: url("http://www.v7n.com/forums/images/contact.png") no-repeat 0 0;
	}
#linkContact:hover{ 
  background-position: 0 -34px;
}

#linkContact span{
  position: absolute;
  top: -999em;
}

nemrod · #8 (**permalink**) 04-30-2011, 11:54 PM

Quote:

Originally Posted by NastyBlast

Chrome is jacked up. It can't even do tables properly so you're probably going to end up in the good old multisite deployments that are browser specific. So it's not a problem with your coding it's a problem with chrome and you have to make the decision on how important it is for you to support chrome. I tossed it I don't care because I figure most people are using Firefox and if it doesn't work in chrome they will use Firefox

Uh, I'm pretty sure Chrome is one of the most compliant browsers out there and it does everything I've tried properly (except, of course, for some CSS3/HTML5 things that aren't even a standard yet). I think you're the problem, not Chrome. That said, there could be problems with Chrome's rendering that I don't know about, but they would most likely also affect Safari and all other webkit-based browsers as well. I've used Chrome for probably over two years now and during all that time developed dozens of websites and never had a problem that was Chrome's fault.

edit: oh and if the site renders poorly in Chrome I would probably get out of there pretty quick, unless it's something I absolutely need. I would just pass it off as an incompetent developer, leave, and not think much more about it.

nemrod · #9 (**permalink**) 05-01-2011, 12:47 AM

Quote:

Originally Posted by nemrod

Uh, I'm pretty sure Chrome is one of the most compliant browsers out there and it does everything I've tried properly (except, of course, for some CSS3/HTML5 things that aren't even a standard yet). I think you're the problem, not Chrome. That said, there could be problems with Chrome's rendering that I don't know about, but they would most likely also affect Safari and all other webkit-based browsers as well. I've used Chrome for probably over two years now and during all that time developed dozens of websites and never had a problem that was Chrome's fault.

edit: oh and if the site renders poorly in Chrome I would probably get out of there pretty quick, unless it's something I absolutely need. I would just pass it off as an incompetent developer, leave, and not think much more about it.

By the way, it looks like Chrome's average usage share is almost 15% and is the by far fastest rising browser. Depends on what kind of site, of course, but generally it's becoming a browser that's just silly to ignore.

Imaginate · #10 (**permalink**) 05-01-2011, 08:03 AM

Well I got my site to work in Firefox, Safari and Chrome just perfectly after I added the document type and reworked my lists. My lists were the ones that were moving my flash around. Now I just need to figure out why the text in IE is purple. Any thoughts?