CSS Problems with FireFox, Looks good in IE, but not at all right in FF. Options

[CrimsonSkyGraphi...]

Hey everyone,

So, I'm trying to learn how to code a template with only CSS. Went really well. Had it looking perfect in IE. Then a friend of mine on FF told me it didn't look right..so I finally gave in and downloaded it..only to find out my template looks really awful. =\ None of the divs are lined up right and some things aren't the right size.

So far, I've been able to correct the line-height problem by adding a display:block to each of the links I used it in. Beyond that, I'm stuck. I've look around online and most of the fixes I find are for the reverse problem: works in FF but not in IE.

Can someone take a look and give me some help/suggestions? Please? I'll include a screen cap of how it SHOULD look (as it does in IE), so people can get an idea of what I want.

Also, in order to get the links in the banner to align right in FF, I had to float them. This caused a problem for the bottom one in IE..creating a duplicate of the last word on a new line. This you will see if you view it in IE. The screencap was taken before this problem.

Any ideas on that one, too?

Here's the template in action: http://www.crimsonskygraphics.com/tester_asd345/

Here's the screencap (click to view full):


Here's the css stylesheet:

CODE

body {<BR>margin:0 auto auto; <BR>padding:0px;<BR>background-color:#000000; <BR>background-image:url('CSG_CSS001a_BG.jpg');<BR>background-repeat:repeat-y;<BR>background-position: center; <BR>scrollbar-Arrow-Color: #8692b2;<BR>scrollbar-Track-Color:#000000; <BR>scrollbar-Shadow-Color: #3a3d48;<BR>scrollbar-Face-Color: #17181d; <BR>scrollbar-Highlight-Color: #3a3d48; <BR>scrollbar-darkshadow-color: #3a3d48;<BR>scrollbar-3dLight-Color: #3a3d48;<BR>text-align:center;<BR>font-family:verdana; font-size:12px; color:#8692b2}</P> <P>.clearall {clear:both;}</P> <P>.body {margin:0 auto; width:800px; height:100%; text-align:left;}</P> <P>.header {background-color:#000000; width:800px; height:115px; border-bottom:8px solid; border-color:#3a3d48;}</P> <P>.bannertitle {width:600px; height:115px; float:left; padding-top:22px; padding-left:25px; <BR>font-family:verdana; font-size:14px; color:#8692b2;}</P> <P>.bannernav {width:200px; height:115px; float:right; text-align:right; }</P> <P>.bannernav a.link1 {width:110px; line-height:30px; background-color:#17181d; padding-right:10px;<BR>border-left:10px solid; border-color:#10438c;<BR>font-family:verdana; font-size:12px; text-decoration:none; text-transform:uppercase; <BR>font-weight:normal; color:#3b8bfd; display:block; float:right;}<BR>.bannernav a.link1:hover {background-color:; border-left-color:#5594ed; color:#9dc6ff; display:block; float:right;}</P> <P>.bannernav a.link2 {width:140px; line-height:30px; background-color:#17181d; padding-right:10px;<BR>border-top:1px solid #3a3d48; border-left:10px solid #10438c;<BR>font-family:verdana; font-size:12px; text-decoration:none; text-transform:uppercase; font-weight:normal; <BR>color:#3b8bfd; display:block; float:right;}<BR>.bannernav a.link2:hover {background-color:; border-left-color:#5594ed; color:#9dc6ff; display:block; float:right;}</P> <P>.bannernav a.link3 {width:170px; line-height:30px; background-color:#17181d; padding-right:10px;<BR>border-top:1px solid #3a3d48; border-left:10px solid #10438c;<BR>font-family:verdana; font-size:12px; text-decoration:none; text-transform:uppercase; <BR>font-weight:normal; color:#3b8bfd; display:block; float:right;}<BR>.bannernav a.link3:hover {background-color:; border-left-color:#5594ed; color:#9dc6ff; display:block; float:right;}</P> <P>.bannernav a.link4 {width:200px; line-height:30px; background-color:#17181d; padding-right:10px;<BR>border-top:1px solid #3a3d48; border-left:10px solid #10438c;<BR>font-family:verdana; font-size:12px; text-decoration:none; text-transform:uppercase; <BR>font-weight:normal; color:#3b8bfd; display:block; float:right;}<BR>.bannernav a.link4:hover {background-color:; border-left-color:#5594ed; color:#9dc6ff; display:block; float:right;}</P> <P>.mainbody {width:800px;}</P> <P>.rightcolumn {width:577px; float:right; padding:15px; padding-right:20px; padding-left:0px; padding-bottom:25px;}</P> <P>.rightcolumn ul.text {font-family:verdana;}</P> <P>.leftcolumn {width:200px; float:left; padding:10px; padding-top:0px;}</P> <P>.leftcolumn a.link {margin-left:-10px; margin-bottom:0px; padding-left:15px;<BR>width:200px; line-height:25px; text-align:left; <BR>background-color:#17181d; border-bottom:1px solid; border-color:#3a3d48;<BR>font-family:verdana; font-size:12px; text-decoration:none; text-transform:none; <BR>font-weight:normal; color:#3b8bfd; display:block;}<BR>.leftcolumn a.link:hover {margin-left:-10px; width:200px; color:#1954a7; display:block;}</P> <P>.footer {margin:0 auto; background-color:#000000; width:800px; height:50px; padding:10px;<BR>border-top:5px solid; border-color:#3a3d48; text-align:center; display:block;}</P> <P>h1 {float:right; text-align:center; width:570px; line-height:30px; <BR>padding-right:10px; margin-right:-20px; margin-left:-30px; margin-bottom:20px;<BR>border-bottom:1px solid #3a3d48; border-top:1px solid #3a3d48; border-left:10px solid #063272; <BR>background-color:#000000; <BR>font-family:verdana; font-size:16px; color:#3b8bfd; text-transform:uppercase; font-weight:normal; display:block;}</P> <P>h2 {width:200px; line-height:30px; text-align:center; margin-bottom:0px; margin-top:-1px; margin-left:-10px;<BR>border-top:1px solid; border-bottom:1px solid; border-color:#3a3d48; background-color:#000000; <BR>font-family:verdana; font-size:14px; color:#5594ed; text-transform:uppercase; font-weight:normal; display:block;}</P> <P>h3 {margin-bottom:-15px; margin-left:-5px;<BR>font-family: verdana; color:#5594ed; font-weight:normal; text-transform:uppercase; font-size:40px; display:block;}</P> <P>a, a:link {font-family:verdana; color:#c7cbd5; font-weight:normal; font-size:12px; text-decoration:none;}<BR>a:hover {font-family:verdana; color:#5594ed; font-weight:normal; font-size:12px; text-decoration:none;}</P> <P>b {font-weight:bold; color:#8f9fc9;}<BR>i {font-weight:italic; color:#8f9fc9;}<BR>u {font-weight:normal; text-decoration:none; border-bottom:1px solid; color:#8f9fc9; border-color:#1954a7;}<BR>blockquote {background-color:#202128; padding:10px;}

NOTE: The code box added all the br tags into the style sheet. =\ It's not in the original code.

Thank you so very much for any help. I'm really at a loss, as I've never worked with FF before.

[Firiath]

I think you should align it right in FF first
Then do the tutorials on how to align it properly in IE as well xD