PDA

View Full Version : Div not showing up in FF



Niosis
Nov 11th, 2006, 01:35 AM
First of all, thanks in advance to anyone who helps me out with this.

***PROBLEM SOLVED*** Read below for other problem

I'm messing around with coding websites right now, I've hit a LOT of snags, but overcome most of them without any huge problems. But now, this one just leaves me baffled.

***PROBLEM SOLVED*** Read below for other problem

http://niosis.awardspace.com/tempsliced.html

Is exactly how I want the layout to look. That was made with simply Photoshop's slice tool, the only problem being it uses tables.

http://niosis.awardspace.com/polend.html

Is where I've gotten it so far, without using tables. As you can see, when loading it in FF, the spacer div just dissapears. Even more strange, If I change the div to 140px high rather than 14, in FF it looks like it's 14 pixels high, but in IE it appears as I would have predicted.

***PROBLEM SOLVED*** Read below for other problem

Why is this?

The name of the div I am referring to is called "spacermatrix".

I don't need to post the html and CSS do I? It's there just view the source. It's all in one file for now.

Thanks again.

EDIT: ***PROBLEM SOLVED*** Read below for other problem

Niosis
Nov 11th, 2006, 06:14 PM
http://niosis.awardspace.com/tempsliced.html

How the layout should look.

http://niosis.awardspace.com/polend.html

Looks fine in IE, not in FF...

Also looked fine before I validated it strictly.

Anyone know what the problem is?

_Aerospace_Eng_
Nov 11th, 2006, 06:26 PM
Whoa you seriously have a case of divitis. Look it up its pretty common. The whole point of coding without tables is NOT to replace every td cell with a div. You should also read up on what semantics are. A quick fix though would be to add this to your CSS

#maintop img, #spacermatrix img, #bannercontainer img {
display:block;
}
the above remove any line-height given to the images since they are block level elements.
then change this

#spacermatrix {
width: 498px;
background-color:#D1D1D1;
}
to this

#spacermatrix {
width: 498px;
background-color:#D1D1D1;
clear:both;
}
The clear:both; makes the images start after the bannercontainer since you floated everything there. Your code is still far from being as good as it can be but its a start.

Niosis
Nov 11th, 2006, 07:26 PM
Ok, I think I got rid of all the unnecessary divs while still validating.

I've gotten it down to 2 divs, which fixed the problem I was having but lead me to another one.

Now, take a look at http://niosis.awardspace.com/polend.html .

There are some random spaces in between my images and I can't seem to get rid of them.

And in IE, it looks nothing like what I want....

The reason it's all in a container div is to get the "spacermatrix" images to go where I want them to... if you have another way of doing that, please tell me.

Also if you have a totally different and more effecient way of coding this, please tell me that too. I am new and I highly appreciate anyone who can point me in the right direction early on.

Niosis
Nov 12th, 2006, 07:00 AM
I don't know what the rules on bumping a thread are...

So I'm bumping it

Also remember that it is indeed validated with XHTML strict.

Niosis
Nov 13th, 2006, 11:23 PM
Bumping

Niosis
Aug 4th, 2007, 05:58 AM
Well, I posted this problem a long time ago but I want it to work again now so BUMP

Arbitrator
Aug 4th, 2007, 07:29 AM
Now, take a look at http://niosis.awardspace.com/polend.html .

There are some random spaces in between my images and I can't seem to get rid of them.Use the CSS rule img { display: block; }. Read the article Images, Tables, and Mysterious Gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps) to understand why the problem is occurring and why that code fixes it.

Some of the issues might also be avoided by using semantic code. Ornamental images should be represented using CSS (e.g., backgrounds) instead of HTML elements like img.


Also remember that it is indeed validated with XHTML strict.Uh, no, it’s not. The below code contains an error; the meta element goes inside of the head element. In “HTML compatible XHTML”, you’re also not supposed to use end tags for empty elements and you’re supposed to also have a lang attribute for every xml:lang attribute.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></meta>
<head>

Corrected (with indentation and spacing too):

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

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Better yet, you would use HTML 4.01 Strict to save yourself some trouble. What you’re using right now is pseudo‐XHTML to get around Internet Explorer’s lack of support for that language.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Niosis
Aug 4th, 2007, 08:51 PM
Better yet, you would use HTML 4.01 Strict to save yourself some trouble. What you’re using right now is pseudo‐XHTML to get around Internet Explorer’s lack of support for that language.


But... from what I read on the internet it seemed like XHTML was just a stricter version of HTML SOURCE (http://www.w3schools.com/xhtml/xhtml_html.asp). Why would I want to use HTML? Shouldn't I just learn it the stricter way?

Jutlander
Aug 4th, 2007, 08:59 PM
You should use HTML because XHTML isn't supported by Internet Explorer yet and the majority of users still use this browser, unfortunately.

A lot of people use XHTML because they probably hear that it is the latest standard. They give away themselves though because they serve the XHTML as text/html to the browser, in which case, you might as well just use plain old HTML. :rolleyes:

That's my 2 cents.

Niosis
Aug 4th, 2007, 10:23 PM
So, when using CSS to represent images and backgrounds and stuff...

For each of my links that was an image, I would have to have a div for each one and then set it as a background? or am I going about it the wrong way?

Jutlander
Aug 4th, 2007, 10:39 PM
The div would be superfluous. Just apply an ID or class, depending on it's use, to the <a> element and define a background image to the ID's.

Arbitrator
Aug 4th, 2007, 11:59 PM
But... from what I read on the internet it seemed like XHTML was just a stricter version of HTML SOURCE (http://www.w3schools.com/xhtml/xhtml_html.asp). Why would I want to use HTML? Shouldn't I just learn it the stricter way?XHTML is stricter, but strictness is not a feature. All of XHTML’s features (namespaces, ruby text, internal subsets, XLink, manipulation through XSLT, etc.) are non‐functional when XHTML is served as text/html (as HTML); even if you wanted to serve your XHTML as real XHTML and use these features, you can’t, thanks to Internet Explorer (you also can’t use things like ruby text since no major browser supports them yet). You may as well just be using HTML; you can still have strictly written documents using HTML anyway. (Lowercase element and attribute names, end tags for all non‐empty elements, non‐minimized attributes with quoted values, backgrounds applied to the root element, using DOM over document.write, etc., can all be done in HTML.)

(If you want to see real XHTML, try the *.xhtml file extension while writing your documents. Certain differences will become apparent has you code.)

And just an FYI, W3Schools is not associated with the W3C that wrote the XHTML specification, before you take their word as the Bible. Their article is also wrong on two points; HTML 4.01 must also have a single root element and tags must also be properly nested.


So, when using CSS to represent images and backgrounds and stuff...

For each of my links that was an image, I would have to have a div for each one and then set it as a background? or am I going about it the wrong way?If an image represents text or some important concept, use the img element; use the alt attribute to provide text replacements in case the images can’t be displayed. Otherwise, use things like CSS backgrounds.

For example, your five links above the content area would best be represented with img elements. The background of the content area would be background images. Below is an example.



#content { background: #00436e url("tempsliced_18.gif") no-repeat; }
#content > div { background: url("tempsliced_22.gif") no-repeat; }


<ul id="navigation">
<li><a href="/"><img alt="about" width="…" height="…" src="about.png"></a></li>
<li><a href="/"><img alt="portfolio" width="…" height="…" src="portfolio.png"></a></li>

</ul>
<div id="content">
<div><p>This is a paragraph.</p></div>
</div>Note that Internet Explorer prior to version 7 does not support the child combinator (>); you have to assign a class or ID to the inner div to target it.

Niosis
Aug 5th, 2007, 04:51 AM
http://niosis.awardspace.com/polendfixed.html

Be it that I didn't expect it to just fall into place because I left everything else in tact, I don't think that's what you had in mind....

I didn't implement the list idea yet... but why isn't the content box looking right in itself?