[Mary H]

Hi,

I finally took the plunge and went from HMTL 2.0 to XML & CSS and everything was fine. Then along comes IE7 and my divs are not posting properly. All of my new websites are now messed up and I don't know why. So you can see what I mean, check out www.hogwildsunday.info

I have copied the css file so you can see it.

What do I need to change? Anything I am reading online says the problem is the result of cheating to make it work in IE6. I didn't realize I was cheating. I thought I was using the right codes.

I also have two other working sites each with problems. nlccbelmont.org also has the div issue. In dave-and-anya.com it is a link issue. The links are supposed to be a certain width wide and aligned to the right. In order for the the links to be on separate lines, I had to put in a page break and they are not aligning to the right.

Thanks, Mary

hogwild.css

body { background-color: black }

h1, h2, h3, h4, h5 { font-family: arial; font-weight:bold; text-align:center; }
h1 { font-size: 3em; color:silver; }
h2 { font-size: 2em; color:#ffbb33; }
h3 { font-size: 1.75em; color:#cc99ff; }
h4 { font-size: 1.5em; color:white; }
h5 { font-size: 1.5em; color:red; }
h6 { font-size: 1.25em; color:white; }

.red { color: red; }
.silver { color: silver; }
.white { color: white; }
.black { color: black; }
.purple { color: #cc99ff; }
.gold {color: #ffbb33; }
.yellow { color: yellow; }

.left {text-align: left; }
.center {text-align: center; }
.right {text-align: right; }
.justify {text-align: justify; }

.large {font-size: 1.25em; font-weight: bold; }
.small { font-size: .8em; }
.clearl {clear: left;}
.clearr {clear: right;}
.clearb {clear: both;}

.caps {font-variant: small-caps; }

p {
font-family:arial;
font-size:1em;
color:white;
text-align:left;
}

p.one {
font-family:arial;
font-size: 1em;
color:white;
text-align:right;
}

p.two {
font-family:arial;
font-size:1em;
color:#cc99ff;
text-align:left;
}

p.three {
font-family:arial;
font-size:1em;
color:#000000;
text-align:left;
}

p.four {
font-family:arial;
font-size:.8em;
color:#ffffff;
text-align:left;
}

p.five {
font-family:arial;
font-size:.8em;
color: #cc99ff;
text-align:center;
}

p.bold {
font-family:tahoma;
font-size: 1.25em;
font-weight:bold;
color:red;
text-align:center;
}

a { font-family: tahoma, arial; size: 1.25em; text-align: left; text-decoration: none; }
a:link {color:red; } /* an unvisited link */
a:visited {color:#ffbb33; } /* a visited link */
a:hover {color:silver; } /* a link with the mouse hovering over it */
a:active {color:white; } /* the current link */

div.sides {
z-index: 1;
background: url("images/flamel.gif") no-repeat fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
}

div.page {
position: relative;
margin-left:auto;
margin-right:auto;
width: 800px;
height: 100%;
}

div.sidebar1 {
position:absolute;
z-index:35;
background-color:#333333;
text-align: left;
top:0;
right:5;
width:180px;
height:210px;
padding-left:5px;
padding-top:5px;
padding-bottom: 5px;
border-right:silver ridge;
border-left:silver ridge;
border-top:silver ridge;
border-bottom:silver ridge;
border-width:5px;
}

div.sidebar2 {
position:absolute;
z-index:35;
background-color:#333333;
text-align: left;
bottom:5;
right:5;
width:170px;
height:200px;
padding-left:10px;
padding-top:10px;
border-right:silver ridge;
border-left:silver ridge;
border-top:silver ridge;
border-bottom:silver ridge;
border-width:5px;
}

div.date {
position:absolute;
z-index:40;
text-align: right;
top:0px;
right:150px;
width:400px;
height:100px;
padding-left:5px;
padding-top:5px;

}

div.main1 {
position: absolute;
z-index: 30;
background-color: black;
text-align: left;
top: 5;
left: 10%;
width: 70%;
height: 90%;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
}

div.main2 {
position:absolute;
z-index:40;
top:220;
right:125;
width:300px;
height:200px;
padding-left:10px;
padding-top:10px;
}

div.main3 {
position:absolute;
z-index:40;
top:250;
right:125;
width:300px;
height:200px;
padding-left:10px;
padding-top:10px;
}

div.feature {
position:absolute;
z-index:35;
top: 270;
left:22%;
width:200px;
height:140px;
padding-left:10px;
padding-top:10px;
border-right:#ffbb33 ridge;
border-left:#ffbb33 ridge;
border-top:#ffbb33 ridge;
border-bottom:#ffbb33 ridge;
border-width:5px;
}

div.feature2 {
position:absolute;
z-index:35;
top: 265;
left:20%;
width:250px;
height:140px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border-right:#ffbb33 ridge;
border-left:#ffbb33 ridge;
border-top:#ffbb33 ridge;
border-bottom:#ffbb33 ridge;
border-width:5px;
}

div.menu {
position: absolute;
z-index: 36;
top: 5;
left: 5;
width: 140px;
height: 90%;
text-align: left;
padding-left: 2px;
padding-right: 2px;
}

div.cost {
position: absolute;
z-index: 36;
top: 5;
right: 5;
width: 50px;
height: 90%;
padding-left: 2px;
padding-right: 2px;
}

div.schedule {
position:absolute;
z-index:35;
background-color:#ffbb33;
bottom:10;
left:25;
width:300px;
height:150px;
padding-left:10px;
padding-top:10px;
border-right:#990099 ridge;
border-left:#990099 ridge;
border-top:#990099 ridge;
border-bottom:#990099 ridge;
border-width:5px;
}

div.friends {
position:absolute;
z-index:25;
background-color:#000000;
top:10;
right:15;
width:175px;
height:300px;
padding-left:10px;
padding-top:10px;
border-right:#990099 ridge;
border-left:#990099 ridge;
border-top:#990099 ridge;
border-bottom:#990099 ridge;
border-width:5px;
}

div.photo {
position: absolute;
z-index: 35;
top: 250;
left: 80;
text-align:center;
width: 400px;
height: 300px;
border-right:red ridge;
border-left:red ridge;
border-top:red ridge;
border-bottom:red ridge;
border-width:5px;}

div.update {
position: absolute;
z-index: 35;
background-color:#000000;
top: 225;
right: 5;
overflow: auto;
text-align:left;
width: 290px;
height: 330px;}

div.main {
position:absolute;
z-index:35;
top:10;
left:10;
width:80%;
height:100%;
padding-left:10px;
padding-top:10px;
}

div.footer {
position:absolute;
z-index:35;
left: 0px;
bottom:10px;
width:100%;
height:30;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}

img.logo {
position:absolute;
z-index:5;
top:20px;
left:0px;
}

img.bike {
position:absolute;
z-index:15;
top:200px;
left:0px;
}

img.road {
position:absolute;
z-index:1;
top:250px;
right:10px;
}

*.alt { background-color:#990099;
border:6px;
}

 

[sarei]

It's not showing up correctly in Firefox either (at least on Mac).

I think it might have something to do with your absolute and relative positioning. You probably don't want to use so much absolute positioning. Try setting it up with margins instead. If I were you I would contain it all in a container div to control the width, and then float the menu to the right or left and use margins for positioning the rest. Are you using a specific program to set this up?

Also, on dave-and-anya, in the navigation on each link you have class="div" - but you don't have a div class in your style sheet (you can just take that out on each of the links). Classes are classified by a period preceeding them. So your .nav is a class, .small, etc. A # preceeding the word indicates an ID. If there is nothing preceeding the word, then it will handle that specific html tag. So all of your div styles are going to handle your div tags. Anyway, you should be able to go to the div.nav and add a line that says text-align: right;

 

[Big-K]

for centering instead of the auto trick, as long as the width is set, use this

width:800px; position:absolute; left:50%; margin-left:-400px;

 

[Mary H]

Hi,

Sorry to not reply sooner. Year end, flus and all that kind of stuff got in the way.

I used absolute positining of divs to create a site that appeared as I wanted it to. Unfortunately, the divs are no longer situated where I want them to be. I also used divs within divs to create patterns - also not happening.

The css file I gave above was only for the hogwild page. Each web page I have done with css and xml have their own css page. But as of right now, none of my new web pages are correct. I have boxes that are supposed to be below other boxes on top of boxes. I have divs with a contrasting background to create a frame for another div not appearing at all. At this point in time going back to tables - as annoying as they can be - would be easier than figuring out what the problem is. Except that I am the one who back in high school spent 4 hours working on a math problem rather than let it beat me.

For example on dave-and-anya.com. The background colour is supposed to be maroon (or there abouts).
First I have a position relative div to give me a constant so the pattern is supposed to be consistent on all computers. It has a width of 800px and height of 110%
On top of that is supposed to be a div with a white pebbled pattern in it. This is supposed to be a frame for the navy top div and the center text div. It is missing. There is no text in it. The navigation div, the picture div and the date div are all in the right spot.

So I am having a problem with absolute postioning of divs when they are used as a container or are within another div. I am also having a problem with psuedo links. If I do not assign a class to my links then a different link within the website will have the attributes for the initial link. I found this a problem when I was creating navigation links for the site with a set width. When I then tried to put a simple page link within a paragraph it took on all of the attributes of the psuedo link. Or a link to a picture just wasn't woking out. Now, my navigation links are not recognizing width, or text alignment. On the dave-and-anya page they are supposed to have a right alignment and have a width of 150px. Instead I have to put a line break in and they are all centred. I have been able to manage the the text alignment as putting it in the "nav" div, but the last class mentioned in that div is in the link class, so it should have superceded the "nav" information.

The class="div" was actually a class in the file which shouldn't have been. It has been changed - at least on my computer (no sense in uploading anything until I figure out the problem) - to navi.

I have uploaded the davenanya CSS file as a txt file. The one I have already made some changes to.

Thanks, Mary

 

[Mary H]

I had not put in a identifiable measurement for the position of the divs. Once I put the px designation in, the boxes all moved into place. Now at least I can start fixing my websites so they are readable.

The organizational divs are still missing though.

Mary