CSS Forum

**jamest** · 09-12-2007, 08:14 PM

I have the Layout for my site finished and in Internet Explorer and AOL Explorer it appears how I want it to but in Firefox it appears different. I know that there are many differences between Internet Explorer and Firefox and I am wodering if there are any sites that list these differences and tells you how to fix them so I can Make My site appear the same in both.

**LadynRed** · 09-12-2007, 08:18 PM

Oh yeah, there are LOTS of bugs and they all have solutions. This site has them all laid out: http://www.positioniseverything.net/index.php

IE specifically here: http://www.positioniseverything.net/explorer.html

Just a word to the wise though - if it 'looks right' in IE and 'wrong' in FF, then IE is doing it WRONG, not FF !

**jamest** · 09-12-2007, 08:29 PM

Yea Ive heard that before, I just tend to use Internet Explorer so that is what I origionaly designed it to work for.

**Cyrus** · 09-12-2007, 09:18 PM

what?! there's people still using IE? LOL

**colbyt** · 09-12-2007, 09:43 PM

Quote:

Just a word to the wise though - if it 'looks right' in IE and 'wrong' in FF, then IE is doing it WRONG, not FF !

After much thought and frustration, I have to disagree with this statement.

A box, container or screen is only so big. Everything should fit inside the declared box size. IE does a lot of things wrong. This one thing it has right.

If you build a house, you start with the foundation, the box, everthing fits inside that measurement. Not going to change my mind on this one.

IE has it right!

**LadynRed** · 09-12-2007, 10:29 PM

Quote:

This one thing it has right.

They may have fixed the seriously busted box model in IE 7, but in IE 6, it's a MESS -- and it is NOT standards compliant at all. IE7 is not bug-free nor is it yet as standards-compliant as Opera and Firefox.

**colbyt** · 09-13-2007, 10:23 AM

I was referring to the standards being wrong. Padding should be subtracted from the size of the box containing the item.

No disrespect intended toward you, but it is a feminine concept to "bump out the walls" and make the space a little bigger. Which is exactly what happens when the padding is added to the size of the container.

**LadynRed** · 09-13-2007, 04:06 PM

Feminine concept ?? Geez.. how sexist can you get ??
I'd also be willing to bet you that the majority of the people on the W3C that created that spec were MEN !

**colbyt** · 09-14-2007, 07:47 PM

Quote:

Originally Posted by LadynRed

Feminine concept ?? Geez.. how sexist can you get ??
I'd also be willing to bet you that the majority of the people on the W3C that created that spec were MEN !

I will just say that I wrote that at the end of a long and trying day.

**tripy** · 09-14-2007, 08:12 PM

Quote:

I will just say that I wrote that at the end of a long and trying day.

And you just got slapped !
hehe...

**LadynRed** · 09-14-2007, 09:20 PM

Quote:

I will just say that I wrote that at the end of a long and trying day

LOL.. ok.. sounds like what was 'trying' you was a woman.. or maybe more than one ?

**jamest** · 09-14-2007, 10:05 PM

There are still a few errors that I can't figure out so here are FF and IE Screenshots and my code and if anyone can help me out that would be awsome.

IE screenshot-this is how I want it to look

FF screenshot

HTML Code

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="nerfdesignFF.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="level0">
<div class="lftBar">
<!-- Left Bar Content Goes Here -->
<div class="randomhomemade">
Random<br />Homemade<br />
<img class="randomhomemade" src="Images/ComingSoon.png" />
</div>
<div class="aboutus">
<div class="aboutustitle">
About Us
</div>
<!-- About Us Content Goes Here -->
About Us Content, About Us Content, About Us Content, About Us Content, About Us Content, About Us Content, About Us Content
</div>
</div>
<div class="level1">
<div class="header">
<!-- Header Image Goes Here -->
<img class="header" src="Images/Nerf Banner-Logo.gif" />
</div>
<div class="topNavBar">
<!-- Horizontal Navigation Bar Links Go Here -->
<ul class="topNavBarul">
<li class="topNavBarli"><a class="topNavBara" href="#">Link one</a></li>
<li class="topNavBarli"><a class="topNavBaraCurrent" href="#">Link two</a></li>
<li class="topNavBarli"><a class="topNavBara" href="#">Link three</a></li>
<li class="topNavBarli"><a class="topNavBara" href="#">Link four</a></li>
</ul>
</div>
<div class="level2">
<div class="rgtBar">
<div class="rgtSubtitle">
Navigation<br />Bar
</div>
<!-- Right Navigation Bar Links Go Here -->
<div class="rgtNavBar">
<ul class="rightNavBarul">
<li><a class="rightNavBara" href="#">&raquo; Link one</a></li>
<li><a class="rightNavBaraCurrent" href="#">&raquo; Link two</a></li>
<li><a class="rightNavBara" href="#">&raquo; Link three</a></li>
<li><a class="rightNavBara" href="#">&raquo; Link four</a></li>
</ul>
</div>
<div class="rgtSubtitle">
Nerf Design's Friends
</div>
<div class="rgtNavBar">
<ul class="rightNavBarul">
<!-- Nerf Design's Freinds Links Go Here -->
<li><a class="rightNavBara" href="#">&raquo; Link one</a></li>
<li><a class="rightNavBara" href="#">&raquo; Link two</a></li>
<li><a class="rightNavBara" href="#">&raquo; Link three</a></li>
<li><a class="rightNavBara" href="#">&raquo; Link four</a></li>
</ul>
</div>
<!-- Nerf Design's Freinds Links Go Here -->
</div>
<div class="level3">
<div class="title">
<!-- Title of Page Goes Here -->
Title
</div>
<div class="main">
<div class="loginBox">
<!-- Login Box Content Goes Here -->
Login Box
<p>Login Box Content<br />Login Box Content<br />Login Box Content<br />Login Box Content<br />
</p>
</div>
<div class="subtitlefloat">
<!-- Subtitle of Page Goes Here -->
Subtitle
</div>
<!-- Main Content Goes Here -->
Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content, Main Content
<div class="subtitle">
<!-- 2nd Subtitle of Page Goes Here -->
Subtitle
</div>
More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content, More Main Content
</div>
</div>
</div>
</div>
</div>
<div class="bottomNavBar">
<!-- Bottom Horizontal Navigation Bar Links Go Here -->
<ul class="bottomNavBarul">
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link one</a></li> 
<li class="bottomNavBarli">–</li>
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link two</a></li> 
<li class="bottomNavBarli">–</li>
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link three</a></li> 
<li class="bottomNavBarli">–</li>
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link four</a></li>
</ul>
</div>
<div class="copyrightBar">
&copy;2007 Yonggunner
</div>
</body>
</html>

CSS Code

Code:

/* CSS Document */
body{
background:#EDEEEE;
margin:9px;
}
div.level0{
background:#25587E;
position:relative;
}
div.level1{
background:#EDEEEE;
margin-left:145px;
padding-left:9px;
}
div.level2{
background:#4070AE;
position:relative;
}
div.level3{
background:#EDEEEE;
margin-right:145px;
padding-right:9px;
}
div.main{
background:#CCC;
}
div.header{
background:#41627E;
border-left:thick solid #25587E;
border-right:thick solid #25587E;
border-top:thick solid #25587E;
margin:0px;
padding:0px;
}
img.header{
width:100%;
}
div.title{
background:#4070AE;
margin-top:9px;
padding:0;
text-align:center;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:140%;
}
div.subtitlefloat{
background:#25587E;
margin:9px 184px 0 9px;
padding-left:55px;
text-align:left;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:110%;
}
div.subtitle{
background:#25587E;
margin:9px 9px 0 9px;
padding-left:55px;
text-align:left;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:110%;
}
div.loginBox{
float:right;
width:175px;
background:#4070AE;
position:relative;
margin:0;
padding:0;
}
div.lftBar{
position:absolute;
width:145px;
top:0px;
left:0px;
}
div.rgtBar{
position:absolute;
width:140px;
top:0;
right:0;
border-left:5px solid #25587E;
}
div.rgtSubtitle{
background:#25587E;
padding-top:3px;
padding-bottom:3px;
text-align:center;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:110%;
}
div.topNavBar{
background:#25587E;
border-bottom:4px solid #4070AE;
}
ul.topNavBarul{
margin:0;
padding:0;
margin-left:40px;
list-style-type:none;
width:100%;
}
li.topNavBarli{
text-transform:uppercase;
display:inline
}
a.topNavBara{
float:left;
margin:2px;
padding:2px;
display:block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#41627E;
border-bottom:4px solid #25587E;
}
a.topNavBaraCurrent{
float:left;
margin:2px;
padding:2px;
display: block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#4070AE;
border-bottom:4px solid #4070AE;
}
a:hover.topNavBara{
background-color:#736F6E
}
div.rgtNavBar{
background:#4070AE;
margin:0;
}
ul.rightNavBarul{
width:100%;
margin:0;
padding:0;
list-style-type:none;
text-transform:uppercase;
}
a.rightNavBara{
margin-top:4px;
margin-bottom:4px;
padding:2px;
display: block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#41627E;
text-align: left;
}
a.rightNavBaraCurrent{
margin-top:4px;
margin-bottom:4px;
padding:2px;
display: block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#25587E;
text-align: left;
}
a:hover.rightNavBara{
background-color:#736F6E
}
div.bottomNavBar{
background:#25587E;
margin:9px 9px 0 9px;
}
ul.bottomNavBarul{
margin:0;
padding:0;
margin-left:40px;
list-style-type:none;
text-transform:uppercase;
width:100%;
}
li.bottomNavBarli{
display:inline;
float:left;
color:#FFFFFF;
}
a.bottomNavBara{
margin-left:5px;
margin-right:5px;
padding:1px;
color:#FFFFFF;
text-decoration:none;
font-size:95%;
}
div.copyrightBar{
background:#CCC;
margin-left:9px;
margin-right:9px;
padding-left:75px;
}
div.randomhomemade{
background:#4070AE;
margin-top:9px;
margin-left:9px;
margin-right:9px;
padding-left:9px;
padding-right:9px;
padding-bottom:9px;
text-align:center;
color:#FFFFFF;
text-decoration:none;
font-size:90%;
}
img.randomhomemade{
width:100%;
}
div.aboutus{
background:#4070AE;
margin:9px;
padding:2px;
text-align:left;
color:#FFFFFF;
text-transform:uppercase;
font-size:80%;
}
div.aboutustitle{
background:#41627E;
padding:2px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
font-variant:small-caps;
font-size:100%;
}

**LadynRed** · 09-19-2007, 04:34 PM

1 - get rid of the xml statement in the code, it will throw IE into Quirks mode and you don't want that.

2 - Give your .topNavBar a defined height, wide enough to accommodate your menu, I used 1.2em, best not to use px for this or for your font sizes.
3- For your title, put it in a proper H1 and then style the H1 as needed.
4- Your .main is not flush against the title bar because of margin-collapse - which is NOT a bug. Add padding-top: 1px to .main and it will pull up.
5 - Fix the login box space with a -1px top margin to remove the 1px gap that happens to fix the .main margin collapse
6 - add some padding to the right and left of your containers, you need some white space.

**jamest** · 07:54 PM

Thank You ALOT!!!

Especially for the NavBar fix.

And I didn't know you could do negative margins that is really helpfull.

**LadynRed** · 09-19-2007, 09:03 PM

Sure, you can do negative margins, it comes in very handy for some layouts.