HTML w/ CSS

Numbah51 · **Posted:** Sun Mar 11, 2007 9:37 pm

This isn't looking quite right in firefox but it looks exactly how i want in ie. Any help would be appreciated

GOOD in ie: http://img457.imageshack.us/img457/7919/goodyt9.gif
BAD in ff: http://img247.imageshack.us/img247/701/badic7.gif

HTML (index.php)

code:

<LINK REL="stylesheet" type="text/css" href="main.css" title="default">

<div id="wrapper">
<div id="branding">
Blurd's Portfolio
</div>
<div id="mainNav">
<del id="delnav">
<ul id="nav">
<li><a id="farleft" href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=about">About</a></li>
<li><a href="index.php?page=graphics">Graphics</a></li>
<li><a href="index.php?page=coding">Coding</a></li>
<li><a href="index.php?page=freestuff">Free Stuff</a></li>
<li><a href="index.php?page=contact">Contact</a></li>
</ul>
</del>
</div>
<div id="content">
content
</div>
<div id="footer">
Copyright 2007 blurd.info
</div>
</div>

Stylesheet (main.css)

code:

<STYLE>
#nav{
margin:0;
padding: 0;
float: left;
}

#nav li{
display: inline;
}

#nav li a{
float: left;
color: white;
padding: 8px 10px;
text-decoration: none;
background: transparent url(dark.gif) top right no-repeat;
border-top: 0px solid black;
border-bottom: 0px solid black;
border-right: 1px solid black;

font-size:12px;
font-weight:bold;
font-family:"Trebuchet MS";
}

#nav li a:visited{
color: white;
}

#nav li a:hover{
color: #4E4E4E;
background-image: url(light.gif);
}

#nav li a#farleft{
border-left: 1px solid black;
color:white;
}

#nav li a:hover#farleft{
border-left: 1px solid black;
color: #4E4E4E;
background-image: url(light.gif);
}

BODY{
margin:5px;
background-color:#B7610D;
}

#wrapper {
width: 100%;
height:100%;
position: relative;
text-align:center;
background-color:#B7610D;
}

#branding {
height:100px;
text-align:center;
vertical-align:middle;
background-color:#E78C10;
width:85%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;

font-size:75px;
font-weight:bold;
font-family:"Trebuchet MS";
color:#B7610D;
}

#content {
width: 85%;
background-color:#E78C10;
border-right:1px solid black;
border-left:1px solid black;
font-size:12px;
font-weight:bold;
font-family:"Trebuchet MS";
padding:10px;
}

#mainNav {
height:37px;
background: transparent url(dark.gif);
text-align:center;
border-top:1px solid black;
border-bottom:2px solid black;

width:85%;
border-right:1px solid black;
border-left:1px solid black;
}

#footer {
clear: both;
background-color:#E78C10;
width:85%;
border-right:1px solid black;
border-left:1px solid black;
border-bottom:1px solid black;
border-top: 1px solid black;
font-size:10px;
font-weight:bold;
font-family:"Trebuchet MS";
}

#delnav {
display:inline-block;
text-align:Center;
text-decoration:none;
padding-right:50px;
}

</STYLE>

rdrake · **Posted:** Mon Mar 12, 2007 7:55 am

It doesn't render because Firefox requires a proper HTML page in order to render it. You are missing a doctype, head, title, and of course the body tag.

Your document should be something like the following.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>MyTitle</title>
<link rel="stylesheet" ... />
</head>

<body>
(Your stuff goes here)
</body>
</html>

Also, I honestly do not know why you are using the del tag. Apparently it's used for something completely unwanted...

w3c wrote:

Defines text that has been deleted in a document.

You want to define your navigation as deleted?

Also a suggestion, the Web Developer Toolbar is a handy addition to Firefox. Highly recommended.

Numbah51 · **Posted:** Mon Mar 12, 2007 10:35 am

i am using del so i can center the navigation (works in ie) and when i remove it, the navigation is up a bit but still not perfect.

PaulButler · **Posted:** Mon Mar 12, 2007 1:35 pm

To center a div in anything except IE, set the div's left and right margins to "auto". For example, in the css:

code:

.centeredDiv {margin: 0px auto;}

The rest of the problems probably have to do with how IE and FF treat padding differently, but it would take a while to figure out what exactly is the problem. When I get in a situation like this I would /* block comment */ the whole CSS file and uncomment it a few lines at a time, reloading it in both IE and FF after each reload, and make sure they still look the same.

Fevian · **Posted:** Mon Mar 12, 2007 5:03 pm

Yeah. You really need a full HTML document for it to work. You are using XHTML 1.0, but it's got a few errors. For syntax and many more good tutorials about web design, include HTML/XHTML, XML, CSS, PHP, and all kinds of stuff. It's pretty good and helped me out a bit in the past.

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members