Computer Science Canada

HTML w/ CSS
Author:  Numbah51 [ Sun Mar 11, 2007 9:37 pm ]
Post subject:  HTML w/ CSS
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>
Author:  rdrake [ Mon Mar 12, 2007 7:55 am ]
Post subject:  Re: HTML w/ CSS
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.
Author:  Numbah51 [ Mon Mar 12, 2007 10:35 am ]
Post subject:  RE:HTML w/ CSS
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.
Author:  PaulButler [ Mon Mar 12, 2007 1:35 pm ]
Post subject:  Re: HTML w/ CSS
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.
Author:  Fevian [ Mon Mar 12, 2007 5:03 pm ]
Post subject:  RE:HTML w/ CSS
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.

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy