Mon, 2005-09-05 01:03
I've attached a dummy content version of my problem...
my .spacer class should (Ithink) force a new line, since it's floating left and the full widht of the container....
but it only works in IE(6) Netscape(
looks like it completely ignores my spacer =(
Any help would be appreciate =)
I also have a feeling something like this should be done as a list..... but I don't know how to do that =(
Thanks!
Mon, 2005-09-05 01:18
#1
#1: Netscape is wrecking it! .spacer class being ignored
You don't want to float your spacer. If anything, you want to put clear: left (or right or both) instead. Or you could just use the top margin of h3 instead.
Mon, 2005-09-05 01:20
#2
#1: Netscape is wrecking it! .spacer class being ignored
Tyssen wrote:
You don't want to float your spacer. If anything, you want to put clear: left (or right or both) instead. Or you could just use the top margin of h3 instead.
Using the top margin of h3 sounds easy, can you briefly explain what I should do?
Thanks =)
EDIT: nevermind.... I understand now, that would create large gaps between items that didn't have so little text.... I'll give the Clear:left a try =) thanks again
Mon, 2005-09-05 01:28
#3
#1: Netscape is wrecking it! .spacer class being ignored
Ok, I added clear: left and it is now moving to a new line... which is good.
One problem remains.... why is their such a big difference in spacing between IE6 and Netscape8 ?
Mon, 2005-09-05 01:29
#4
#1: Netscape is wrecking it! .spacer class being ignored
Sorry, posted too soon.
Mon, 2005-09-05 05:28
#5
#1: Netscape is wrecking it! .spacer class being ignored
Without getting into detail, which I doubt I could properly explain anyway, IE breaks a lot of rules regarding margins and the collapse state. I could likely help you fix a particular instance, but not the general case.
You should definitely lose the spacer div for two reasons. 1) It's not structurally nor semantically correct. 2) The W3 says browsers should ignore empty paragraphs and strongly suggests that all empty block level elements be ignored. It would be a shame to have the page break because some silly browser up and followed the rules. 
In this case, simply make h3 {clear: left;}.
Since you're breaking the header, it would be better to set top and bottom margins to zero, and instead, give the image a top and bottom margin.
You're right, this is a list. The definitions list, dl, seems to best match the structure. Try this;
<dl>
<dt>name</dt>
<dd>title</dd>
<dd>blurb and picture</dd>
<dt>...
</dl>Sorry about repeating some of what's already been said, just keeping things in context.
cheers,
gary
Tue, 2005-09-06 06:23
#6
#1: Netscape is wrecking it! .spacer class being ignored
Thanks for the help, especially the List recommendation.
I really want to take out the divider, cus it doesn't feel right, and as you mention, is not the correct way to do things anyway..... however, I've tried playing with the margins and padding of everything and just can get the gap to appear the same in NS8 and IE6....
ANy ideas what I could do to work this?
thanks again.
Tue, 2005-09-06 07:40
#7
#1: Netscape is wrecking it! .spacer class being ignored
There are small rendering and default differences among the browsers. Sometimes everything will look the same, and other times thwhhhtp. Small diffs usually don't matter; let'em go.
Which differences are you talking about, and what difference does it make right now since you're going to change the structure anyhow?
Here's how I'd go at it;
<!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 name="generator"
content="
HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
<title>Elect Cindy Silver for North Vancouver</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type"
content="text/css" />
<style type="text/css">
/*<![CDATA[*/
#container {
border: 1px solid black;
font: 13px/20px "Trebuchet MS", Georgia, "Times New Roman", serif;
display: table; /*just another way to clear floats*/
margin: 0 auto;
width: 450px;
}
dd {
margin: 0 0 0 40px;
padding: 0;
}
dd.title {
font-size: 1.1em;
font-weight: bold;
}
dt {
clear: left;
font-size: 1.2em;
font-weight: bold;;
}
p {
font-size: 1em;
margin: 0;
}
img.left {
border: 0;
float: left;
margin: 0 10px 15px; 0;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<dl>
<dt>Jane Doe</dt>
<dd class="title">Title</dd>
<dd>
<p><img class="left"
src="http://www.maxminis.com/forums/avatars/aragorn.jpg"
alt="meh" /> Blah blahblah. Blah blahblahBlah blahblahBlah
blahblahBlah blahblahBlah blahblahagainst Blah
blahblahBlah blahblhBlah blahblahBlah blahblahBlah
blahblahBla</p>
</dd>
<dt>Joe Blow</dt>
<dd class="title">Title</dd>
<dd>
<p><img class="left"
src="http://www.maxminis.com/forums/avatars/aragorn.jpg"
alt="meh" /> Blah blahblah. Blah blahblahBlah blahblahBlah
blahblahBlah blahblahBlah blahblahagainst Blah
blahblahBlah blahblhBlah blahblahBlah blahblahBlah
blahblahBla</p>
</dd>
</dl>
</div><!-- end container -->
</body>
</html> I see you're using a transitional DTD. Go ahead with the strict. You're not planning on using deprecated tags or attributes, are you?
cheers,
gary
Wed, 2005-09-07 04:30
#8
#1: Netscape is wrecking it! .spacer class being ignored
/*<![CDATA[*/
....
/*]]>*/
What does that stuff mean?
Wed, 2005-09-07 04:44
#9
#1: Netscape is wrecking it! .spacer class being ignored
When including scripts (or anything else you want ignored by the parser), they have to be enclosed within that (which goes inside the <script></script> tags) to validate properly.
Wed, 2005-09-07 05:07
#10
#1: Netscape is wrecking it! .spacer class being ignored
galneweinhaw wrote:
/*<![CDATA[*/
....
/*]]>*/
What does that stuff mean?
Stripping off the /* ... */ which hides it from from the css parser, you have
<! [CDATA[ ...]] > That's the syntax of an item in a DTD. It says this is CDATA, 'character data' from [ to ]. Then the closing ] and the closing tag >.
This is necessary if the xhtml is parsed as xml, as it is when served up as application/xhtml+xml.
As long as you serve your pages as text/html, it's not needed.
cheers,
gary