CSS/Web Site Help - IE but not FF Compatible

Jams44

06-12-2007 17:46:00

Any reason why this site isn't showing up properly in FireFox but it does in IE? Strange I know considering usually IE is the bitch. Any help would be well appreciated. Its valid XHTML Transitional and CSS so it should be working fine.

Site http//radiantstatic.com/champs

EatChex89

06-12-2007 17:48:19

First question

When you designed the site, were you previewing it in IE or Firefox?

Jams44

06-12-2007 18:05:26

FF surprisingly

EatChex89

06-12-2007 20:19:29

[quote7c032d2fc4="Jams44"]FF surprisingly[/quote7c032d2fc4]

What messed up your page? Or did you put in all the css by hand. Normally, one would put in css bit by bit to make sure that the proper look was attained before moving onto the next "bit". That's at least how I do it. Then if I put something in that changes my whole page, I know what it is.

JennyWren

06-12-2007 22:36:02

Margins don't work well in Firefox. What's happening is the 173px margin from "navi" is being added to the outside div which nests navi. I suggest getting rid of all margins. You could make the navi div a separate div (non-nested) that follows the header, and just use the part of the background image that you need for that strip across the page. Also margins are screwing up your page farther down. See what I mean by just taking out the navi div in your code.

JennyWren

06-12-2007 22:50:19

OK, here's a slightly revised version of your code

[code19a034eb837]<DOCTYPE>
<html>
<head>
<meta>
<title>Championship Swimmers - Swim Club - Berwyn, IL</title>

<style>

body{
background-color:#8B9CAC;
background-image:url(http://radiantstatic.com/champs/images/bg.jpg);
background-repeat:repeat-x;
}

.stuff{url==http://=http:///url
width:833px;
background-image:url(http://radiantstatic.com/champs/images/back_bg.jpg);
}

.header{url==http://=http:///url
width:833px;
height:194px;
background-image:url(http://radiantstatic.com/champs/images/header.jpg);
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}

.content{url==http://=http:///url
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.footer{url==http://=http:///url
width:833px;
height:24px;
background-image:url(http://www.bookwyrm.ca/hostedimages/footer.jpg);
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}

.header2{url==http://=http:///url
height:173px;
}

.navi{url==http://=http:///url
}

a:link {
color: #FFFFFF;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #FFFFFF;
}

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

a:active {
text-decoration: none;
color: #FFFFFF;
}

</style>
</head>
<body>
<center>

<div>

<div>
<div></div>
<div>Link :: Link :: Link :: Link :: Link :: Link :: Link :: Link</div>

</div>

<div>
<p>Hello Content</p>
<p>blah</p>
<p>blah</p>
</div>

<div>Copyright Championship Swimming 2007 - Site by <a href="#">RadiantStatic</a> </div>

</div>
</center>

</body>
</html>[/code19a034eb837]

note that I made a graphic for the footer - it's just the "maroon" part of your graphic. Why do you have a footer and a footer text? Maybe to manipulate the placement of the text - you'll have to experiment there.

I made a "stuff" div to contain everything - this makes sure that your white background continues throughout the content section. I also added a div for the part of the header which ISN'T the navbar - to bump down the navbar so that it lines up where you want it.

I suggest putting your CSS in a separate file. That way, if you come up with a template you like it's easier to use again for different pages etc.

jwwws

07-12-2007 05:52:10

My suggestion would be to use "id" not "class" style divs.

Generally we use class styles when creating a new css [i70cda7dadc]style[/i70cda7dadc], which is different from using a div id for [i70cda7dadc]structure[/i70cda7dadc]. And you, my friend, have a structure problem, not a style issue.

Instead of using a "." before your div names, use "#" then write your css code for that particular div with regards to the box model. This will apply your css style to your div container only.

Class style divs can be applied to [i70cda7dadc]any[/i70cda7dadc] div on the page. For example you can make a class style called ".border"url==http://=http:///url and then apply that border to [i70cda7dadc]any[/i70cda7dadc] div on the page. You see?

[code170cda7dadc]
<div id="footer">Then place the footer content here.
</div><--This is the close of the footer div-->[/code170cda7dadc]

Notice I made a comment by wrapping "<-- -->" around what I didn't want to show up on the page. This is a great way to keeping your page organized.

As far as your links go, the margin that you've used is measured from the top of the page, so you'll either have to increase your margin (blah) or adjust from where your measurement is based on where your div is nested.

Noteli The way you have your code written is going to center everything on the page because it's contained within the <div align="center>