2 replies [Last post]
Hazelip
Offline
newbie
Tallahassee, Fl
Last seen: 18 years 28 weeks ago
Tallahassee, Fl
Timezone: GMT+5
Joined: 2003-07-08
Posts: 1
Points: 0

Site URL: http://www.Hazelip.com/

Problem: Site renders fine in IE. I'm using the 3-column layout from Glish ( http://www.glish.com/css/7.asp ) with a slight modification in that I do not use the left-most column.

The right-most content, though, seems to have a problem when I nest divs inside the left-column div in Mozilla 1.0.

Now, I know I'm behind on my Moz versions, but I wanted to check if this is an error on my part, or if it is just a bug in Moz.

You don't know how happy I was to discover this forum when I went searching for help.

Thank you very much for any and all assistance you may be able to provide.

-Jake

Here is my style sheet code:

hr {
	color : #383958;
}

body {
	background-color : #DEDF00;
	font : normal "Times New Roman", Times, serif;
	margin : 0;
}
	
a:link {
	color : #FF9933;
	text-decoration : none;
}

a:visited {
	color : #669933;
	text-decoration : underline;
}

a:hover {
	color : #8080FF;
	text-decoration : underline;
}

a:active {
	color : #FF6633;
}

.ahem {
	display : none;
	visibility : hidden;
}

#article {
	color : #333366;
	font : normal "Times New Roman", Times, serif;
	line-height : 100%;
	margin-top : 0px;
	padding-left : 2px;
	padding-right : 2px;
	padding-top : 2px;
	text-align : left;
	text-indent : 20pt;
}

/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. */
h1 {
	color : #383958;
	font : normal "Times New Roman", Times, serif;
	font-size : large;
	margin-bottom : 0;
	margin-top : 0;
}

h2 {
	color : #383958;
	font : normal "Times New Roman", Times, serif;
	font-size : medium;
	line-height : 40px;
	margin-bottom : 0;
	margin-top : 0;
}

h3 {
	color : #383958;
	font : normal "Times New Roman", Times, serif;
	font-size : small;
	font-weight : bold;
	line-height : 22px;
	margin-bottom : 0;
	margin-top : 0;
}

h4 {
	color : #383958;
	font : normal "Times New Roman", Times, serif;
	font-size : x-small;
	font-weight : bold;
	line-height : 26px;
	margin-bottom : 0;
	margin-top : 0;
}

h5 {
	color : #383958;
	font : normal "Times New Roman", Times, serif;
	font-size : xx-small;
	font-weight : bold;
	line-height : 22px;
	margin-bottom : 0;
	margin-top : 0;
}

h6 {
	color : #383958;
	font : normal "Times New Roman", Times, serif;
	font-size : 10px;
	font-weight : bold;
	line-height : 18px;
	margin-bottom : 0;
	margin-top : 0;
}

h4 a:active {
	color : #FF6633;
	font-size : smaller;
}

h4 a:hover {
	color : #8080FF;
	font-size : smaller;
	text-decoration : blink;
}

h4 a:link {
	color : #62648A;
	font-size : smaller;
	text-decoration : none;
}

h4 a:visited {
	color : #669933;
	font-size : smaller;
	text-decoration : underline;
}

img {
	border : 0;
	border-bottom : none;
}

.nowrap {
	/* must be combined with nobr in html for ie5win */
	font : normal "Times New Roman", Times, serif;
	font-size : 10px;
	font-weight : bold;
	margin-bottom : 0;
	margin-top : 0;
	white-space : nowrap;
}

.tiny {
	color : #383958;
	font : normal "Times New Roman", Times, serif;
	font-size : x-small;
	margin-bottom : 5px;
	margin-top : 15px;
}

	
.top {
	/* ie5win fudge begins */
	background : #959618;
	border : 3px outset #808080;
	height : 110px;
	margin : 3px 3px 3px;
	padding : 2px;
	voice-family : "\";
}

\"";
	voice-family:inherit;
	height: 110px;
	}
.divleftcol {
	/* ie5win fudge begins */
	border : 1px solid #FF0000;
	font : normal "Times New Roman", Times, serif;
	font-size : smaller;
	left : 0px;
	margin : 2px;
	padding : 10px;
	position : absolute;
	top : 120px;
	visibility : hidden;
	voice-family : "\";
	white-space : normal;
	width : 150px;
}

\"";
	voice-family:inherit;
	width: 120px;
	}
html>body .divleftcol {
	/* ie5win fudge ends */
	width : 120px;
}

.divcentercol {
	background : #FFFF99;
	border : thin groove;
	margin : 2px 190px 20px 15px;
	padding : 10px;
	position : absolute;
	top : 120px;
	width : 75%;
	z-index : 100;
}

.divrightcol {
	/* Opera5.02 will show a space at right when there is no scroll bar */
	/* ie5win fudge begins */
	margin : 2px;
	position : absolute;
	right : 0px;
	top : 120px;
	voice-family : "\";
	width : 20%;
}

\"";
	voice-family:inherit;
	width: 20%;
	}
html>body .divrightcol {
	/* ie5win fudge ends */
	width : 120px;
}

.adheading {
     font-family:Verdana, Arial, Helvetica; font-size:8 pt; 
	 font-weight:bold; font-style:normal;
}

.adtext {
      font-family:Verdana, Arial, Helvetica; 
	  font-size:8 pt; font-weight:normal; font-style:italic;
}
pre {
	color : #333366;
	font : normal "Times New Roman", Times, serif;
	font-size : smaller;
	line-height : 75%;
	margin-bottom : 10px;
	margin-top : 20px;
}

	
#fiction {
	border : thin dashed #CCCC00;
	font-family : "MS Sans Serif", Geneva, sans-serif;
	text-indent : 20pt;
}

#arcbox {
    background : #E2E300;
    border : thin dashed #999900;;;
	padding : 10px;
    }

#linkbox {
    background : #FFFF99;
	border : thin groove;
	padding : 5px;
}

.links {
}

.opinion {
}

.titlecard {
	margin : 0px 0px;
	position : absolute;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Nested DIV problem in Mozilla?

Hi Hazelip,
I've just had a quick look at your css, I'm a bit short of time these days Sad

Firstly some of the hacks you are using have the same value above and below the hack. It would be a good idea to remove the unneeded hacks now as they will only confuse you later.
If I remember correctly the hack you are using should be on one line as

padding : 2px; 
   voice-family : "\"; } \""; 
   voice-family:inherit; 
Hopefully someone with a better memory or time to search will correct me if i'm wrong.
I don't know if that will correct your problem, hope it helps.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 51 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Nested DIV problem in Mozilla?

It's down to the 'fudge' in the .divrightcol...

.divrightcol { 
   /* Opera5.02 will show a space at right when there is no scroll bar */ 
   /* ie5win fudge begins */ 
   margin : 2px; 
   position : absolute; 
   right : 0px; 
   top : 120px; 
   width : 180px; 
} 

will work - play around with the width setting. If you do still need to fudge it, play around and keep an eye on both browsers I suppose...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.