-----------------------------------

Numbah51

Sun Mar 11, 2007 9:37 pm


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: 





Blurd's Portfolio




   Home
   About
   Graphics
   Coding
   Free Stuff
   Contact
 



content


Copyright 2007 blurd.info




Stylesheet (main.css)


#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;
}






-----------------------------------

rdrake

Mon Mar 12, 2007 7:55 am


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.


MyTitle




(Your stuff goes here)

Also, I honestly do not know why you are using the del tag.  Apparently it's used for something completely unwanted...Defines text that has been deleted in a document.You want to define your navigation as deleted?

Also a suggestion, the [url=https://addons.mozilla.org/firefox/60/]Web Developer Toolbar is a handy addition to Firefox.  Highly recommended.


-----------------------------------

Numbah51

Mon Mar 12, 2007 10:35 am


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.


-----------------------------------

PaulButler

Mon Mar 12, 2007 1:35 pm


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:


.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

Mon Mar 12, 2007 5:03 pm


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.