Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 02-15-2008, 05:28 PM
andypandy53's Avatar
andypandy53 andypandy53 is offline
Junior Member
 
Join Date: 02-15-08
Location: Oregon
Posts: 2
iTrader: 0 / 0%
Unhappy CSS negative margin IE trouble

I am using negative left margins and padding to position a main container in the center of the page. It works great on about 1/2 of my pages. On the others, especially those with images, the content of the container is skewed the left as if the padding is not bumping it over correctly. This only seems to be happening in IE6.
Here is the site:
http://www.ptgshop.com
Here is one of the pages that is doing it:
http://www.ptgshop.com/parts.htm

I've been pulling my hair out for a week trying to see where I, my code, or IE went wrong.

Any help/ideas would be greatly appreciated. Thanks.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 02-18-2008, 03:24 AM
Boogle's Avatar
Boogle Boogle is offline
Contributing Member
 
Join Date: 09-03-07
Location: England
Posts: 649
iTrader: 0 / 0%
Can yuo display the code please? Why are you using negative margins to center a container?

margin: 0 auto; //this centers things?

Boog's
 
Reply With Quote
  #3  
Old 02-18-2008, 09:08 PM
andypandy53's Avatar
andypandy53 andypandy53 is offline
Junior Member
 
Join Date: 02-15-08
Location: Oregon
Posts: 2
iTrader: 0 / 0%
Thank you

Thank you. It definetly seems to have done the trick. Funny how you try to do something fancy that backfires when simple works better -- I can't believe I overlooked this, time to get my eyes checked and my head examined!

In case you are curious (the code before your suggestion):
css:
Code:
html { height: 100%; } * html #main { height: 100%; } body { font-size: 11px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; margin: 0px; padding-left:50%; background: url(images/bg1.gif) center repeat-y; height: 100%; } #container { width: 780px; margin-left: -392px; min-height: 100%; height: auto !important; height: 100%; position: relative; } #topheader { background-color: #000000; height: 88px; margin-top: 0px; } #title { font-size: 24px; color: #fff; font-family: verdana; margin: 5px; } #main { padding:14px; width: 752px; text-align:justify; color:#003300; line-height: 1.6em; font-weight: bold; position: relative; min-height: 100%; padding-bottom:25px; } #main2 { padding:14px; width: 751px; text-align:justify; color:#003300; line-height: 1.6em; font-weight: bold; } #submenu { background-color: #FFCC00; text-align: center; margin-top: 0px; font-size : 14px; font-weight: 600; border: 0px solid #000000; padding: 4px; } #submenu2 { background-color: #FFCC00; text-align: center; margin-top: 0px; font-size : 16px; font-weight: 600; border: 0px solid #000000; padding: 4px; } h1 { font-size:20px; font-weight:bold; padding-top: 5px; } h4{ text-decoration: underline; } .headertext1 { font-size:12px; font-weight:bold; } .headertext2 { font-size:10px; font-weight:bold; } #footer { background-color: #000000; color: #ffffff; text-align:center; border: 2px solid #000000; height: 25px; padding-top:5px; width: 777px; } img { border: 0px solid #fff; } #menu { text-align: center; margin-top: 0px; font-size : 16px; font-weight: 600; border: 4px solid #000000; background: #000000; } #bottomnav{ text-align:center; padding: 14px; } #submenu a { color : #ffffff; text-decoration : none; padding: 8px; } #submenu a:hover { color : #000000; } #submenu2 a { color : #ffffff; text-decoration : none; padding: 4px; } #submenu2 a:hover { color : #000000; } #menu a { color : #ffffff; text-decoration : none; padding: 10px; } #menu a:hover { color : #FFCC00; } #menu .current { color : #FFCC00; } #submenu .current { color: #000000; } #comment{ width: auto; vertical-align: middle; color: Gray; } /* Container for the pic thumbnails */ .picboxouter { width: auto; padding: 0px 6px 0px 5px; clear:both; } /* Content holder for the pic box */ .picbox { width: auto; line-height: 22px; color: #DD7CB4; padding: 5px 6px 6px 6px; border:0px solid #efefef; border-top: none; text-align: center; } /* This controls the thumbnails in the picbox div */ .pickboxcontrol { border: 1px #DDD solid; vertical-align: middle; } #easyscrollbox{ width: 500px; height: 185px; overflow-x: scroll; overflow-y: hidden; white-space : nowrap; } #email a{ color : blue; text-decoration : underline; } #email a:active{ color : blue; text-decoration : underline; } a {color : #FFAA00; text-decoration : underline;} a:hover {text-decoration: underline; color:#000000;} td.thumbcell { width: 100px; border-style: solid; border-color: #D7D7D7; border-width: 1px; text-align: center; vertical-align: middle; padding: 10px; } td.thumbcell img { border-style: none; }
html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Welcome To Pacific Tool and Gauge Inc.</title> <link rel="stylesheet" href="style5.css" type="text/css" /> </head> <body> <!-- Master Container: Centered and 700px wide --> <div id="container"> <!-- Site Top Header --> <div id="topheader"> <img src="images/header.gif" /> <span id="title"></span> </div> <!-- Site navigation buttons --> <div id="menu"> <a href="index.htm">Home</a> <a href="#">News</a> <a href="products.htm" class="current">Products & Services</a> <a href="glossary.htm">Glossary</a> <a href="downloads.htm">Downloads</a> <a href="contact.htm">Contact</a> <a href="http://store.ptgshop.com" target="_blank">Store</a> </div> <!-- End of Site Navigation Buttons --> <!-- Main content container --> <div id="submenu"> <a href="reamers.htm">Reamers</a> <a href="gauges.htm">Gauges</a> <a href="bushings.htm">Bushings</a> <a href="parts.htm" class="current">Machined Parts</a> <a href="regrinding.htm">Regrinding</a> <a href="tools.htm">Tools</a> <a href="books.htm">Books</a> <a href="gallery.htm">Photo Gallery</a> </div> <div id="main"> <img src="images/gallery/conten1.jpg" style="float: right; padding: 16px;" /> <p>Pacific Tool and Gauge has a very extensive CNC Machine Shop. We have many CNC Lathes, Mills and Grinders. We also have a huge inventory of tools for a complete Job Shop that utilizes our manual machines. If you fly in it, ride on it, shoot it or drive it, there is a good chance Pacific Tool and Gauge either machined parts for it or ground the reamers to machine it. We manufacture many parts you buy everyday from other companies. Many brand name retailers use us exclusively for their machining needs. If you have a need with your production runs or that small part ..... give us a call.</p> <h5>JOB SHOP RATE: $45.00/HR CNC SHOP RATE: $60.00/HR</h5> <h5>FORM TOOLS CARBIDE: $60.00/HR FORM TOOLS HSS: $47.50/HR </h5> </div> <div id="bottomnav"><a href="index.htm">Home</a> | <a href="#">News</a> |<a href="products.htm">Products & Services</a> | <a href="glossary.htm">Glossary</a> | <a href="downloads.htm">Downloads</a> | <a href="contact.htm">Contact</a> | <a href="http://store.ptgshop.com" target="_blank">Store</a> </div> <!-- Footer --> <div id="footer"> &copy; Copyright 2008 -- Pacific Tool and Gauge Inc. <br /> PO BOX 2549 - 598 Ave C * White City, Oregon 97503 * 1-541-826-5808 FAX: 541-826-5304 </div> <!-- End of footer --> </div> <!-- End of master container --> </body> </html>
Site updated with your fix:http://www.ptgshop.com

Still a work in progress but much better now.
Thanks again!

--Andrew
 
Reply With Quote
  #4  
Old 02-19-2008, 01:01 AM
Boogle's Avatar
Boogle Boogle is offline
Contributing Member
 
Join Date: 09-03-07
Location: England
Posts: 649
iTrader: 0 / 0%
Man that's mega complicated CSS for such little HTML mark-up! Nevermind though, learning the hard way is sometimes the best, you will understand bits of CSS much better than some people now!

Keep it up man
Boog's
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Padding/Margin problem devilzfan300 Coding Forum 2 01-16-2008 06:17 PM
css column margin trouble I like pie Coding Forum 7 07-14-2007 09:42 PM
Profit Margin SN3 Webmaster Revenue 10 09-10-2006 08:01 PM
??????? must be a margin or something lajkonik86 Web Design Lobby 2 10-22-2004 10:08 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 11:47 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC