9 replies [Last post]
Reyesuela
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-05-27
Posts: 6
Points: 0

Page: http://www.dreamforgemedia.com/sylviaday/bookshelf/index.html

It's 4 am, and I'm stuck, stuck, stuck.

This page looks lovely in IE but terrible in Mozilla--the DIV flow is all messed up. I've googled the problem, and I'm stuck.

Here's the css, available at http://www.dreamforgemedia.com/sylviaday/style.css. Ignore the first bit--that's a Mozilla hack that I threw in to keep it from ignoring my first bit of css. I'm sure there's a more graceful way. Smile

<style type="text/css">
#Nonsense {
  border: none;
  padding: 0px;
  position: absolute;
  left: 490px;
  top: 350px;
  width: 288px;
  height: auto;
  z-index: 0;
}

#flourish {
  position: relative;
  left: 5px;
  top: -160px;
  width: 156px;
  height: 57px;
  z-index: 0;
	}

#rf {
  position: relative;
  left: 0px;
  top: 2px;
  width: 198px;
  height: 17px;
  z-index: 0;
	}

body {
	background-color: #740000;
	text-align: center;
	scrollbar-highlight-color: #F5F5EB;
    scrollbar-arrow-color: #35351B;
    scrollbar-3dlight-color: #A2A8A5;
    scrollbar-base-color: #656050;
    scrollbar-darkshadow-color: #878846;
    scrollbar-face-color: #990000;
    scrollbar-shadow-color: #CACB97;
    scrollbar-track-color: #990000;
	}

#container {
	background-color: #CC3300;
	margin: 20px auto;
	width: 754px;
	border-top: 3px solid #990000
	height: auto;
	}

#container2 {
	background-color: #CC3300;
	height: auto;
	}

#header {
	background-color: #333366;
	color: #fff;
	text-align: right;
	padding: 0px;
	border-bottom: 3px solid #990000;
	}

#header2 {
	background-color: #CC3300;
	color: #fff;
	text-align: right;
	padding: 0px;
	}

#footer {
	background-color: #333366;
	color: #fff;
	padding: 0px;
	width: auto;
	text-align: right;
	border-top: 3px solid #990000;
	height: auto;
	}

#footer2 {
	background-color: #740000;
	text-align: left;
	padding: 0px;
	width: 754px;
	}

#content {
	width: 591px;
	height: auto;
	float: right;
	padding: 0px;
	background-color: #E8E8D0;
	text-align: left;
	border-left: 3px solid #990000;
	border-top: 3px solid #990000;
	font-family: verdana,helvetica,arial; font-size: 10pt; color: #27284D
	overflow: visible;
	}
	
#sidebar {
	width: 160px;	
	float: left;
	background-color: #CC3300;
	color: #CC3300;
	padding: 0px;
	}

#cover {
   border: 2px solid #990000;
	}

#books {
  position: relative;
  left: 0px;
  top: 25px;
  width: auto;
  height: auto;
  z-index: 0;
	}
	
#bookshelf {
	}

#bookshelf2 {
  position: relative;
  left: 10px;
  top: 10px;
  width: 285px; 
  height: 92px;
  z-index: 0;
	}
	
#divider {
  position: relative;
  left: 80px;
  top: 0px;
  width: 214px;
  height: 63px;
  z-index: 0;
	}

TD {font-family: verdana,helvetica,arial; font-size: 10pt; color: #27284D}
      
h1 {font-family: verdana,helvetica,arial; font-size: 12pt; color: #27284D; font-weight: bold}
    
p {font-family: verdana,helvetica,arial; font-size: 10pt; color: #27284D}

li {font-family: georgia; font-size: 10pt; color: #33341C}
   
A:link {text-decoration: none; color: #344C66; font-weight: bold}
         
A:visited {text-decoration: none; color: #344C66; font-weight: bold}
         
A:active {text-decoration: none; color: #656634; font-weight: bold}
           
A:hover {color: #656634; font-weight: bold}

.bottomlinks {
    font-family: verdana,helvetica,arial; 
    font-size: 10pt; 
    color: #DBDBB5}

.bottomlinks:link, .bottomlinks:visited, .bottomlinks:active  { 
    font-family: verdana,helvetica,arial; 
    text-decoration: underline; 
    font-size: 10pt; 
    font-weight: normal;
    color: #DBDBB5}
    
.bottomlinks:hover {
    font-family: verdana,helvetica,arial; 
    text-decoration: underline; 
    font-size: 10pt; 
    font-weight: normal;
    color: #ffd901}
-->
</STYLE>

Not the most graceful thing in the world, but it should work. Right now, Mozilla appears to be completely messing up #container2 (making #footer flow wrong), and #footer2 is left aligning instead of centering the way it's supposed to.

A simplified version of the page where the footer2 problem is obvious:
http://www.dreamforgemedia.com/sylviaday/bookshelf/index2.html

Help!!!!

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 14 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Nested DIVs in Mozilla nightmare.

In the footer section try adding

clear: right;

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 14 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Nested DIVs in Mozilla nightmare.

Also the <div id="footer2"> div is sitting outside of the <div id="container"> div which is why it's not part of the centered content.

Move the footer2 inside the container then you'll have to play with the styles a bit to get it to look right again in IE but it should mean that it will behave better in mozilla.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Nested DIVs in Mozilla nightmare.

Hi Reyesuela

You could try making it using my css page code maker:

http://209.216.241.33/ctindex.php

Look at the bottom of that page for the link.

For a two-column version, in the generator form, uncheck the right column box. Your design uses only graphics, so set all borders/dividers to zero.

Leave colors in the backgrounds to each block so you can quickly figure where to drop your code.

Trevor
PS, the tool is still under development, but should do for what you want.

Bigdawg
Offline
Enthusiast
Last seen: 17 years 40 weeks ago
Joined: 2003-12-16
Posts: 65
Points: 0

Nested DIVs in Mozilla nightmare.

Looks like you have two closing div tags that are after the image causing things to go haywire. Also there are two closing tags between your footer and footer two make the second an opening div and it seems better in Mozilla

Reyesuela
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-05-27
Posts: 6
Points: 0

It's not working!

I can't use your two-column generator because this is the layout:

Container (DIV with borders)
--Header (Sylvia Day)
--Header2 (home/about the site)
--Container2 (holding the columns)
-----Sidebar
-----Content
--Footer (hosted by bit--blue)

Footer2

I only have one tiny piece with two columns, though there's a bunch of content in it. Still, I'll take a look at your generator and see if there's something there that will give me an idea.

Anyhow, as you see, the two double </div>s are correct.

I tried clear: right; and it didn't help. The centering doesn't come from the container--it comes from body {text-align: center;}, so I don't know why footer2 wouldn't inherit the alignment from the body!!!

Reyesuela
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-05-27
Posts: 6
Points: 0

Double-checked!

I just double-checked, and I can't use your CSS generator solution at all. You get around the problem of the container not matching the longest of the columns by declaring height: 100%, which is not an option here.

Reyesuela
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-05-27
Posts: 6
Points: 0

Progress!

I was hoping there was an easier way, but I solved the footer2 problem my changing around the rest of my div ids so I could make it a child. Thanks!

Only problem now is that container2, which does NOT want to be the same height as the longer of the two columns.

Reyesuela
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-05-27
Posts: 6
Points: 0

I fixed it!

FINALLY I found a site that dealt with this problem.

First, I added a new div with a class of clear, defined as ".clear { clear: both }". It had to be a new div or it wouldn't work.

Then I moved up the footer using "position: relative;" to hide the gap.

I can't get the outlines to look perfect on both Mozilla and IE becuase of IE's buggy was of doing orders and margins, so I chose to make it look better in IE because IE is the most common browser.

Reyesuela
Offline
newbie
Last seen: 17 years 17 weeks ago
Joined: 2004-05-27
Posts: 6
Points: 0

I fixed it!

FINALLY I found a site that dealt with this problem.

First, I added a new div with a class of clear, defined as ".clear { clear: both }". It had to be a new div or it wouldn't work.

Then I moved up the footer using "position: relative;" to hide the gap.

I can't get the outlines to look perfect on both Mozilla and IE becuase of IE's buggy was of doing orders and margins, so I chose to make it look better in IE because IE is the most common browser.