FantomOptik Posted February 24, 2006 Share Posted February 24, 2006 (edited) Been lurking around this forum for awhile now (have learned a ton from this place).I am currently working on a 3-column layout done in CSS.I have gotten the site to look exactly how I want it in IE, but when I view in Firefox, Netscape, etc., everything is screwed up.Can someone look at the site, and my codes and see if I have messed up something?Development SiteCSS: body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#1E3276; margin:0px 0px 0px 0px; padding:0px; } .container { width:955px; margin:auto; } #banner { background:#1E3276; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#fff; height:75px; voice-family: "\"}\""; voice-family: inherit; height:74px; border-left:1px solid #FFCC00; border-top:1px solid #FFCC00; border-right:1px solid #FFCC00; } html>body #banner { height:74px; } #horiznav { background:#1E3276; top:40px; height:40px; voice-family: "\"}\""; voice-family: inherit; height:39px; } #ticker { background:#fff; top:114px; left:20px; height:14px; width:955px; voice-family: "\"}\""; voice-family: inherit; height:12px; border:1px solid #FFCC00; } #leftcontent { position: absolute; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; left:23px; top:137px; width:140px; height:100%; background:#fff; border:1px solid #FFCC00; } #centercontent { background:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; top:136px; margin-left: 163px; margin-right:163px; height:100%; border:1px solid #FFCC00; voice-family: "\"}\""; voice-family: inherit; margin-left: 165px; margin-right:165px; } html>body #centercontent { margin-left: 143px; margin-right:143px; } #rightcontent { position: absolute; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; right:22px; top:137px; width:140px; height:100%; background:#fff; border:1px solid #FFCC00; } p,h1,h2,h3,h4,h5,h6,hr,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:underline; } h2 { font-size:12px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:none; } h3 { font-size:10px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:none; } h4 { font-size:9px; font-weight:bold; color: #1E3276; padding-top:1px; text-align:center; text-decoration:none; } h5 { font-size:8px; font-weight:bold; color: #1E3276; padding-top:10px; padding-left:10px; text-decoration:none; } h6 { font-size:6px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:none; } hr { color: #1E3276; } #imgfloatcenter { float:center } #imgfloatleft { float:left } #imgfloatright { float:right; padding:0px; } #members { background:#ffcc00; } #banner h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#fff; text-decoration:underline; padding:10px 10px 0px 10px; margin:0px; } #rightcontent p { font-size:10px } HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"><html><head><title>Transportation Intermediaries Association (TIA)</title><script type="text/javascript" language="JavaScript1.2" src="stm31.js"></script><link rel="stylesheet" type="text/css" href="tia.css"></head><body bgcolor="#1E3276"><div class="container"><div id="banner"><a title="Transportation Intermediaries Association (TIA)" href="index.htm"><img id="imgfloatleft" src="images/tiacornerlogo.jpg" alt="Transportation Intermediaries Association (TIA)" width="84" height="75" border="0" /></a><img id="imgfloatright" src="images/trucks.jpg" alt="Transportation Intermediaries Association (TIA)" width="125" height="74" /><h1>Transportation Intermediaries Association (TIA)</h1>The association of third party logistics companies, including brokers, forwarders, intermodal marketing companies,<br>NVOCC's, air freight forwarders and freight audit & payment companies.</div><div id="horiznav" align="center"><script type="text/javascript" language="JavaScript1.2"><!--stm_bm(["menu267d",430,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0],this);stm_bp("p0",[0,4,0,0,4,5,0,7,100,"",-2,"",-2,90,0,0,"#000000","#1d3175","",3,1,1,"#ffcc00"]);stm_ai("p0i0",[0,"About TIA","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7,0,0,1,"#ffffff",0,"#ffcc00",0,"","",3,3,1,1,"#ffcc00","#ffffff","#1e3276","#1e3276","8pt Verdana","8pt Verdana",0,0]);stm_bp("p1",[1,4,0,0,4,4,0,0,100,"",-2,"",-2,90,0,0,"#000000","#1e3276","",3,1,1,"#1e3276"]);stm_aix("p1i0","p0i0",[0,"Mission Statement","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0]);stm_aix("p1i1","p1i0",[0,"Value Statement"]);stm_aix("p1i2","p1i0",[0,"Vision Statement"]);stm_aix("p1i3","p1i0",[0,"Code of Ethics"]);stm_aix("p1i4","p1i0",[0,"Membership Description"]);stm_aix("p1i5","p1i0",[0,"Board of Directors"]);stm_aix("p1i6","p1i0",[0,"Staff"]);stm_ep();stm_aix("p0i1","p0i0",[0,"Find a TIA Member"]);stm_bpx("p2","p1",[]);stm_aix("p2i0","p1i0",[0,"Find a 3PL"]);stm_aix("p2i1","p1i0",[0,"Find a Vendor"]);stm_aix("p2i2","p1i0",[0,"Find a Broker"]);stm_aix("p2i3","p1i0",[0,"3PL Sales"]);stm_aix("p2i4","p1i0",[0,"Bond Center"]);stm_ep();stm_aix("p0i2","p0i0",[0,"TIA Membership"]);stm_bpx("p3","p1",[]);stm_aix("p3i0","p1i0",[0,"Description of Eligibility/Application Process"]);stm_aix("p3i1","p1i0",[0,"Membership Application"]);stm_aix("p3i2","p1i0",[0,"2006 Dues"]);stm_aix("p3i3","p1i0",[0,"Review Board Procedures"]);stm_ep();stm_aix("p0i3","p0i0",[0,"Information"]);stm_bpx("p4","p1",[]);stm_aix("p4i0","p1i0",[0,"How to qualify a broker"]);stm_aix("p4i1","p1i0",[0,"Understanding your credit"]);stm_aix("p4i2","p1i0",[0,"Complete list of topics"]);stm_ep();stm_aix("p0i4","p0i0",[0,"TIA Store"]);stm_bpx("p5","p1",[]);stm_aix("p5i0","p1i0",[0,"Business 8th Edition"]);stm_aix("p5i1","p1i0",[0,"Traffic Management Planning, Operations & Control"]);stm_aix("p5i2","p1i0",[0,"Transportation Brokers Manual"]);stm_aix("p5i3","p1i0",[0,"Transportation, Logistics and the Law (Second Edition)"]);stm_aix("p5i4","p1i0",[0,"TIA 2006 New Broker Kit"]);stm_aix("p5i5","p1i0",[0,"Compensation in the Brokerage Industry, 2002"]);stm_ep();stm_aix("p0i5","p0i0",[0,"TIA Publications"]);stm_bpx("p6","p1",[]);stm_aix("p6i0","p1i0",[0,"Logistics Journal"]);stm_aix("p6i1","p1i0",[0,"TIA Weekly"]);stm_aix("p6i2","p1i0",[0,"Advertising Opportunities"]);stm_ep();stm_aix("p0i6","p1i0",[0,"Contact TIA"]);stm_aix("p0i7","p1i0",[0,"Directions"]);stm_aix("p0i8","p1i0",[0,"Site Map"]);stm_aix("p0i9","p1i0",[0,"Search"]);stm_ep();stm_em();//--></script></div><div id="ticker"><script language="JavaScript1.2">var marqueewidth="954px"var marqueeheight="20px"var marqueespeed=2var marqueebgcolor="#ffffff"var pauseit=1var marqueecontent='<nobr><font face="verdana"><----- Latest News Headlines Scroll Here -----> <----- Latest News Headlines Scroll Here -----> <----- Latest News Headlines Scroll Here -----></font></nobr>'marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NSvar copyspeed=marqueespeedvar pausespeed=(pauseit==0)? copyspeed: 0var iedom=document.all||document.getElementByIdif (iedom)document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')var actualwidth=''var cross_marquee, ns_marqueefunction populate(){if (iedom){cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarqueecross_marquee.style.left=parseInt(marqueewidth)+8+"px"cross_marquee.innerHTML=marqueecontentactualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth}else if (document.layers){ns_marquee Edited February 24, 2006 by Jonas Link to comment Share on other sites More sharing options...
sbrownii Posted February 25, 2006 Share Posted February 25, 2006 First, setting absolute positioning isn't a reliable way to get a good 3 column layout.So take out the absolute positioning for "leftcontent", "centercontent" and "rightcontent"Then set the "float" attribute on those three to "left";You will need to set a width for "centercontent" (I went for 669px) and remove the definition for margin-left and margin-right on "centercontent"You also have an extra closing tag for a div element. Find it and take it out (it is at the close of the "leftcontent" div element).In your style sheet change the width of the ticker to 953px and the height to 20px (to match that in the javascript so the border will show!)In the javascript change "marqueewidth" to 953pxNow you need to get the color for the <hr> elements to work. just change your style definitions for the hr element to this HR { COLOR: #1e3276; background: #1e3276; height: 2px; border: none;} It won't affect the layout, but it would be nice if you consolidated your definitions for borders - you defined each border separately - and for each element - and they are all the same!Anyway... I think that's it.Have a great day. Link to comment Share on other sites More sharing options...
FantomOptik Posted February 27, 2006 Author Share Posted February 27, 2006 Wow! Thanks for the reply. I made all of the changes that you suggested, but now when it is viewed in firefox, it floats everything to the left, thereby making the centercontent drop down to the bottom of the left content and the same with rightcontent. When viewed in IE, it is perfect. Is this something that simply won't work in Firefox?Thanks again for taking the time to help!!!Development Site UpdatedUpdated CSS: body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:0px 0px 0px 0px; padding:0px;; background: #1E3276} .container { width:955px; margin:auto; } #banner { background: #1E3276 font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-color:#ffffff; height:75px; voice-family: "\"}\""; voice-family: inherit; height:74px; border:0px 1px 1px 1px solid #FFCC00; } html>body #banner { height:74px; } #horiznav { top:40px; height:40px; voice-family: "\"}\""; voice-family: inherit; height:39px; } #ticker { top:114px; left:20px; height:20px; width:953px; voice-family: "\"}\""; voice-family: inherit; height:20px; border:1px solid #FFCC00; } #leftcontent { background: #FFFFFF; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; left:23px; top:137px; width:140px; height:100%; border:1px solid #FFCC00; } #centercontent { background: #FFFFFF; width:669px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; top:136px; height:100%; border:1px solid #FFCC00; voice-family: "\"}\""; voice-family: inherit; float:left; } html>body #centercontent { margin-left: 143px; margin-right:143px; } #rightcontent { float:left; background: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; right:22px; top:137px; width:140px; height:100%; border:1px solid #FFCC00; } p,h1,h2,h3,h4,h5,h6,hr,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:underline; } h2 { font-size:12px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:none; } h3 { font-size:10px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:none; } h4 { font-size:9px; font-weight:bold; color: #1E3276; padding-top:1px; text-align:center; text-decoration:none; } h5 { font-size:8px; font-weight:bold; color: #1E3276; padding-top:10px; padding-left:10px; text-decoration:none; } h6 { font-size:6px; font-weight:bold; color: #1E3276; padding-top:10px; text-decoration:none; } hr { color: #1e3276; background: #1e3276; height: 2px; border: none; } #imgfloatleft { float:left } #imgfloatrightA { float:right; } #imgmembers { padding:10px 0px 0px 0px; } #imgfloatright { float:right; padding:0px; } #banner h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#ffffff; text-decoration:underline; padding:10px 10px 0px 10px; margin:0px; } #rightcontent p { font-size:10px } Updated HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"><html><head><title>Transportation Intermediaries Association (TIA)</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><script type="text/javascript" language="JavaScript1.2" src="stm31.js"></script><link rel="stylesheet" type="text/css" href="tia.css"/></head><body bgcolor="#1E3276"><div class="container"><div id="banner"><a title="Transportation Intermediaries Association (TIA)" href="index.htm"><img id="imgfloatleft" src="images/tiacornerlogo.jpg" alt="Transportation Intermediaries Association (TIA)" width="84" height="75" border="0" /></a><img id="imgfloatright" src="images/trucks.jpg" alt="Transportation Intermediaries Association (TIA)" width="125" height="74" /><h1>Transportation Intermediaries Association (TIA)</h1><font color="#FFFFFF">The association of third party logistics companies, including brokers, forwarders, intermodal marketing companies,<br>NVOCC's, air freight forwarders and freight audit & payment companies.</font></div><div id="horiznav" align="center"><script type="text/javascript" language="JavaScript1.2"><!--stm_bm(["menu267d",430,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0],this);stm_bp("p0",[0,4,0,0,4,5,0,7,100,"",-2,"",-2,90,0,0,"#000000","#1d3175","",3,1,1,"#ffcc00"]);stm_ai("p0i0",[0,"About TIA","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7,0,0,1,"#ffffff",0,"#ffcc00",0,"","",3,3,1,1,"#ffcc00","#ffffff","#1e3276","#1e3276","8pt Verdana","8pt Verdana",0,0]);stm_bp("p1",[1,4,0,0,4,4,0,0,100,"",-2,"",-2,90,0,0,"#000000","#1e3276","",3,1,1,"#1e3276"]);stm_aix("p1i0","p0i0",[0,"Mission Statement","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0]);stm_aix("p1i1","p1i0",[0,"Value Statement"]);stm_aix("p1i2","p1i0",[0,"Vision Statement"]);stm_aix("p1i3","p1i0",[0,"Code of Ethics"]);stm_aix("p1i4","p1i0",[0,"Membership Description"]);stm_aix("p1i5","p1i0",[0,"Board of Directors"]);stm_aix("p1i6","p1i0",[0,"Staff"]);stm_ep();stm_aix("p0i1","p0i0",[0,"Find a TIA Member"]);stm_bpx("p2","p1",[]);stm_aix("p2i0","p1i0",[0,"TIA Access Searchable Online Directory"]);stm_ep();stm_aix("p0i2","p0i0",[0,"TIA Membership"]);stm_bpx("p3","p1",[]);stm_aix("p3i0","p1i0",[0,"Description of Eligibility/Application Process"]);stm_aix("p3i1","p1i0",[0,"Membership Application"]);stm_aix("p3i2","p1i0",[0,"2006 Dues"]);stm_aix("p3i3","p1i0",[0,"Review Board Procedures"]);stm_ep();stm_aix("p0i3","p0i0",[0,"Information"]);stm_bpx("p4","p1",[]);stm_aix("p4i0","p1i0",[0,"How to qualify a broker"]);stm_aix("p4i1","p1i0",[0,"Understanding your credit"]);stm_aix("p4i2","p1i0",[0,"Complete list of topics"]);stm_ep();stm_aix("p0i4","p0i0",[0,"TIA Store"]);stm_bpx("p5","p1",[]);stm_aix("p5i0","p1i0",[0,"Business 8th Edition"]);stm_aix("p5i1","p1i0",[0,"Traffic Management Planning, Operations & Control"]);stm_aix("p5i2","p1i0",[0,"Transportation Brokers Manual"]);stm_aix("p5i3","p1i0",[0,"Transportation, Logistics and the Law (Second Edition)"]);stm_aix("p5i4","p1i0",[0,"TIA 2006 New Broker Kit"]);stm_aix("p5i5","p1i0",[0,"Compensation in the Brokerage Industry, 2002"]);stm_ep();stm_aix("p0i5","p0i0",[0,"TIA Publications"]);stm_bpx("p6","p1",[]);stm_aix("p6i0","p1i0",[0,"Logistics Journal"]);stm_aix("p6i1","p1i0",[0,"TIA Weekly"]);stm_aix("p6i2","p1i0",[0,"Advertising Opportunities"]);stm_ep();stm_aix("p0i6","p1i0",[0,"Contact TIA"]);stm_aix("p0i7","p1i0",[0,"Directions"]);stm_aix("p0i8","p1i0",[0,"Site Map"]);stm_aix("p0i9","p1i0",[0,"Search"]);stm_ep();stm_em();//--></script></div><div id="ticker"><script language="JavaScript1.2" type="text/javascript">var marqueewidth="953px"var marqueeheight="20px"var marqueespeed=2var marqueebgcolor="#ffffff"var pauseit=1var marqueecontent='<nobr><font face="verdana">----- Latest News Headlines Scroll Here ----- ----- Latest News Headlines Scroll Here ----- ----- Latest News Headlines Scroll Here -----</font></nobr>'marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NSvar copyspeed=marqueespeedvar pausespeed=(pauseit==0)? copyspeed: 0var iedom=document.all||document.getElementByIdif (iedom)document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')var actualwidth=''var cross_marquee, ns_marqueefunction populate(){if (iedom){cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarqueecross_marquee.style.left=parseInt(marqueewidth)+8+"px"cross_marquee.innerHTML=marqueecontentactualwidth=document.all? temp.offsetWidth : document.getElementById("tem Link to comment Share on other sites More sharing options...
sbrownii Posted February 27, 2006 Share Posted February 27, 2006 take the "html" selector out of your css file.You used it a few times. I will give an example: html>body #banner { height:74px; } "banner" is an id, so there can only be one element accessible by the id banner, so just use "#banner" Also change your definition of border for "#banner" so it is like this: border:1px solid #FFCC00; ... is there a reason you defined the height 2 times for several elements?Find the following and take it out of your code - it is the cause of your float problem in FF html>body #centercontent { margin-left: 143px; margin-right:143px; } Make sure all of your css statements end with a ";" (check your definition for the background on "#banner")There is no such thing as "font-color" - change it to "color" in your definition of "#banner"One thing I didn't notice before is that your horizontal menu doesn't work in ff. Did it work before? I don't know if it is a script you found somewhere or not, but I can promise there are simpler ways to do horizontal menus, even ones with dropdown menus. If you have a hard time fixing it, just find another one.... Just search around for "css drop down menu" or something like that. Link to comment Share on other sites More sharing options...
FantomOptik Posted February 27, 2006 Author Share Posted February 27, 2006 Hey, I really appreciate the help.Nothing with this code has ever worked correctly in FF. Actually, it has never really worked correctly in any browser at this point.Maybe I am being too hopefull with making this type of site work in CSS.I think that biggest issue that I am having at this point is how different divs are placed for proper presentation through the browser. I understand that concepts of float and positioning, but I just can't seem to make it work.The big issue is height of divs. I have read several posts about it and no one really seems to have the correct code. It appears that it is a browser based issue (certain browsers applying css differently than others).At this point (and please, nobody shoot me), I feel that I should concentrate on IE, as the industry that the site is used for is very archaic and most of those folks who would be visiting will be on IE.I had also planned on putting a footer at the bottom that would stay static to the bottom, but after playing with some other code and playing around with footers, leftnav's etc., it seems that I will not be able to get that to work either. Could it be that CSS is too much for me? Am I destined to live a life of tables nested within tables within tables of which I shall never escape??????Again, I appreciate all of the time and effort for the help. I will make those changes that you displayed in your last reply and hopefully that will work and will spark something in my brain to be able to understand everything.I shall return!!!!!!! Link to comment Share on other sites More sharing options...
sbrownii Posted February 27, 2006 Share Posted February 27, 2006 The layout of 3 columns, header and footer is very common. To add your footer, just set the clear attribute in css for footer to "left", and set float to "none". You may also need to put "clear:right" for your rightContent - but I don't think so.CSS isn't too much. You just need to look at some good examples, and read up on a few decent articles about cross browser css. I promise there are some horrible articles, and it seems like a lot of people having trouble have read them...Just try to go for simple first -set as few properties as possible to get the layout you want. This time you are done, except for the horizontal menu, which I imagine is a javascript problem. If I get time I will try to look through it, but at first glance it looks pretty messy and I think you would be better finding something else that already works - be it script or css or both.Don't give up hope on cssOnce you finish this project, you should probably read through some good sites on standards compliant / browser compatible css.Some good places to read are:http://css.maxdesign.com.au/index.htm (if you are interested in 3col layout look at Selectutorial)http://www.westciv.com/style_master/house/...ials/index.htmlhttp://www.alistapart.com/ (good site, but may take you a while to figure out how to find what you want)There are, of course, more resources, but the sites I listed give pretty simple, clean examples of how to do things you will probably be trying to do pretty often if you stick with css. Link to comment Share on other sites More sharing options...
FantomOptik Posted February 27, 2006 Author Share Posted February 27, 2006 Thank you again for all of your help.That horizontal menu was created in Sothink's DHTML builder. I will look into something else. Really weird though, that menu did work in FF a few days ago, but I have been tweaking the code so much that I could have easily missed something.Thanks Again!!!!! The layout of 3 columns, header and footer is very common. To add your footer, just set the clear attribute in css for footer to "left", and set float to "none". You may also need to put "clear:right" for your rightContent - but I don't think so.CSS isn't too much. You just need to look at some good examples, and read up on a few decent articles about cross browser css. I promise there are some horrible articles, and it seems like a lot of people having trouble have read them...Just try to go for simple first -set as few properties as possible to get the layout you want. This time you are done, except for the horizontal menu, which I imagine is a javascript problem. If I get time I will try to look through it, but at first glance it looks pretty messy and I think you would be better finding something else that already works - be it script or css or both.Don't give up hope on cssOnce you finish this project, you should probably read through some good sites on standards compliant / browser compatible css.Some good places to read are:http://css.maxdesign.com.au/index.htm (if you are interested in 3col layout look at Selectutorial)http://www.westciv.com/style_master/house/...ials/index.htmlhttp://www.alistapart.com/ (good site, but may take you a while to figure out how to find what you want)There are, of course, more resources, but the sites I listed give pretty simple, clean examples of how to do things you will probably be trying to do pretty often if you stick with css.<{POST_SNAPBACK}> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now