Jump to content

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

RIRedinPA

By RIRedinPA
in CSS Help

 Share

Recommended Posts

RIRedinPA Advanced Member

RIRedinPA

Posted
Posted

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]

Link to comment
Share on other sites
JustLikeIcarus Newbie

JustLikeIcarus

Posted
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.