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.
<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!!!!
Nested DIVs in Mozilla nightmare.
In the footer section try adding
clear: right;
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.
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.
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
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!!!
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.
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.
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.
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.