10 replies [Last post]
galneweinhaw
galneweinhaw's picture
Offline
Regular
Last seen: 10 years 47 weeks ago
Timezone: GMT-8
Joined: 2005-09-05
Posts: 15
Points: 2

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(Cool 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!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

#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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

galneweinhaw
galneweinhaw's picture
Offline
Regular
Last seen: 10 years 47 weeks ago
Timezone: GMT-8
Joined: 2005-09-05
Posts: 15
Points: 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

galneweinhaw
galneweinhaw's picture
Offline
Regular
Last seen: 10 years 47 weeks ago
Timezone: GMT-8
Joined: 2005-09-05
Posts: 15
Points: 2

#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 ?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

#1: Netscape is wrecking it! .spacer class being ignored

Sorry, posted too soon.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

#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. Shock 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. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

galneweinhaw
galneweinhaw's picture
Offline
Regular
Last seen: 10 years 47 weeks ago
Timezone: GMT-8
Joined: 2005-09-05
Posts: 15
Points: 2

#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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

#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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

galneweinhaw
galneweinhaw's picture
Offline
Regular
Last seen: 10 years 47 weeks ago
Timezone: GMT-8
Joined: 2005-09-05
Posts: 15
Points: 2

#1: Netscape is wrecking it! .spacer class being ignored

/*<![CDATA[*/

....

/*]]>*/

What does that stuff mean?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

#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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

#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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.