CSS, DIV - Firefox NOT okay, IE fine? - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS, DIV - Firefox NOT okay, IE fine?

chap23

2:57 pm on Mar 31, 2005 (gmt 0)

Hey all,

I'd like to get some help if possible. The tired old cliche of "I'm new to HTML, CSS" applies to me, thus I have a question for you:

I can't get my site centered in Firefox to save my life. For whatever reason, it works fine in MSIE. I've tried every Google search and forum I can think of, but nothing is working. I'm actually using Firefox during editing, and it's all hand coding. Both the HTML and CSS validate just fine. Any help is appreciated!

*edit-removed code; links all over the place!

[edited by: chap23 at 3:11 pm (utc) on Mar. 31, 2005]

benihana

3:00 pm on Mar 31, 2005 (gmt 0)

try:

#content, #menu, #footer {
margin:0 auto;
}

ff doesnt treat divs as text in terms of text-align ;)

welcome to WebmasterWorld!

you may want to remove your url - its not needed and a mod will probably snip it for you if you dont

chap23

3:04 pm on Mar 31, 2005 (gmt 0)

***edit - it worked! thank you so much - i hate to say it, but you fixed in 30 sec. what i've been playing with for four days!***

thanks for the quick reply! i took the links down; sorry about that!

let's see if this works!

benihana

3:12 pm on Mar 31, 2005 (gmt 0)

but you fixed in 30 sec. what i've been playing with for four days!

:)theres many a CSS (and coding generally) nuance when ive been tearing my hair out for hours, then come here and its been fixed in minutes.

Its all part of the learning curve :)

<added> noticed you edited your post. Taking the URLS out is a good move, but you can leave the code - brief snippets are welcomed here and make the post useful for others who may stumble into the forums through a search engine :)</added>

chap23

10:32 pm on Mar 31, 2005 (gmt 0)

okay, here's the code. i searched and found i can only edit for a limited amount of time after the post, so i'm just going to add a new reply:

-HMTL-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<body>
<div id="title">
<img src="images/main_title.gif">
</div>
<div id="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="">about</a></li>
<li><a href="">gallery</a></li>
<li><a href="">news</a></li>
<li><a href="">contact</a></li>
</ul>
<br clear="left">
</div>
<div id="content">
<p align="left">Words will go here.<br>Words will go here, too.<br>
</div>
<div id="footer">
Copyright �2005 Andrew Chapman.  All rights reserved. � <a href="http://my.statcounter.com/project/standard/stats.php?project_id=601741&guest=1" target="_blank">Stat Counter</a>
</div>

<script type="text/javascript" language="javascript">
var sc_project=601741;
var sc_partition=4;
var sc_security="3f298950";
var sc_invisible=1;
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img src="http://c5.statcounter.com/counter.php?sc_project=601741&java=0&security=3f298950&invisible=1" alt="web stats" border="0"></a> </noscript>

</body>
</html>
_________________________________________________

-CSS-

body {
text-align: center;
margin-left: auto; margin-right: auto;
background-image: url(http://www.andyandemily.com/images/bkgrd.jpg);
background-color: white;
font-family: verdana, tahoma, sans-serif;
font-size: 12px;
color: black;
padding: 0px;
}

/* Just a reminder in case I ever need to use comments */

h2 {
color: white;
font-family: verdana, tahoma, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}

div#title {
margin:0 auto;
border:solid 2px #336699;
width:800px;
}

div#menu {
margin:0 auto;
width: 800px;
border-left:solid 2px #336699;
border-right:solid 2px #336699;
border-bottom:solid 2px #336699;
background: white;
list-style-type: none;
}

div#menu li {
margin:0 auto;
width: 800px;
float: left;
width: 140px;
text-align: center;
list-style-type: none;
}

div#content {
margin:0 auto;
height: 100%;
width: 800px;
background-color: white;
border-left: solid 2px #336699;
border-right: solid 2px #336699;
}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

a:active {
color: black;
text-decoration: none;
}

a:hover {
color: #336699;
text-decoration: none;
}

div#footer {
margin:0 auto;
color: white;
font-family: verdana, tahoma, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
background-color: #336699;
border: solid 2px #336699;;
width: 800px;
padding: 0px;
}

p, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0 0 10px 0;}