Adding styles to my style sheets kill my existing styles...

RIRedinPA · March 31, 2010

I'm almost 100% sure this is some sort of user error on my part which I am overlooking cause I've looked at this too long. Here's what is happening. I'm building a grid/tabular layout using ul/li tags. Here's my 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">
<head>
	<meta http-equiv="Content-Type"  content="text/html; charset=utf-8"/>
	<title>Grid that will work on any browser</title>

	<script language="javascript">

		function pageloadtest() { 
			document.getElementById("main").style.width = "1725px";

			//fix bottom bar width
			document.getElementById("bottombar").style.width = "1725px";

			//get browser type
			var thisbrowser = navigator.userAgent;

			//need to change the .bar style
			if(thisbrowser.indexOf("Firefox") !=  -1) {
				var barstyle = document.styleSheets[0].cssRules[12].style;
				barstyle.width = "1725px";
			} else { 
				//windows browser
				var barstyle = document.styleSheets[0].rules[12].style;
				barstyle.width = "1725px";
			}
		}

		//loaddata into content cell
		function loadissue(thisissue) {

			xmlHttp = checkajax();

			xmlHttp.onreadystatechange=function() {
				if(xmlHttp.readyState==4) {
					//alert(xmlHttp.responseText);

					//get returned items and split them in an array
					var returneditems = xmlHttp.responseText.split("::");
					//load content
					document.getElementById("content").innerHTML = returneditems[0];
					//set tablewidth
					var tablewidth = returneditems[1];
					document.getElementById('content').style.width = tablewidth + "px";
					//alert(tablewidth);
				}
			}

			xmlHttp.open("GET", "lib/gridtestlib/loadissue.php");
			xmlHttp.send(null);

		}


		function checkajax() {
			//ajax compatibility check
			var xmlHttp;
			try {
  					// Firefox, Opera 8.0+, Safari
  					xmlHttp=new XMLHttpRequest();
  				}	
			catch (e) {
  					// Internet Explorer
  					try {
    					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    				}
  						catch (e) {
    						try {
      						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      					}
    						catch (e) {
      							alert("Your browser does not support AJAX!");
      							return false;
      						}
					//alert(xmlHttp.responseText);
    					}
  					}

			return xmlHttp
		}

	</script>

	<style type="text/css">

		* { 
			border: 0px;
			margin: 0px;
			padding: 0px;
		}

		html {
			background-color: #eee;
		}

		body {
			font-size:100%;
		}


		#main { 
			position: absolute;
			top: 0px;
			left: 0px;
		}

		#grid { 
			position: relative; 
			top: 50px;
			left: 50px;
			width: 100%;
			border: 1px solid #333;
		}

		#grid ul { 
			list-style-type: none;
			width: 100%; 
		}

		#grid li { 
			float: left;
			border: 1px solid #1e74f5;
		}

		#topbar { 
			position: absolute; 
			top: -4px;
			left: 0px;
			width: 100%;
			height: 60px;
			max-height: 30px;
			min-height: 30px;
			padding: 2px;
			background-color: #1e74f5;
		}

		#header { 
			position: absolute;
			top: 31px;
			left: 0px;
			height: 25px;
			min-height: 25px;
			max-height: 25px;
		}

		#content { 
			position: absolute; 
			top: 57px;
			left: 0px;
			background-color: #fff;
		}


		.navcell { 
			width: 15px;
			text-align: center;
		}

		.itemcell { 
			width: 120px;
		}

		.bar { 
			clear:both;
			height: 20px;
			background-color: #ccc;
			padding-left: 1px;
		}

		.groupitem { 
			margin-top: 5px;
		}


	</style>

</head>


<!--onload="loadissue('<?php //print $thisissue; ?>');"-->
<body onload="pageloadtest();">

	<div id="main" style="width: 100px;">
		<div id="grid">
			<div id="topbar">
				<div id="title">This is the topbar</div>
			</div>

			<div id="header">
				<ul id="headerul">
					<li id="h2" class="itemcell">Field 1</li>
					<li id="h3" class="itemcell">Field 1</li>
					<li id="h4" class="itemcell">Field 1</li>
					<li id="h5" class="itemcell">Field 1</li>
					<li id="h6" class="itemcell">Field 1</li>
					<li id="h7" class="itemcell">Field 1</li>
					<li id="h8" class="itemcell">Field 1</li>
					<li id="h9" class="itemcell">Field 1</li>
					<li id="h10" class="itemcell">Field 1</li>
					<li id="h11" class="itemcell">Field 1</li>
					<li id="h12" class="itemcell">Field 1</li>
					<li id="h13" class="itemcell">Field 1</li>
					<li id="h14" class="itemcell">Field 1</li>
					<li id="h15" class="itemcell">Field 1</li>
				</ul>
			</div>

			<div id="content">
				<ul class="groupbar"><li style="border-bottom: 1px solid #333;" id="g1bar" class="bar">Group 1</li></ul>
				<ul id="group1item1" class="groupitem">
					<li id="g1i2" class="itemcell">Field 1</li>
					<li id="g1i3" class="itemcell">Field 1</li>
					<li id="g1i4" class="itemcell">Field 1</li>
					<li id="g1i5" class="itemcell">Field 1</li>
					<li id="g1i6" class="itemcell">Field 1</li>
					<li id="g1i7" class="itemcell">Field 1</li>
					<li id="g1i8" class="itemcell">Field 1</li>
					<li id="g1i9" class="itemcell">Field 1</li>
					<li id="g1i10" class="itemcell">Field 1</li>
					<li id="g1i11" class="itemcell">Field 1</li>
					<li id="g1i12" class="itemcell">Field 1</li>
					<li id="g1i13" class="itemcell">Field 1</li>
					<li id="g1i14" class="itemcell">Field 1</li>
					<li id="g1i15" class="itemcell">Field 1</li>
				</ul>

				<ul id="group1item2" class="groupitem">
					<li id="g2i2" class="itemcell">Field 1</li>
					<li id="g2i3" class="itemcell">Field 1</li>
					<li id="g2i4" class="itemcell">Field 1</li>
					<li id="g2i5" class="itemcell">Field 1</li>
					<li id="g2i6" class="itemcell">Field 1</li>
					<li id="g2i7" class="itemcell">Field 1</li>
					<li id="g2i8" class="itemcell">Field 1</li>
					<li id="g2i9" class="itemcell">Field 1</li>
					<li id="g2i10" class="itemcell">Field 1</li>
					<li id="g2i11" class="itemcell">Field 1</li>
					<li id="g2i12" class="itemcell">Field 1</li>
					<li id="g2i13" class="itemcell">Field 1</li>
					<li id="g2i14" class="itemcell">Field 1</li>
					<li id="g2i15" class="itemcell">Field 1</li>
				</ul>

				<div id="bottombar" style="background-color: #1e74f5; position: absolute; height: 30px; bottom: -35px; padding: 2px;">
					This is the bottom bar
				</div>
			</div>
		</div>
	</div><!--end main-->
</body>
</html>

It works fine. (See 1st attached image). However, whenever I go to add any additional styles the <li> are no longer displayed float left and instead are stacked on the page...doesn't matter what I add or where, top of style sheet or bottom, whether it's formatting existing HTML (see example code below, I added an <H1> style to the sheet, or id or class selectors it does the same thing. The only thing that seems to work is inline (see bottombar div in code). What am I doing wrong here that's making this happen?




<!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">
<head>
	<meta http-equiv="Content-Type"  content="text/html; charset=utf-8"/>
	<title>Grid that will work on any browser</title>

	<script language="javascript">

		function pageloadtest() { 
			document.getElementById("main").style.width = "1725px";

			//fix bottom bar width
			document.getElementById("bottombar").style.width = "1725px";

			//get browser type
			var thisbrowser = navigator.userAgent;

			//need to change the .bar style
			if(thisbrowser.indexOf("Firefox") !=  -1) {
				var barstyle = document.styleSheets[0].cssRules[12].style;
				barstyle.width = "1725px";
			} else { 
				//windows browser
				var barstyle = document.styleSheets[0].rules[12].style;
				barstyle.width = "1725px";
			}
		}

		//loaddata into content cell
		function loadissue(thisissue) {

			xmlHttp = checkajax();

			xmlHttp.onreadystatechange=function() {
				if(xmlHttp.readyState==4) {
					//alert(xmlHttp.responseText);

					//get returned items and split them in an array
					var returneditems = xmlHttp.responseText.split("::");
					//load content
					document.getElementById("content").innerHTML = returneditems[0];
					//set tablewidth
					var tablewidth = returneditems[1];
					document.getElementById('content').style.width = tablewidth + "px";
					//alert(tablewidth);
				}
			}

			xmlHttp.open("GET", "lib/gridtestlib/loadissue.php");
			xmlHttp.send(null);

		}


		function checkajax() {
			//ajax compatibility check
			var xmlHttp;
			try {
  					// Firefox, Opera 8.0+, Safari
  					xmlHttp=new XMLHttpRequest();
  				}	
			catch (e) {
  					// Internet Explorer
  					try {
    					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    				}
  						catch (e) {
    						try {
      						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      					}
    						catch (e) {
      							alert("Your browser does not support AJAX!");
      							return false;
      						}
					//alert(xmlHttp.responseText);
    					}
  					}

			return xmlHttp
		}

	</script>

	<style type="text/css">

		* { 
			border: 0px;
			margin: 0px;
			padding: 0px;
		}

		html {
			background-color: #eee;
		}

		body {
			font-size:100%;
		}

		H1 { 
			font-family: Arial; 
		}

		#main { 
			position: absolute;
			top: 0px;
			left: 0px;
		}

		#grid { 
			position: relative; 
			top: 50px;
			left: 50px;
			width: 100%;
			border: 1px solid #333;
		}

		#grid ul { 
			list-style-type: none;
			width: 100%; 
		}

		#grid li { 
			float: left;
			border: 1px solid #1e74f5;
		}

		#topbar { 
			position: absolute; 
			top: -4px;
			left: 0px;
			width: 100%;
			height: 60px;
			max-height: 30px;
			min-height: 30px;
			padding: 2px;
			background-color: #1e74f5;
		}

		#header { 
			position: absolute;
			top: 31px;
			left: 0px;
			height: 25px;
			min-height: 25px;
			max-height: 25px;
		}

		#content { 
			position: absolute; 
			top: 57px;
			left: 0px;
			background-color: #fff;
		}


		.navcell { 
			width: 15px;
			text-align: center;
		}

		.itemcell { 
			width: 120px;
		}

		.bar { 
			clear:both;
			height: 20px;
			background-color: #ccc;
			padding-left: 1px;
		}

		.groupitem { 
			margin-top: 5px;
		}


	</style>

</head>


<!--onload="loadissue('<?php //print $thisissue; ?>');"-->
<body onload="pageloadtest();">

	<div id="main" style="width: 100px;">
		<div id="grid">
			<div id="topbar">
				<div id="title">This is the topbar</div>
			</div>

			<div id="header">
				<ul id="headerul">
					<li id="h2" class="itemcell">Field 1</li>
					<li id="h3" class="itemcell">Field 1</li>
					<li id="h4" class="itemcell">Field 1</li>
					<li id="h5" class="itemcell">Field 1</li>
					<li id="h6" class="itemcell">Field 1</li>
					<li id="h7" class="itemcell">Field 1</li>
					<li id="h8" class="itemcell">Field 1</li>
					<li id="h9" class="itemcell">Field 1</li>
					<li id="h10" class="itemcell">Field 1</li>
					<li id="h11" class="itemcell">Field 1</li>
					<li id="h12" class="itemcell">Field 1</li>
					<li id="h13" class="itemcell">Field 1</li>
					<li id="h14" class="itemcell">Field 1</li>
					<li id="h15" class="itemcell">Field 1</li>
				</ul>
			</div>

			<div id="content">
				<ul class="groupbar"><li style="border-bottom: 1px solid #333;" id="g1bar" class="bar">Group 1</li></ul>
				<ul id="group1item1" class="groupitem">
					<li id="g1i2" class="itemcell">Field 1</li>
					<li id="g1i3" class="itemcell">Field 1</li>
					<li id="g1i4" class="itemcell">Field 1</li>
					<li id="g1i5" class="itemcell">Field 1</li>
					<li id="g1i6" class="itemcell">Field 1</li>
					<li id="g1i7" class="itemcell">Field 1</li>
					<li id="g1i8" class="itemcell">Field 1</li>
					<li id="g1i9" class="itemcell">Field 1</li>
					<li id="g1i10" class="itemcell">Field 1</li>
					<li id="g1i11" class="itemcell">Field 1</li>
					<li id="g1i12" class="itemcell">Field 1</li>
					<li id="g1i13" class="itemcell">Field 1</li>
					<li id="g1i14" class="itemcell">Field 1</li>
					<li id="g1i15" class="itemcell">Field 1</li>
				</ul>

				<ul id="group1item2" class="groupitem">
					<li id="g2i2" class="itemcell">Field 1</li>
					<li id="g2i3" class="itemcell">Field 1</li>
					<li id="g2i4" class="itemcell">Field 1</li>
					<li id="g2i5" class="itemcell">Field 1</li>
					<li id="g2i6" class="itemcell">Field 1</li>
					<li id="g2i7" class="itemcell">Field 1</li>
					<li id="g2i8" class="itemcell">Field 1</li>
					<li id="g2i9" class="itemcell">Field 1</li>
					<li id="g2i10" class="itemcell">Field 1</li>
					<li id="g2i11" class="itemcell">Field 1</li>
					<li id="g2i12" class="itemcell">Field 1</li>
					<li id="g2i13" class="itemcell">Field 1</li>
					<li id="g2i14" class="itemcell">Field 1</li>
					<li id="g2i15" class="itemcell">Field 1</li>
				</ul>

				<div id="bottombar" style="background-color: #1e74f5; position: absolute; height: 30px; bottom: -35px; padding: 2px;">
					This is the bottom bar
				</div>
			</div>
		</div>
	</div><!--end main-->
</body>
</html>

[attachment deleted by admin]

JustLikeIcarus · March 31, 2010

Your "pageloadtest" js function is causing the trouble here. Specifically the below code:

if(thisbrowser.indexOf("Firefox") !=  -1) {
               var barstyle = document.styleSheets[0].cssRules[12].style;
               barstyle.width = "1725px";
            } else {
               //windows browser
               var barstyle = document.styleSheets[0].rules[12].style;
               barstyle.width = "1725px";
            }

When you add the h1 css rule it causes .bar to be index 13 but your code still modifies 12 which is then you .itemcell.

RIRedinPA · April 1, 2010

Duh.

Sign In

Adding styles to my style sheets kill my existing styles...

Recommended Posts

RIRedinPA

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

RIRedinPA

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information