Movable Type Community Forum > CSS works in IE, not Mozilla, Netscape

Thinks Too Much

Jan 24 2004, 09:28 AM

Would anyone have any idea why this works in Internet Explorer, but not Mozilla or Netscape?

index.htm

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=iso-8859-1" />
<title>The Title</title>
<link href="basic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="page">
<div id="banner"></div>

<div id="content">
<div id="blog">
<div id="blogbody">
<p>Feugait, illum sit, qui ut, tation enim dolore tincidunt iusto ad
lorem. Eum wisi iriure accumsan nisl ut adipiscing zzril minim praesent,
quis eu vel quis. Vulputate sit dolor et hendrerit dignissim ea commodo
in, consequat, iusto delenit. Accumsan at, feugiat ullamcorper ullamcorper
dolor veniam iusto esse luptatum te vel molestie esse sit zzril iusto
aliquip lobortis in consectetuer eros, ad, autem veniam.</p>
<p>Laoreet wisi, ut accumsan sed consequat hendrerit eum suscipit duis
feugait, duis, zzril exerci delenit nulla dolore. Facilisi, in dolore
duis et feugait dolore iriure consequat ullamcorper, ut minim autem
veniam suscipit in exerci, nulla. Commodo consequat magna ullamcorper
elit duis amet veniam, hendrerit nulla zzril feugiat et vero vero
nonummy enim amet. Ut eum consequat nostrud ea commodo feugait lobortis
minim praesent, duis dolore delenit vel illum ex, vero, ea molestie
duis velit blandit ullamcorper. Dolore ea enim nostrud dignissim,
veniam illum odio vulputate tincidunt, velit hendrerit luptatum ipsum
wisi eum dolore qui illum enim volutpat, feugiat velit erat. Nulla
dolor ipsum facilisis minim nisl ut duis, exerci ut odio aliquip molestie
blandit eros molestie eu feugiat nisl nibh, ea in.</p>
<p>Nostrud eros, ad, autem veniam hendrerit, laoreet te quis. Sed iriure
consequat blandit consequat ex diam diam ad nostrud dolor tation esse
eu facilisi. Odio odio erat nostrud, ut ut, nibh accumsan wisi feugait
duis volutpat. Dolor veniam suscipit, dolore amet, blandit enim qui
minim illum molestie minim, veniam ipsum eum vero dolor. Lobortis
aliquip ex in delenit accumsan luptatum iusto nulla dolore exerci
exerci eum hendrerit accumsan vulputate blandit duis duis velit illum,
odio duis, qui eros. Ut lobortis blandit hendrerit nostrud dignissim
nonummy ullamcorper nulla, lorem consequat, feugiat praesent, ea zzril
vel. Consequat zzril delenit velit ullamcorper in tincidunt ut enim
amet nisl erat molestie duis, nisl in eum dolore dolore ullamcorper
luptatum.</p>
<p>Magna adipiscing ad autem nisl, enim nostrud tation iusto eros sed
magna commodo. Nisl suscipit consectetuer blandit commodo ex zzril
et, aliquip facilisis ad aliquam augue et zzril esse. Augue iriure
at in esse, dignissim vulputate te odio, luptatum. Nostrud velit quis
laoreet minim, dolor iusto duis, euismod te dolor, facilisi lorem.
In, consectetuer iusto suscipit minim wisi praesent nulla volutpat
vero ut, dignissim consequat nulla augue dolore minim ea, feugait
iriure eu, ut, enim suscipit molestie delenit. Diam, volutpat amet
nonummy velit elit ea velit, suscipit duis lobortis, iusto, illum
et, accumsan veniam nulla, molestie ex vel dolor consequat.</p>
<p>Ipsum ut nisl nulla aliquip et eros aliquip ex euismod. Accumsan
luptatum dolore dolore in hendrerit eu vero augue sit dolore, qui,
iusto consequat duis. Vel ut augue facilisis lorem veniam esse at
et te, adipiscing nulla velit in eum. Wisi feugiat commodo dolore
ut autem tation nibh duis qui nulla in sit, consequat, velit enim
ad ea, autem. Sed ad dolor blandit laoreet iriure, tation eros esse
dolor eu vel quis, accumsan autem dolor eros nostrud vulputate delenit
erat in nisl et. Minim in aliquam ut, odio dignissim dolor adipiscing
ad qui exerci te facilisis sed ex quis aliquip, exerci, ut, aliquam.
Ad eum eu vero feugait iriure, accumsan nonummy ut, et vulputate ipsum
praesent accumsan duis zzril in sit, at wisi ipsum ad dolor tincidunt
duis.</p>
<p>Consequat ut facilisis aliquip euismod, commodo in dignissim exerci,
eros aliquip ut dignissim iusto ad, dolore et diam nibh in dolor blandit
nulla. Nibh, autem augue odio consequat ut aliquam dolore, in magna
autem eum nulla feugiat wisi suscipit lobortis, delenit quis. Quis
et nisl velit dignissim at velit vel, erat suscipit diam te adipiscing
accumsan veniam nulla augue facilisis et. Vel eros euismod eros adipiscing,
esse dolor autem tation commodo dolore lorem praesent quis luptatum,
te. Dolor augue iriure eu commodo et, dolore vel vel esse. Consequat
lobortis et consequat commodo eum autem autem praesent sit accumsan
exerci enim facilisi qui te aliquam facilisis euismod iusto esse eu
aliquip vel enim. Et dolore vel feugait lobortis ut tation velit luptatum
iriure aliquam, dolor sed in consectetuer aliquip in tation delenit
ullamcorper quis.</p>
<p>Vero ut, wisi nulla consequat feugiat wisi eum suscipit tincidunt
vel nostrud at vulputate eum illum molestie minim minim consequat
lorem at. Laoreet hendrerit luptatum magna in suscipit et consequat
in laoreet, euismod exerci. Dignissim eum amet wisi odio quis duis
feugiat adipiscing ut minim, nisl velit erat dolore qui, blandit sit
elit minim blandit ullamcorper ex vero nonummy. Facilisi exerci ex
tation, enim, volutpat zzril ullamcorper elit, vulputate exerci delenit
ut duis et ut, nulla suscipit. Praesent nisl et at nisl, ut nonummy
consequat blandit vel augue iriure dolor illum wisi zzril, lorem augue
odio accumsan, ea ea molestie dolore zzril feugiat. Aliquip ad vulputate
nulla et duis amet, te, praesent, dignissim autem feugait dolore ex
dolore erat consequat nostrud, diam vero, iusto nulla, in ipsum augue
praesent. Veniam dolor, wisi et facilisi, et consectetuer illum dolore
et blandit enim euismod consectetuer.</p>
<p>Augue ea feugiat feugait molestie minim diam feugiat dolore tincidunt
amet illum. Quis lorem ea nisl facilisis qui blandit ullamcorper accumsan
eu, vel blandit elit, dolor ex adipiscing ullamcorper dolore qui in
aliquip iriure wisi eros dolore suscipit. Lobortis enim consequat,
volutpat velit commodo eum sed ut feugait odio. Aliquip vel commodo
in accumsan vulputate illum molestie, molestie ipsum ut augue duis
nisl, ullamcorper, nulla nostrud exerci blandit enim, dolore vero
odio sit accumsan nisl. In, nostrud consequat iusto, eum, suscipit
duis at wisi, illum exerci tincidunt erat facilisis dolore, in nulla
duis amet autem, augue, et.</p>
<p>Delenit, autem aliquam facilisis consequat vero dolor esse molestie.
Nonummy tation vel sed iriure augue praesent, iriure dolor, wisi et
facilisi. Veniam feugiat, veniam, nostrud ex, vel, illum et eu velit
in erat volutpat nisl augue dolore duis, at odio ullamcorper, duis
dolor nulla odio at. Suscipit quis enim at, ea feugait aliquip lorem
wisi blandit luptatum ut vulputate, commodo nostrud, accumsan nisl
ullamcorper accumsan accumsan. Odio wisi consequat amet veniam esse,
augue ad diam vel suscipit minim ex nisl odio dolor ut eros. Facilisi
elit, exerci illum feugait nostrud tincidunt in luptatum exerci te
augue in in minim iusto, sit vulputate blandit feugiat duis qui. Facilisis,
adipiscing duis qui ipsum feugait esse molestie et blandit elit.</p>
</div>

</div>
<div id="sidebar"></div>
</div>

</div>
</center>

<br clear="all" />
</body>
</html>

basic.css

CODE

body {
    background-color: #990000;
    margin: 0px;
    padding: 0px;
    scrollbar-3dlight-color:#993333;
    scrollbar-arrow-color:#660000;
    scrollbar-base-color:#993333;
    scrollbar-darkshadow-color:#993333;
    scrollbar-face-color:#993333;
    scrollbar-highlight-color:#CC6666;
    scrollbar-shadow-color:#660000;
}
#page {
    width: 780px;
    border: 2px solid #000000;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #FFFFFF;
}
#banner {
    width: 780px;
    height: 145px;
    border-bottom: 2px solid #000000;
    background-repeat: no-repeat;
    position: relative;
}
#content {
    padding: 0px;
    margin: 0px;
    position: relative;
}
#blog {
    width: 550px;
    border-right: 2px solid #000000;
    padding: 0px;
    margin: 0px;
    float: left;
    position: relative;
}
#blogbody {
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333333;
    position: relative;
}
#sidebar {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 200px;
    position: relative;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333333;
    text-align: left;
}

More to the point, does anyone have an idea of how to make it work in Mozilla and Netscape?

Also, my scroll bar colors aren't showing up. Any ideas?

DemiGoddess

Jan 24 2004, 10:19 AM

A couple of things, right off ... and I am still playing with it -

Scrollbar colors will only work in IE. With the DOCTYPE used, you will need to take out the scrollbar properties from BODY and place them in HTML, like this:

CODE

body {
background-color: #990000;
margin: 0px;
padding: 0px;
}

html {
scrollbar-3dlight-color:#993333;
scrollbar-arrow-color:#660000;
scrollbar-base-color:#993333;
scrollbar-darkshadow-color:#993333;
scrollbar-face-color:#993333;
scrollbar-highlight-color:#CC6666;
scrollbar-shadow-color:#660000;
}

Remove the CENTER tags from the template and add this to #page:

CODE

margin-left: auto;
margin-right: auto;

Remove all

CODE

position: relative;

Change blog and blogbody fom IDs to classes. In a working MT blog, these will be repeated in the page. Can't have a particular ID more than once.

Remove the width properties from blog and blogbody.

And lastly, change the order of the elements so the sidebar comes first in the template.

Thinks Too Much

Jan 24 2004, 01:28 PM

I did all that, and everything still looks good in IE (scroll bar colors work -- thanks) but problem remains in Mozilla/Netscape. Maybe I didn't do something right?

QUOTE

And lastly, change the order of the elements so the sidebar comes first in the template.

As in:?

CODE

<body>
<div id="page">
<div id="banner"></div>

<div id="sidebar"></div>
<div id="content">
<div class="blog">
<div class="blogbody">
<p>Feugait, illum sit, qui ut, tation enim dolore tincidunt iusto ad lorem. Eum wisi iriure accumsan nisl ut adipiscing zzril minim praesent, quis eu vel quis. Vulputate sit dolor et hendrerit dignissim ea commodo in, consequat, iusto delenit. Accumsan at, feugiat ullamcorper ullamcorper dolor veniam iusto esse luptatum te vel molestie esse sit zzril iusto aliquip lobortis in consectetuer eros, ad, autem veniam.</p>
</div>

</div>
</div>

</div>

<br clear="all" />
</body>

DemiGoddess

Jan 24 2004, 01:48 PM

Put some content in the sidebar div, then take a look. Do you have a live version of this page that I could take a look at?

Oops ... I see it! Put the sidebar inside of the content ID.

CODE

<div id="page">
<div id="banner"></div>

<div id="content">
<div id="sidebar"></div>
<div class="blog">
<div class="blogbody">
etc.

Thinks Too Much

Jan 24 2004, 02:03 PM

http://www.shreve.net/~moongriffon/test/index.htm

DemiGoddess

Jan 24 2004, 02:10 PM

This is the stylesheet I have it working with:

CODE

body {
background-color: #990000;
margin: 0px;
padding: 0px;
height: 100%;
}

html {
scrollbar-3dlight-color:#993333;
scrollbar-arrow-color:#660000;
scrollbar-base-color:#993333;
scrollbar-darkshadow-color:#993333;
scrollbar-face-color:#993333;
scrollbar-highlight-color:#CC6666;
scrollbar-shadow-color:#660000;
}

p {
    margin:0px 0px 16px 0px;
    padding:0px;
    }

#page {
    width: 780px;
    border: 2px solid #000000;
border: 100%;
    margin: 30px;
    margin-left: auto;
    margin-right: auto;
padding: 0px;
    background-color: #FFFFFF;
}
#banner {
height: 145px;
border-bottom: 2px solid #000000;
    margin-top: 20px;
    margin-bottom: 20px;

}
#content {

padding: 0px;
    background-color: #FFFFFF;
}
.blog {

    padding: 15px;
    background-color: #FFFFFF;
}
.blogbody {
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333333;
    background-color: #FFFFFF;
}
#sidebar {
    float: right;
    width: 200px;
    margin: 0px 0px 10px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333333;
    background-color: #FFFFFF;
}

Thinks Too Much

Jan 24 2004, 03:37 PM

That's not quite what I had in mind. Take a look at http://www.shreve.net/~moongriffon/test/index.htm again in IE.

DemiGoddess

Jan 24 2004, 04:54 PM

Gotcha ...

I think this should work ... sidebar back OUTside of content:

CODE

<div id="page">
<div id="banner"></div> 

<div id="sidebar">Site Map<br>I still haven't thought too much about what to put here nor how to format it.</div>

<div id="content">
<div class="blog">
<div class="blogbody">
</div> 
</div> 
</div>
</div>

And the CSS:

CODE

body {
    background-color: #990000;
    margin: 0px;
    padding: 0px;
}
html {
    scrollbar-3dlight-color:#993333;
    scrollbar-arrow-color:#660000;
    scrollbar-base-color:#993333;
    scrollbar-darkshadow-color:#993333;
    scrollbar-face-color:#993333;
    scrollbar-highlight-color:#CC6666;
    scrollbar-shadow-color:#660000;
}
p {
    margin-top: 0px;
}
.title {
    font-weight: bold;
}
#page {
    margin-left: auto;
    margin-right: auto;
    width: 780px;
    border: 2px solid #000000;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #FFFFFF;
}
#banner {
    height: 145px;
    border-bottom: 2px solid #000000;

}
#content {
    padding: 0px;
    margin-right: 200px;
}
.blog {
    border-right: 2px solid #000000;
    padding: 0px;
    margin: 0px;
}
.blogbody {
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333333;
}
#sidebar {
    float: right;
    width: 200px;
    margin: 0px;
    padding: 0px;
    width: 200px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333333;
    text-align: left;
}

However, if the sidebar fills to where it is longer than the content, the white background will stop at the end of the content. Put the background in the sidebar ID ... they still won't be even in Mozilla, but it works in IE.

Still playing ...

DemiGoddess

Jan 24 2004, 05:27 PM

Dah! *smacks forehead*

To get both content and sidebar to extend all the way down in both IE and Moz ...

Add to template, before closing div for #page

CODE

and add to stylesheet:

CODE

#footer {
     clear: both;
     padding: 0px;
     margin: 0px;
     height: 5px;
     border-top: 2px solid #000000;
}

The height and border can be changed to whatever.

Thinks Too Much

Jan 24 2004, 05:41 PM

Getting close... getting reeeal close... but now, both in Mozilla and IE, the border on the right side of content doesn't quite reach the footer's border.

Thinks Too Much

Jan 24 2004, 05:46 PM

Also, if the sidebar's content > the blog content, there's no border extending all the way to the bottom.

Oh, for the good ol' days, when all we had were tables.

Tables? We would have loved to have had tables!...

DemiGoddess

Jan 24 2004, 06:22 PM

Heh ... I'd give my next paycheck up just to have all three of the major browsers equally compliant with CSS ...

I design for IE, as that is far and away the most used browser. Borders and Mozilla drive me batty ... Opera has a hard time dealing with boxes, and IE can't properly calculate height and width without ugly hacks ... Auuughhh!!

Thinks Too Much

Jan 24 2004, 06:29 PM

So, is it possible?

"We used to have to line up little brackets using monotype fonts..."

"Oooooo we would have loved to have had brackets! We used to have to do complete web sites using only the left kind of the keeyboard!" :D

DemiGoddess

Jan 24 2004, 06:36 PM

I don't know that I ever found a solution to the border that doesn't quite reach the bottom in Mozilla. Another of those frustrations that continue to plague me ...

Thinks Too Much

Jan 24 2004, 06:37 PM

Okay, I guess that's where we'll leave it then. Thanks for all your help tonight.

DemiGoddess

Jan 24 2004, 06:39 PM

Not a problem ... I love to play with CSS.

Have you been here yet?

Thinks Too Much

Jan 24 2004, 07:06 PM

Wow! No, I haven't! You'd better believe I'm bookmarking that one!

BTW, look at what I just whipped up:

CODE

CODE

body {
    background-color: #990000;
    margin: 0px;
    padding: 0px;
}
html {
    scrollbar-3dlight-color:#993333;
    scrollbar-arrow-color:#660000;
    scrollbar-base-color:#993333;
    scrollbar-darkshadow-color:#993333;
    scrollbar-face-color:#993333;
    scrollbar-highlight-color:#CC6666;
    scrollbar-shadow-color:#660000;
}
p {
    margin-top: 0px;
}

.title {
    font-weight: bold;
}
.tablepage {
    margin-top: 20px;
    margin-left: auto;
    margin-bottom: 20px;
    margin-right: auto;
}
.tdbanner {
    border: 2px solid #000000;
}
.tdcontent {
    background-color: #FFFFFF;
    border-left: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-right: 1px solid #000000;
}
.tdsidebar {
    background-color: #FFFFFF;
    border-left: 1px solid #000000;
    border-bottom: 2px solid #000000;
    border-right: 2px solid #000000;
}

Works perfectly!