Jump to content

Float Problem In Ie6

mboehler3

By mboehler3
in CSS

Recommended Posts

mboehler3 Member

mboehler3

Posted
Posted

My website here: http://www.healthnutsradio.com/index2.php has a problem in IE 6. Here are screenshots:ie6-screen1.gifie6-screen2.gifThe rightbox is supposed to float to the right of the mainbox. Is there a style I can apply that won't affect its look in IE7+ or FF?Here's the HTML code:

<body><div id="Wrapper"><div id="Header"></div>[b]<div id="Box">[/b]<img src="main-images/main_box_top.jpg" alt="Health News"><div id="Mainbox"><div class="BodyCopyMain"><b>Welcome to our Site!</b><br><br>Come on in and stay for a while.  <b>Kick back, enjoy and relax!</b><br><br>Our <b>Nutritional Institute team</b> of practitioners and health nuts has carefully selected  our radio guests, news pieces, organic recipes, <b>healthy products and so much more!</b></div><div style="margin-left: 3px;"><img src="main-images/natural_health_news.jpg" alt="Natural Health News"></div><div style="padding-left: 10px; padding-right: 12px;"><div class="mainHeader"><img src="main-images/flower.jpg" alt="flower"><a href="http://healthnutsradio.com/newsletter_archives/?p=3" target="_blank">The Alarming Effects of the Microwave</a></div><div class="BodyCopy" style="padding-left: 15px; padding-right: 15px;" align="justify">Microwave cooking ovens were originally researched and developed by German scientists to support mobile operations during the invasion of the Soviet Union. Had they perfected electronic equipment to... <a href="http://healthnutsradio.com/newsletter_archives/?p=3" target="_blank">[READ MORE]</a></div><div class="mainHeader"><img src="main-images/flower.jpg" alt="flower"><a href="http://healthnutsradio.com/newsletter_archives/?p=6" target="_blank">Vitamin C and Zinc: Universal Vaccine for the Flu</a></div><div class="BodyCopy" style="padding-left: 15px; padding-right: 15px;" align="justify">The mainstream media is ablaze today with talk of an important new discovery that could lead to a "universal vaccine" that ends all colds for a lifetime. This universal vaccine, researchers say... <a href="http://healthnutsradio.com/newsletter_archives/?p=6" target="_blank">[READ MORE]</a></div><div class="mainHeader"><img src="main-images/flower.jpg" alt="flower"><a href="http://healthnutsradio.com/newsletter_archives/?p=270" target="_blank">Staying Healthy While Traveling</a></div><div class="BodyCopy" style="padding-left: 15px; padding-right: 15px;" align="justify">As summer vacation time is approaching, I felt inspired to encourage all of you to stay strong on your healthy program and not give in to laziness. There is no need to go on vacation and a business trip and... <a href="http://healthnutsradio.com/newsletter_archives/?p=270" target="_blank">[READ MORE]</a></div><div class="mainHeader"><img src="main-images/flower.jpg" alt="flower"><a href="http://healthnutsradio.com/newsletter_archives/?p=12" target="_blank">Arsenic May Be Linked to Increased Diabetes Risk</a></div><div class="BodyCopy" style="padding-left: 15px; padding-right: 15px;" align="justify">In a groundbreaking study, researchers have found that exposure to arsenic, a toxic substance which is often present in low concentrations in United States drinking water supplies, may be associated... <a href="http://healthnutsradio.com/newsletter_archives/?p=12" target="_blank">[READ MORE]</a></div><div class="mainHeader"><img src="main-images/flower.jpg" alt="flower"><a href="http://healthnutsradio.com/newsletter_archives/?p=15" target="_blank">Vitamins Protect Against Noise-Induced Hearing Loss</a></div><div class="BodyCopy" style="padding-left: 15px; padding-right: 15px;" align="justify">According the National Institutes of Health's National Institute on Deafness and Other Communication Disorders (NIDCD), about 26 million Americans between the ages of 20 and 69 have hearing loss... <a href="http://healthnutsradio.com/newsletter_archives/?p=15" target="_blank">[READ MORE]</a></div></div></div><img src="main-images/main_box_bottom.jpg" alt="Health News"><img src="main-images/main_box_top.jpg" alt="Health News"><div id="Mainbox"><div class="BodyCopyMain"><b>Check out our products</b> where we have everything from comfy organic pillows, purest of pure vitamin E, <b>Green Latte supreme nutrient drink</b>, organic supplements, probiotics, Vitamin D, the best in homeopathy and herbs, to shower filters, water filters, dehydrators and the <b>purest salmon around!</b></div></div><img src="main-images/main_box_bottom.jpg" alt="Health News"></div>[b]<div id="Rightbox">[/b]<div id="sponsorRight"><img src="main-images/trophy.gif"><a href="http://www.greenbranders.com/">GreenBranders.com</a><div id="sponsorOpp"><a href="health_nuts_radio_overview.pdf">Click Here For Sponsorship Opportunities</a><a href="#">Listen to our Demo show</a></div></div><div id="Vid"><img src="main-images/small_box_top.jpg" alt="Video News"><div id="Video"><div class="smallBanner"><img src="main-images/video_news_sm.jpg" alt="Video News" border="0"></div><div id="VideoPlayer"><object width="300" height="285"><param name="movie" value="http://www.youtube.com/v/emjCzaHtSrg&hl=en&fs=1&rel=0&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/emjCzaHtSrg&hl=en&fs=1&rel=0&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="285"></embed></object></div><br><div class="moreTestimonials"><a href="http://www.healthnutsradio.com/video_archives">[ Video News Archives ]</a></div></div><img src="main-images/small_box_bottom.jpg" alt="Video News"></div><img src="main-images/linda_newsletter.jpg" alt="Be Smart, Be Natural, Be Healthy!" usemap="#newsmap" border="0"><map name="newsmap">	<area shape="rect" coords="225,115,329,133" href="subscribe.php" alt="Subscribe!"></map><div id="Test"><img src="main-images/small_box_top.jpg" alt="Testimonials"><div id="Testi"><div class="smallBanner"><img src="main-images/testimonials_sm.jpg" alt="Testimonials" border="0"></div><div class="Testimonials"><em>"I’ve been listening to the Health Nuts Radio Show and I am so grateful for the programming.  It’s helped me and several of my family members with some of our health challenges.  Keep up the good work and thanks for the shows!"</em> - <b>Natalie, Chicago, IL</b><br><br>	<em>"I have listened to the radio show and I learned so much about health that I did not already know.  I especially found the piece on fibromyalgia and ADD/ADHD interesting since I have a few friends who suffer from these."</em> - <b>Alyssa, Winthrop Harbor, IL</b><br><br>	<em>"I listened to your shows online, however; some of my relatives don’t have computers and we would love to get you on one of our stations in our area.  I know a lot more people these days can certainly use the information you are providing on how to get fit."</em> - <b>Rich, Houston, TX</b></div><br><div class="moreTestimonials"><a href="testimonials.php">[ More Testimonials ]</a></div></div><img src="main-images/small_box_bottom.jpg" alt="Testimonials"></div><div id="Rightsideinfo" align="center"><img src="main-images/cardLogos.gif"><br><br><script type="text/javascript" language="javascript">var ANS_customer_id="19939290-b05d-4ad6-9eee-98c02bcf98ab";</script> <script type="text/javascript" language="javascript" src="//VERIFY.AUTHORIZE.NET/anetseal/seal.js" ></script><br><br><script type="text/javascript">var addthis_pub="nieusa";</script><a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script><br><br></div></div><div id="Footer"><p class="bottomLinks"><a href="copyright_notice.php">Copyright Notice</a>     <a href="privacy_policy.php">Privacy Policy</a>     <a href="sitemap.php">Sitemap</a></p></div></div></body>

css:

html,body{ margin: 0;padding: 0;text-align: center;background-color:#ffffcc;}.redirect{font-family:Arial;font-size:9pt;color:#000000;margin-top:15px;}#Header img{ vertical-align: middle; }#Wrapper { width: 1000px;margin: 0 auto;text-align: left; }.formOption{font-family:Arial;font-size:8pt;}.formQuestion{	font-weight:bold;font-family:Arial;font-size:9pt;}.recipeTitle{	font-family:Arial;font-size:11pt;color:#000000;font-weight:bold;}.recipeDirect{	font-family:Arial;font-size:10pt;color:#000000;}.recipeIngre{	font-family:Arial;font-size:8pt;color:#000000;background-color:#d3d3d3;width:400px;padding-left:10px;padding-bottom:10px;padding-top:10px;margin-bottom:10px;}.glossWord{	font-family:Arial;font-size:11pt;color:#000000;font-weight:bold;}.glossDef{	font-family:Arial;font-size:10pt;color:#000000;padding-left:15px;text-align:justify;}.BodyCopy{	font-family:Arial;font-size:11pt;color:#000000;}.BodyCopySmall{	font-family:Arial;font-size:10pt;color:#000000;text-align:justify;padding-right:10px;}.BodyCopyMain{	padding-left:20px;padding-bottom:15px;text-align:center;padding-right:20px;font-family:Arial;	font-size:11pt;	color:#000000;}.BodyCopyMain p{	padding-left:10px;padding-bottom:15px;text-align:center;padding-right:10px;font-family:Arial;	font-size:11pt;	color:#000000;line-height:15px;}.stateTitle{	font-family:Arial;font-size:18pt;font-weight:bold;color:#009999;padding-bottom:20px;}.bodyPadding{padding-left:10px;padding-right:15px;}.resourceLinks{	font-family:Arial;font-size:13pt;color:#000000;}#pressTable{clear:both;border: solid #000000;width:600px;margin-top:15px;padding:15px;}#sources{margin-top: 15px;}.mainTitle{	font: bold 20px Arial;padding-left: 15px;padding-right: 15px;}.mainHeader{	font-family:Arial, Helvetica, sans-serif;font-size:12pt;font-weight:bold;padding-left: 15px;padding-right: 15px;text-align: justify;padding-top: 20px;padding-bottom: 10px;}.Testimonials{text-align:justify;font-family:Arial, Helvetica, sans-serif;font-size: 9pt;color:#990099;padding-left: 8px;padding-right: 5px;}.TestimonialsPageCopy{text-align:justify;font-family:Arial, Helvetica, sans-serif;font-size: 11pt;color:#990099;padding-left: 8px;padding-right: 10px;margin-bottom: 10px;}.TestimonialsHeading{font-family:Arial, Helvetica, sans-serif;font-size:16pt;font-weight:bold;margin-bottom:10px;color:#990099;}.moreTestimonials{font-family:Arial;	font-size:11pt;	color:#990099;text-align:center;}.bottomLinks{padding-top: 48px;text-align:center;font-family:Arial;font-size: 10px;font-weight: bold;}.bioTitle{font-family:Arial;	font-size:12pt;	color:#000000;}.bio{font-family:Arial;	font-size:11pt;	color:#000000;text-align:justify;padding-top: 10px;padding-right:10px;}.smallBanner{padding-left: 8px;padding-bottom: 15px;}.guestSpeaker{padding-left: 4px;padding-top: 10px;}.consultIntro{font-family:Arial;font-size:11pt;color:#000000;padding-bottom:20px;}#mapSites{padding-left: 8px;font-family: Arial;font-size: 8pt;}#mapCategory{font-family: Arial;font-weight:bold;padding-bottom: 5px;font-size: 11pt;}#Rightsideinfo{margin-top: 15px;}#sponsorBot{text-align:center;}#sponsorRight{border-style:dotted;width:320px;margin-top:4px;margin-left:4px;font-family:Arial;font-size:11pt;color:#000000;font-weight:bold;text-align:center;padding-bottom:5px;}#sponsorRight a{display:block;}#sponsorOpp{padding-top:10px;font-family:Arial;	font-size:7pt;font-weight:bold;color:#000000;}h2{font-family: Arial;	font-weight:bold;font-size: 16pt;}#Banner{padding-left: 3px;padding-bottom: 15px;}#Header{width: 1000px;}#Navbar{width: 1000px;}#Top{width: 591px;background-image: url('main-images/ni_banner_03.jpg');background-repeat: no-repeat;background-attachment:fixed;background-position: top left;}#VideoPlayer{margin-left: 18px;}#VideoArchives{margin-left: 5px;}#Box{width: 669px;float: left;}#Box2{width: 669px;float: left;}#Mainbox{background-image: url('main-images/main_box_middle.jpg');background-repeat: repeat-y;}#Rightbox{width: 331px;float: right;}#Video{background-image: url('main-images/small_box_middle.jpg');background-repeat: repeat-y;}#Testi{background-image: url('main-images/small_box_middle.jpg');background-repeat: repeat-y;}#Footer{	background-image: url('main-images/ni_footer.jpg');background-repeat: no-repeat;height: 125px;clear: both;}#Product{font-family:Arial; font-size:8pt; font-weight:bold; width:240px; text-align:center;}#define {margin:5px 0px 0px 0px;padding-left: 10px;padding-right: 12px;}#pic {background-position: left;padding-left: 10px;}#style1 {font-family: Arial, Helvetica, sans-serif;font-size: 13px;text-align: justify;}#style2 {font-family: Arial, Helvetica, sans-serif;font-weight: bold;color: #660066;font-size: 20px;}/*Links*/a:link {text-decoration: none;}a:visited {text-decoration: none;}a:hover {text-decoration: underline;}a:active {text-decoration: none;}img.radio_picture{float:left;padding-right:10px;padding-bottom:5px;margin-top:11px;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}/*Board of Directors*/.boardTitle{width:630;font-family:arial,helvetica;font-weight:bold;font-size:16pt;border-bottom:2px dotted;margin-bottom:5px;margin-top:12px;}.boardOwnerTitle{font-family:arial,helvetica;font-weight:bold;font-size:13pt;margin-bottom:5px;margin-top:5px;}.boardCopy{font-family:arial,helvetica,sans-serif;font-size:14px;color:#333333;line-height:18px;}

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

The answer is: only float one of the boxes, and only assign a width to the floated box.That is the real way to do floated layouts. If you want to limit the width of the other box, do so by putting both boxes into a fixed width container.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

IE6 rendering div+padding+margins is different (also it adds padding, margin by default), so you have to allow for this. try adjusting the width without the !important until the box fits.#Rightbox{width: 331px !important;width: 325px;float: right;}div {margin:0; padding:0;} with set div margins, padding to 0, * {margin:0; padding:0;} will reset all elements to 0, so you will set these margins for elements such as 'p' paragraphs

Link to comment
Share on other sites
mboehler3 Member

mboehler3

Posted
  • Author
Posted
IE6 rendering div+padding+margins is different (also it adds padding, margin by default), so you have to allow for this. try adjusting the width without the !important until the box fits.#Rightbox{width: 331px !important;width: 325px;float: right;}div {margin:0; padding:0;} with set div margins, padding to 0, * {margin:0; padding:0;} will reset all elements to 0, so you will set these margins for elements such as 'p' paragraphs
I'm a little confused by this... you have 2 different widths for the #Rightbox div. I tried adjusting the width of the Rightbox, while getting rid of the float attribute and it just puts everything below the mainbox. I don't understand- do I have to adjust a margin/padding somewhere? If you look at the page now http://healthnutsradio.com/index2.php it is with the Rightbox width set to 325, and you can see it below the Mainbox.
Link to comment
Share on other sites
mboehler3 Member

mboehler3

Posted
  • Author
Posted
IE6 rendering div+padding+margins is different (also it adds padding, margin by default), so you have to allow for this. try adjusting the width without the !important until the box fits.#Rightbox{width: 331px !important;width: 325px;float: right;}div {margin:0; padding:0;} with set div margins, padding to 0, * {margin:0; padding:0;} will reset all elements to 0, so you will set these margins for elements such as 'p' paragraphs
And I have margin and padding set to 0 in the html, is that where it should be?
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

No, that will only affect "html" margin and padding,*{margin:0; padding:0;} is similar to wildcard and will set all elements to the declarations stated.div {margin:0; padding:0; } will affect the div only.!important is not recognised by IE6, so ignores it while other browsers will carry this declaration out.try setting margin & padding to 0 within #Rightbox.#Rightbox{width: 331px !important; /*other browser will carry out this width*/width: 325px; /*IE6 only will carry out this width setting (this is a guess, adjust until it fits) */margin:0; padding:0;float: right; /*must keep this*/}

Link to comment
Share on other sites
mboehler3 Member

mboehler3

Posted
  • Author
Posted
No, that will only affect "html" margin and padding,*{margin:0; padding:0;} is similar to wildcard and will set all elements to the declarations stated.div {margin:0; padding:0; } will affect the div only.!important is not recognised by IE6, so ignores it while other browsers will carry this declaration out.try setting margin & padding to 0 within #Rightbox.#Rightbox{width: 331px !important; /*other browser will carry out this width*/width: 325px; /*IE6 only will carry out this width setting (this is a guess, adjust until it fits) */margin:0; padding:0;float: right; /*must keep this*/}
I set the Rightbox css to this:
#Rightbox{width: 331px !important;width: 315px; /* for ie6 */margin: 0;padding: 0;float:right;}

And it produced the same result as before, only now the width:325 is starting to remove parts of the right-hand side, indicated with the arrow below:sss34.gif

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

OK! because making the #rightbox, and #box smaller will affect the background image displaying correctly, lets do it from a different angle. reset #Rightbox to:#Rightbox{width: 331px;float: right;}then set below to#Header{width: 1000px !important;width: 1003px;}#Wrapper{width: 1000px !important;width: 1003px;}

Link to comment
Share on other sites
mboehler3 Member

mboehler3

Posted
  • Author
Posted
OK! because making the #rightbox, and #box smaller will affect the background image displaying correctly, lets do it from a different angle. reset #Rightbox to:#Rightbox{width: 331px;float: right;}then set below to#Header{width: 1000px !important;width: 1003px;}#Wrapper{width: 1000px !important;width: 1003px;}
that worked - thank you very much!
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...