Results 1 to 9 of 9

Thread: IE 6.0 Problems

  1. #1
    lazy student nvening's Avatar
    Join Date
    Jan 2005
    Location
    London
    Posts
    4,656
    Thanks
    196
    Thanked
    31 times in 30 posts

    IE 6.0 Problems

    Hi, im working on a new site which you can see here:

    http://www.gkellypieandmash.co.uk/order/index.html

    It validates with css 2.1 and XHTML 1.1 and displays perfectly in IE 7.0, Firefox, Safari and Opera however there are a few niggles with IE 6.0 that i cant figure out, these are easily seen by displaying the page in IE 6.0

    The problems are the small gap on the left of the right box, the borders sticking out over the corners at the bottom of the right box and the gap underneath the image on the banner/header.

    If anyone can help solve these problems i would be very grateful

    Heres the applicable code (needs a bit of tidying/ moving to style sheet but its valid):

    XHTML:

    Code:
    <!DOCTYPE
     html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="Content-Language" content="EN-GB"/>
    <meta name="Description" content="Home page of Cubic Computers"/>
    <meta name="Keywords" content="cubic, computers, custom, pcs, pc, laptops, desktops, websites"/>
    
    <title>Gkelly Order - Meat Pie</title>
    
    <link rel="stylesheet" type="text/css" href="styles/layout.css"/>
    <link rel="stylesheet" type="text/css" href="styles/text.css"/>
    
    </head>
    
    <body>
    
    <!-- Left Nav -->
    <div id="left">
    <div class="top-left"></div>
    <div class="top-right" style=" margin-right: -23px;" ></div>
    <div class="inside">
    <div class="gap-saver-beta"></div>
    <h2>Categories</h2>
    <div style="margin-left: 10px;">
    <a class="nav" href="http://www.order.gkellypieandmash.co.uk/pies.htm" >Meat Pies</a>
    <br/><a class="nav" href="http://www.order.gkellypieandmash.co.uk/meal.htm" >Vegitarian Pies</a>
    <br/><a class="nav" href="http://www.order.gkellypieandmash.co.uk/pay.htm" >Fruit Pies</a>
    <br/><a class="nav" href="http://www.order.gkellypieandmash.co.uk/del.htm" >Mash</a>
    <br/><a class="nav" href="http://www.order.gkellypieandmash.co.uk/sup.htm" >Liquor</a>
    <br/><a class="nav" href="http://www.order.gkellypieandmash.co.uk/sup.htm" >Meals</a>
    <br/><a class="nav" href="http://www.order.gkellypieandmash.co.uk/sup.htm" >Vinegar</a>
    </div>
    
    <h2>Site Links</h2>
    
    <div style="margin-left: 10px;">
    <a class="nav" href="http://www.gkellypieandmash.co.uk/index.htm">Home</a>
    <br/><a class="nav" href="http://www.gkellypieandmash.co.uk/about.htm">About</a>
    <br/><a class="nav" href="http://www.order.gkellypieandmash.co.uk/index.htm">Order</a>
    <br/><a class="nav" href="http://www.gkellypieandmash.co.uk/functions.htm">Functions</a>
    <br/><a class="nav" href="http://www.gkellypieandmash.co.uk/roman.htm">Down The Roman</a>
    <br/><a class="nav" href="http://www.gkellypieandmash.co.uk/history.htm">History</a>
    <br/><a class="nav" href="http://www.gkellypieandmash.co.uk/shops.htm">Shops</a>
    <br/><a class="nav" href="http://www.gkellypieandmash.co.uk/contact.htm">Contact</a>
    </div>
    
    
    
    <div class="gap-saver-beta"></div>
    </div>
    
    <div class="bottom-left"></div>
    <div class="bottom-right" style=" margin-right: -23px;"></div>
    
    </div>
    <!-- Left Box End -->
    
    <!-- Right Column -->
    <div id="right">
    
    <!-- Item Box -->
    <div class="top-left" style="margin-left: 15px;"></div>
    <div class="top-right"></div>
    
    <div class="inside-right">
    <div class="gap-saver-beta"></div>
    <div style=" word-spacing: 10px; text-align: left; width: 200px; height: 40px; float: right;">
    <a class="tr" href="">Payment</a>
    <a class="tr" href="">Delivery</a>
    <a class="tr" href="">Contact</a>
    <br/><img style=" margin-top: -20px;" src="img/rule.png" alt="Line" class="rule" height="1" width="210"/>
    </div>
    <img style=" margin-top: 10px; width: 150px;" alt="Gkelly Logo" src="img/logo.gif"/>
    <br/>
    
    <div style=" margin-bottom: 30px; width: 100&#37;; float: left; margin-top: 10px; height: 68px; border-bottom: 1px solid #C00000; border-top: 1px solid #C00000;">
    <img src="img/bancorn.gif" alt="Banner Curved Cornders" style=" margin-right: 100px; position: relative; bottom: 1px; float: left;"/>
    
    <img style="margin-bottom: 0px; position: relative; bottom: 1px; float: right;" alt="Pies Image" src="img/tright.gif"/>
    <h3 style=" margin-top: 20px; padding-bottom: 0px;">Premium British Beef Pies</h3>
    </div>
    
    
    
    <!-- Item Box End -->
    
    <!-- Description Box -->
    
    <img style=" float: left; margin-right:10px; " src="img/meal.gif" alt="Product Image"/>
    
    <h3 style="font-size: 18px; " >Premium British Minced Beef Pie</h3>
    <p>
    &pound;2.50
    </p>
    <p>
    Next Day delivery only
    </p>
    <br/>
    
    
    <br/>
    <div style=" margin-top: 100px;">
    
    <h3 style="font-size: 16px;" >Product description</h3>
    Our hand-made pies are produced using only fresh ingredients. They are prepared with our own pastry giving each pie its characteristic crispy top and softer base. 
    <p>
    Our pastry contains no hydrogenated fats. They are filled with fresh, (not frozen) good quality, traceable British beef. We use no artificial flavourings - just a little added seasoning. 
    </p>
    <p>
    Made here in our own bakery and baked each day and throughout the day ensuring quality and freshness.
    </p>
    
    </div>
    
    <!-- Description Box End-->
    
    <!-- Right Column End-->
    
    <!--Bottom nav bar-->
    <div id="bnav">
    <img style=" margin: auto; display: block;" src="img/rule.png" alt="Line" class="rule" height="1" width="740"/>
    <br/>
    <a class="navb" href="http://www.gkellypieandmash.co.uk/index.htm">Home</a> |
    <a class="navb" href="http://www.gkellypieandmash.co.uk/about.htm">About</a> |
    <a class="navb" href="http://www.order.gkellypieandmash.co.uk/index.htm">Order</a> |
    <a class="navb" href="http://www.gkellypieandmash.co.uk/functions.htm">Functions</a> |
    <a class="navb" href="http://www.gkellypieandmash.co.uk/roman.htm">Down The Roman</a> |
    <a class="navb" href="http://www.gkellypieandmash.co.uk/history.htm">History</a> |
    <a class="navb" href="http://www.gkellypieandmash.co.uk/shops.htm">Shops</a> |
    <a class="navb" href="http://www.gkellypieandmash.co.uk/contact.htm">Contact</a>  ||
    
      &#169; 2007 Gkelly Pie and Mash   || 
    <a class="navb" href="http://www.cubic3.co.uk">Cubic³ Site</a>
    </div>
    
    
    
    <!--Bottom nav bar end-->
    
    <div class="gap-saver-beta"></div>
    </div>
    
    <div class="bottom-left"></div>
    <div class="bottom-right"></div>
    </div>
    </body>
    
    </html>
    Last edited by nvening; 15-07-2007 at 09:08 PM.
    (\__/)
    (='.'=)
    (")_(")

  2. #2
    lazy student nvening's Avatar
    Join Date
    Jan 2005
    Location
    London
    Posts
    4,656
    Thanks
    196
    Thanked
    31 times in 30 posts

    CSS Style Sheet

    Code:
    /* Body Tag */
    body
    {
    	background-color: white;
    	margin: 0px;
    	margin-top: 15px;
    	padding: 0px;
    	width: 100%;
    	background-image: url(http://img527.imageshack.us/img527/2792/back1gj6.gif);
    	background-repeat: repeat-x;
    	padding-bottom: 15px;
    }
    /* Body Tag End */
    
    .top-left {
    margin-left: 15px;
    margin-right: 20px; /* clip right corner */
    background-image: url('img/corners1280x18.gif');
    height: 9px; /* vertical: show first half of the image with the top-corners in it */
    font-size: 2px; /* correct height for IE */
    }
    
    .top-right {
    margin-right: 15px;
    margin-top: -9px; /* to level of top-left corner */
    margin-left: 20px; /* clip left corner */
    background-image: url('img/corners1280x18.gif'); 
    background-position: 100% 0; /* show bg-image starting at the right */
    height: 9px; 
    font-size: 2px;
    }
    
    .bottom-left {
    margin-left: 15px;
    margin-right: 20px; /* clip right corner */
    background-image: url('img/corners1280x18.gif');
    background-position: 0 -9px; /* show under half of the image */
    height: 9px;
    font-size: 2px;
    }
    
    .bottom-right {
    margin-right: 15px;
    margin-top: -9px; /* to level of bottom-left corner */
    margin-left: 20px; /* clip left corner */
    background-image: url('img/corners1280x18.gif'); 
    background-position: 100% 9px; /* under half, right side */
    height: 9px; 
    font-size: 2px; 
    }
    
    .gap-saver-beta {
         height: 1px; 
         margin: 0 0 -1px 0;
         padding: 0;
         font-size: 2px; /* to correct IE */
         }
    
    .inside {
    margin-left: 15px;
    width: 156px;
    border-left: 1px solid #C00000;
    border-right: 1px solid #C00000;
    background: white;
    color: #000000;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    height: 1000px;
    }
    
    .inside-right {
    margin-left: 15px;
    border-left: 1px solid #C00000;
    border-right: 1px solid #C00000;
    background: white;
    color: #000000;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 15px; 
    margin-bottom: 0px;
    }
    
    
    .top-left2 {
    
    background-image: url(http://home.tiscali.nl/developerscorner/liquidcorners/images/corner-topleft1280x9.gif);
    height: 9px;
    width: 90%;
    font-size: 2px;
    border-top: 0px;
    float: left;
    }
    
    
    /* Top Header */
    #top
    {
    	font-size: 40px; 
    	height: 155px; 
    	background-image: url(http://aycu17.webshots.com/image/16016/2002862232513674238_rs.jpg); 
    	background-repeat:repeat-x;
    	overflow: auto;
    }
    /* Top Header End */
    
    /* Top Nav */
    #onav
    {
    	color: white;
    	position: relative;
    	bottom: 21px;
    	width: 720px;
    	margin: auto;
    	font-size: 15px;
    	overflow: auto;
    }
    /* Top Nav End*/
    
    /* Left Column */
    #left
    {
    	width: 170px; 
    	float: left; 
    	background-color: transparent;
    }
    /* Left Column End */
    
    
    /* Site Links */
    #site
    {
    	background-image: url(http://aycu17.webshots.com/image/18176/2000801689569397308_rs.jpg); 
    	background-repeat:repeat-x; 
    	width: 148px; 
    	height: 248px; 
    	background-color: white; 
    	padding: 10px; 
    	padding-top: 0px; 
    	border: black solid 1px;
    }
    /* Site Links End */
    
    /* Right Column */
    #right
    {
    	margin-left: 193px; 
    	background-color: transparent;
    	font-family: sans-serif, arial;
    	font-size: 14px;
    }
    /* Right Column End */
    
    /* Item Box */
    #item
    {
    	background-image: url(http://aycu17.webshots.com/image/18176/2000801689569397308_rs.jpg); 
    	background-repeat: repeat-x; 
    	padding: 20px; 
    	margin-top: 20px; 
    	margin-right: 20px; 
    	margin-left: 10px; 
    	font-size: 20px; 
    	background-color: white; 
    	border: 1px solid black; 
    	padding-top: 0px;
    	overflow: auto;
    }
    /* Item Box End */
    
    
    /* Bottom Nav */
    #bnav
    {
    	margin:20px auto 0 auto; 
    	padding: 5px; 
    	color: #cccccc;
    	text-align: center; 
    	font-family: arial; 
    	font-size: x-small; 
    	background-color:inherit; 
    	width: 720px;
    }
    /* Bottom Nav End */
    Thanks!!
    (\__/)
    (='.'=)
    (")_(")

  3. #3
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Don't have the time right now to have a look over the whole thing, but I have just noticed you're using XHTML 1.1 - that means you're not supposed to send the document as text/html. You can, however, send XHTML 1.0 as text/html.

    http://www.w3.org/MarkUp/2004/xhtml-faq#mime11
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  4. #4
    lazy student nvening's Avatar
    Join Date
    Jan 2005
    Location
    London
    Posts
    4,656
    Thanks
    196
    Thanked
    31 times in 30 posts
    erm, right?

    should i just change the doc type to 1.0 - im not quite sure of the difference

    Ill try and do some research, thanks.
    (\__/)
    (='.'=)
    (")_(")

  5. #5
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    You can read all about it here: http://www.w3.org/TR/xhtml-media-types/

    Basically, XHTML is XML, therefore it should be sent as such. However, in order to accommodate older browsers, you can send the first version of XHTML i.e. XHTML 1.0 (Strict or otherwise) as text/html. Any following versions, such as XHTML 1.1, should be treated as XML, and therefore should not be sent as text/html.
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  6. #6
    Large Member
    Join Date
    Apr 2004
    Posts
    3,720
    Thanks
    47
    Thanked
    99 times in 64 posts
    Officials specs suggest that xhtml 1.1 SHOULD be served as application/xml. XHTML 2.0 in it's current state defines you must do so.
    To err is human. To really foul things up ... you need a computer.

  7. #7
    lazy student nvening's Avatar
    Join Date
    Jan 2005
    Location
    London
    Posts
    4,656
    Thanks
    196
    Thanked
    31 times in 30 posts
    ok, back to the ie problem, ie 6 seems to be adding a 3px(ish) margin to the top and bottom divs (which create the top and bottom corners/line) for no reason as far as i can tell, no other browser has these problems.

    Any ideas how to fix this??
    (\__/)
    (='.'=)
    (")_(")

  8. #8
    Large Member
    Join Date
    Apr 2004
    Posts
    3,720
    Thanks
    47
    Thanked
    99 times in 64 posts
    Your link is wrong in your first post.

    First place i'd look is inheritance from other block-level elements. Set their paddings/margins to zero and see how that gets you. IE6.0 will crazily inherit paddings and margins seemingly arbritrarily (there are patterns, but i'd search google for those).
    To err is human. To really foul things up ... you need a computer.

  9. #9
    lazy student nvening's Avatar
    Join Date
    Jan 2005
    Location
    London
    Posts
    4,656
    Thanks
    196
    Thanked
    31 times in 30 posts
    Ok, thats fixed now (i had changed the file structure) and ill start trying that thanks.

    Also im a bit confused with this xhtml/xml bussiness

    I thought xml was different to xhtml, xhtml being simply to clean up html??

    What does it mean by delivering as xml??

    thanks!!
    (\__/)
    (='.'=)
    (")_(")

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Couple of hardware problems
    By Ruggerbugger in forum Help! Quick Relief From Tech Headaches
    Replies: 2
    Last Post: 10-05-2006, 08:11 PM
  2. Problems with new machine
    By kasavien in forum SCAN.care@HEXUS
    Replies: 5
    Last Post: 31-01-2006, 01:48 PM
  3. Epox 8RDA+ Problems
    By M@dOc in forum PC Hardware and Components
    Replies: 20
    Last Post: 17-07-2004, 03:55 AM
  4. Troubleshooting - Software & Driver problems
    By Steve in forum Help! Quick Relief From Tech Headaches
    Replies: 0
    Last Post: 09-07-2004, 06:30 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •