Web Development

Firefox and Divs / Spans – BrentLatham

BrentLatham
Member

Posts: 27
From: England
Registered: 03-29-2007
 		I'm having real problems with divs and spans with firefox...

Basically, I've pasted my code in here but in firefox the divs and spans all appear on top of each other and the #page style doesn't cover the whole of the information in the div tag. How should it be done in Firefox?

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<STYLE>
#page
{
width: 90%;
background-color: white;
margin:0 auto; /* This allows the page to be centered */
border-top: 1px solid #d8d8d8;
border-left: 1px solid #d8d8d8;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
padding-left: 20px; /* The gap between the left side and the start of the writing */
line-height: 160%; /* The height of each line */
}
/* The information set to the left of the page */
.block_left {
float: left;
text-align: left;
margin: 0;
padding: 0 0 0px 30px;
}

/* The information set to the right of the page */
.block_right {
float: right;
text-align: left;
margin: 0;
padding: 0 30px 10px 0;
}
/* Hides the information */
.collapsed
{
display: none;
}

/* Displays the information */
.expanded
{
display: block;
}
</STYLE>

</head>

<body>
<script language="javascript">
function ExpandOrCollapse(frmObject, lnkOwner)
{

//Get the current Class Name
var sCurrentClass = document.getElementById(frmObject).className;

//If the current class name is Expanded then change it to Collapsed and vice-versa
if (sCurrentClass == 'expanded')
{
document.getElementById(frmObject).className = 'collapsed';

//If we pass in the ID of the Link clicked on then we can reset that so it is underlined again and not active
document.getElementById(lnkOwner).className = 'NonActiveLink';
}
else
{
document.getElementById(frmObject).className = 'expanded';

document.getElementById(lnkOwner).className = 'ActiveLink';
}
}
</script>

<div id="page">

<h1>
<small>Some text</small><br/>
Larger Text
</h1>

<span class="block_left">
<span >stuff:</span><span > stuff</span><br/>
<span >stuff:</span><span > stuff</span>
<br/>

<a href="JavaScript:void(0);" class="NonActiveLink" id="lnkPersonalInfo" onclick="ExpandOrCollapse('dropdown1', 'lnkPersonalInfo');">
More Personal Information
</a>
<span class="collapsed" id="dropdown1">
<span >stuff:</span><span > stuff</span><br/>
<span >stuff:</span><span > stuff</span><br/>
<span >stuff:</span><span > stuff</span><br/>
<span >stuff:</span><span > stuff</span><br/>
<span >stuff:</span><span > stuff</span>
</span>

</span>
<span class="block_right">
<span > stuff</span><br/>
<span > stuff</span><br/>
<span > stuff</span><br/>
<span > stuff</span><br/>
<span > stuff</span><br/>
</span>
</div>

</body>
</html>

------------------
I am the signature
bwoogie

Member

Posts: 380
From: kansas usa
Registered: 03-12-2005
 		it looks ok to me... is this what it's supposed to look like?

------------------
~~~boogie woogie woogie~~~
Jesus didn't come to save the saints.
NetCog

Member

Posts: 149
From:
Registered: 06-15-2006
 		http://validator.w3.org/ maybe?

*I don't know for sure since I haven't gotten into "spans" yet*
BrentLatham
Member

Posts: 27
From: England
Registered: 03-29-2007
 		Don't worry case is closed I now know what it is.

I validated the xhtml using the w2c website without any problems.

No the problem goes away when I change the

<tag class="mycssclass"/≷
to

<tag className="mycssclass"/≷

yep className seems to have solved it...need to think about it abit more!

------------------
I am the signature
BrentLatham
Member

Posts: 27
From: England
Registered: 03-29-2007
 		Oh by the way bwoogie I didn't post all the html in because it would have just been too big but if you looked at the code in both IE and then Firefox you would see the difference...its not good!

Add a few more divs and spans and you end up with a whole mess

------------------
I am the signature
tehriddler

Junior Member

Posts: 8
From: Portland, Oregon
Registered: 05-07-2007
 		Though this is technically closed, I would like to mention there are several problems using div's in IE and centering. Normalling I take all my info, 'divide' it up into div's and (if it's centered) use:

div{
margin-right:auto;
margin-left:auto;
}

But, for some reason this doesn't work. I've heard mention of having a div OUTSIDE of the div you want centered, and including text-align:center; in it.
Any suggestings? I haven't had much time on my hands to check this...and I really even hate just OPENING IE. Just curious.

God Bless!
-Teh Riddler