Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Registered User
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS IE FF issues

    Hi,

    I am trying to align images within a rounded corner box however when I have it sitting slighlty ok in Firefox it is way off in IE and vice versa...Can anyone tell me where I am going wrong?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    	<title>Paws n Whiskers - Dog and Cat Products Online - Free Delivery to selected parts of Northern Ireland - Delivering as normal throughout the UK.</title>
    	<meta http-equiv="Content-Language" content="en-us" />
    
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="MSSmartTagsPreventParsing" content="true" />
    
    	<meta name="description" content="pawsnwhiskers.co.uk provides cat and dog products to both Northern Ireland and the uk.  Delivery is free to certain parts of Northern Ireland. Check out our pet friendly site for the latest cat supplies,cat toys, collars, health and hygiene, as well as top quality and best priced dog beds, dog products,dog products,dog toys and other competively priced items which are suitable for all your four legged babys. Catering for puppies and kittens also." />
    	<meta name="keywords" content="Dog bowls, cat feeding bowls, bowls, cat bowls, dog beds, cat beds, pet beds, dog feeding bowls, cat beds uk,cat products,cat supplies northern ireland,cat toys,collars,dog beds uk, dog products, dog products Northern Ireland,dog supplies northern ireland,dog toys,northern ireland,northern ireland pets,pet supplies,puppies, kittens" />
    
    	<meta name="David Scott" content="Paws n Whiskers" />
    
    	<style type="text/css" media="all">@import "css/test1.css";</style>
    	</head>
    
    <body>
    <div id="page-container">
    <div id="main-nav"><img src="images/pwlogo1_r1_c1.gif" alt="www.pawsnwhiskers.co.uk" width="340" height="56" border="0" /></div>
    
    	<div id="main">
        <ul class="tabs">
    <li class="selected">
    <h3 class="tab-label">Home</h3></li>
    <li><h3 class="tab-label"><a href="example2.html">Cat Products</a></h3></li>
    <li><h3 class="tab-label"><a href="example3.html">Dog Products</a></h3></li>
    <li><h3 class="tab-label"><a href="example4.html">Distributors</a></h3></li>
    </ul>
    <p>Tab 1 content: A click on one of these tabs loads a new page.</p></div>
    	<div id="sidebar-a"><div class="box1">
    <h2><img src="images/rogz logo_r1_c1.gif" alt="World famous Rogz for Dogs Products" />
    <br /><img src="../pawsnwhiskers/images/kong.gif" alt="Kong Dog Toys" />
    <br /><img src="images/camonlogo_r1_c1.gif" alt="Camon, Fashionable suppliers of dog products and cat products." />
    <br /><img src="images/air kong logo_r2_c1.gif" alt="Air Kong, providers of leading dog toys." /></h2>
    <p class="last1"></p>
    </div>
    </div>
    <div id="content"><img src="images/main dog pic_r1_c11.gif" width="584" height="280" border="0" alt="Dog Products." />
    <div class="box2">
    <h2><img src="images/special offers Dogs_clearquestpads.gif" alt="Clearquest Puppy Pads" />
    <img src="images/special offers Dogs_durapet.gif" alt="Stainless Steel durapet feeding bowl" />
    <img src="images/special offers Dogs_toys.gif" alt="Popular Giggles Zanies Dog Toys" />
    <img src="images/special offers Dogs_camon.gif" alt="Camon luxurious Dog and Cat beds. Available in both blue and pink." />
    <img src="images/reflective vests_r1_c1.gif" alt="Reflective vests for puppies and adult dogs" />
    <img src="images/mountain range lead_r1_c1.gif" alt="Rogz Mountain Range Dog Lead" /></h2>
    <p class="last2"></p>
    </div>
    <div class="box4">
    <h2>
    <img id="img2" src="images/pupzpinkcollar.gif" alt="Dog Collars, Leads and Harnesses" />
    <img id="img3" src="images/waterproofdoged.gif" alt="Dog Bowls and Dog Bedding" />
    <img id="img4" src="images/retrorex.gif" alt="Rogz Dog Toy Retro Rex" />
    <img id="img5" src="images/mungojerry.gif" alt="Rogz Dog Toy Mungo Jerry" />
    <img id="img6" src="images/groomingpic.gif" alt="Dog grooming and dog hygiene dog products" />
    <img id="img1" src="images/grassdoggie.gif" alt="Puppy playing with toy on the grass" /></h2>
    <p class="last4"></p>
    </div>
    </div>
    <div id="sidebar-b">
    <div class="box">
    <h2><ul class="list1"><li><h3 class="listoption">Home</h3></li>
    <li><p><h3>Cat Products</h3></p></li>
    <li><h5>Collars</h5></li>
    <li><h5>Bowls/Bedding</h5></li>
    <li><h5>Toys/Scratching Posts</h5></li>
    <li><h5>Grooming/Hygiene</h5></li>
    <li><p><h3>Dog Products</h3></p></li>
    <li><h5>Collars/Leads/Harnesses</h5></li>
    <li><h5>Bowls/Bedding</h5></li>
    <li><h5>Toys/Treats</h5></li>
    <li><h5>Grooming/Hygiene</h5></li>
    <li><p><h3>Distributors</h3></p></li></ul></h2>
    <p class="last"></p>
    </div>
    <div class="box3">
    <h2><ul class="list2"><li><h4>Terms and Conditions</h4></li>
    <li><h4>Delivery</h4></li>
    <li><h4>Returns Policy</h4></li>
    <li><h4>About Us</h4></li></ul></h2>
    <p class="last3"></p>
    </div>
    </div>
    <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    Code:
    .hidden {
    	display: none;}
    html, body {
    	margin: 0;
    	padding: 0;}
    #page-container {
    width: 978px;
    margin: auto;}
    #main-nav {
    	height: 56px;
    	margin-bottom: 5px;}
    #main { border:none; border-top:none; background: url(../images/ackground_r2_c3.gif)repeat-x; height:64px; }
    #footer {
    clear:both;
    	height: 66px;
    	background:black;}
    #sidebar-a {
    float: right;
    width: 189px;}
    #sidebar-a h2{
      padding-top:60px;}
    #sidebar-a h2 p{
      margin:0;
      padding:0;
      padding-top:10px;}
    #content {
    float: right;
    margin-right: 8px;
    margin-top: 20px;}
    #sidebar-b {
    float: left;
    width: 189px;}
    h2 ul {
    margin: 0;
    padding: 0;
    padding-top: 50px;
    font-size: medium;
    list-style-type: none;
    line-height:1.5;}
    li h3 {
      margin:0;
      Padding:0;
      color: #000000;}
    li h5{
      margin: 0;
      padding:0;
      line-height: 1.5;
      color: #CC0000;}
    li h4{
      margin:0;
      padding:0;
      font-weight: bolder;}
    .box {
    width: 189px;
    background: url(../images/sidetile.gif) repeat-y;}
    .box h2 {
    background: url(../images/categories-top.gif) no-repeat left top;
    padding-top: 20px;
    padding-bottom: 0;}
    .box .last {
    background: url(../images/categories-ottom.gif) no-repeat left bottom;
    padding-bottom: 8px;}
    .box h2, .box p {
    padding-left: 10px;
    padding-right: 20px;}
    .box1{
    width: 189px;
    background: url(../images/sidetile.gif) repeat-y;
    background-position: right;}
    .box1 h2{
    background: url(../images/brands-top.gif) no-repeat right top;
    padding-top: 20px;
    padding-bottom: 15px;}
    .box1 .last1{
    background: url(../images/categories-ottom.gif) no-repeat right bottom;
    padding-bottom: 20px;}
    .box1 h2, .box1 p {
    padding-left: 20px;
    padding-right: 20px;}
    .box2 {
    width: 583px;
    background: url(../images/specialoffers-sidetile.gif) repeat-y;}
    .box2 h2 {
    background: url(../images/specialoffers-top.gif) no-repeat left top;
    padding-top: 60px;
    padding-bottom: 15px;}
    .box2 .last2 {
    background: url(../images/specialoffers-ottom.gif) no-repeat left bottom;
    padding-bottom: 20px;}
    .box2 h2, .box2 p {
    padding-left: 20px;}
    .box3 {
    width: 189px;
    background: url(../images/extranav-sidetile.gif) repeat-y;}
    .box3 h2 {
    background: url(../images/extranav-top.gif) no-repeat left top;}
    .box3 .last3 {
    background: url(../images/extranav-ottom.gif) no-repeat left bottom;
    padding-top:10px;}
    .box3 h2, .box3 p {
    padding-left: 20px;
    padding-right: 20px;}
    .box4 {
    width: 584px;
    background: url(../images/dogproduct-sidetile.gif) repeat-y;}
    .box4 h2 {
    background: url(../images/dogproduct-top.gif) no-repeat left top;
    padding-bottom: 40px;
    padding-top: 30px;}
    .box4 .last4 {
    background: url(../images/dogproduct-ottom.gif) no-repeat left bottom;
    padding-bottom: 40px;}
    .box4 h2, .box4 p {
    padding-left: 10px;
    padding-right: 10px;}
    #img1 {
    padding-left: 170px; position: relative;}
    #img2{
    float:left; padding-top: 40px;}
    #img3{
    float:right; margin-left:270px; padding-top: 40px;}
    #img4{
      float:left; padding-top: 60px;}
    #img5{
    float:left; padding-top: 60px;}
    #img6{
    float:right;padding-top:60px;}
    ul.tabs a:link, ul.tabs a:visited, ul.tabs a:active
    { text-decoration:none; color: #FFFF33  ; }
    ul.tabs a:hover, ul.tabs a:focus
    { text-decoration:underline; color: #FFFFFF; }
    ul.tabs a { display:block; }
    ul.tabs { float:left; width:100%; padding:0; margin:0;
    border-bottom:1px solid black; margin-bottom:10px; }
    ul.tabs li { float:left; width:25%; list-style-type:none; }
    ul.tabs *.tab-label { border: none; margin:0; cursor:pointer;
    padding-bottom:2px; padding-top:2px;
    background: #EEEEEE url(../images/ackground.gif);
    font-weight:normal; text-align:center; font-size:1.1em; }
    ul.tabs li.selected *.tab-label { position:relative; border-bottom:none;
    top:1px; padding-bottom:4px; cursor:auto;
    padding-top:5px; border-top:none; margin-top:-5px;
    background: url(../images/ackground_r2_c2.gif); font-weight:bold; text-decoration:none; color: #000000;
    Thanks
    Last edited by boratspider; 01-08-2010 at 05:42 PM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    A link to a test page would be of great help, as we can not see how those pictures are not aligned.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Can we have a link to your page, as we don't have those images included?
    Edit: Oh Kor, you beat me!
    Last edited by abduraooft; 01-08-2010 at 03:21 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    As an aside, I would not worry about rounded corners in IE, unless you have to, and just use the CSS border-radius property for the modern browsers and let inept browsers like IE get what they get.

  • #5
    Registered User
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Admin note: Links removed per OP request.

    Thanks.

    It's going to be an online shop so I require it to work in IE as most visitors still use it.
    Last edited by WA; 04-19-2010 at 08:57 PM.

  • #6
    Registered User
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    is there anyway to edit my above posts?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello boraspider,
    If you re-arrange your markup a little so you 3 column layout follows this example then getting it to lay right is just a matter of changing some CSS.
    Try your markup ordered like this -
    Code:
    <div id="page-container">
    <div id="main-nav"><img src="images/pwlogo1_r1_c1.gif" alt="www.pawsnwhiskers.co.uk" width="340" border="0" height="56"></div>
    
    	<div id="main">
        <ul class="tabs">
    <li class="selected">
    <h3 class="tab-label">Home</h3></li>
    <li><h3 class="tab-label"><a href="example2.html">Cat Products</a></h3></li>
    <li><h3 class="tab-label"><a href="example3.html">Dog Products</a></h3></li>
    <li><h3 class="tab-label"><a href="example4.html">Distributors</a></h3></li>
    </ul>
    <p>Tab 1 content: A click on one of these tabs loads a new page.</p></div>
    	<div id="sidebar-a"><div class="box1">
    <h2><img src="images/rogz%20logo_r1_c1.gif" alt="World famous Rogz for Dogs Products">
    <br><img src="../pawsnwhiskers/images/kong.gif" alt="Kong Dog Toys">
    <br><img src="images/camonlogo_r1_c1.gif" alt="Camon, Fashionable suppliers of dog products and cat products.">
    <br><img src="images/air%20kong%20logo_r2_c1.gif" alt="Air Kong, providers of leading dog toys."></h2>
    <p class="last1"></p>
    </div>
    </div>
    
    <div id="sidebar-b">
    <div class="box">
    <h2><ul class="list1"><li><h3 class="listoption">Home</h3></li>
    <li><p></p><h3>Cat Products</h3></li>
    <li><h5>Collars</h5></li>
    <li><h5>Bowls/Bedding</h5></li>
    <li><h5>Toys/Scratching Posts</h5></li>
    <li><h5>Grooming/Hygiene</h5></li>
    <li><p></p><h3>Dog Products</h3></li>
    <li><h5>Collars/Leads/Harnesses</h5></li>
    <li><h5>Bowls/Bedding</h5></li>
    <li><h5>Toys/Treats</h5></li>
    <li><h5>Grooming/Hygiene</h5></li>
    <li><p></p><h3>Distributors</h3></li></ul></h2>
    <p class="last"></p>
    </div>
    <div class="box3">
    <h2><ul class="list2"><li><h4>Terms and Conditions</h4></li>
    <li><h4>Delivery</h4></li>
    <li><h4>Returns Policy</h4></li>
    <li><h4>About Us</h4></li></ul></h2>
    <p class="last3"></p>
    </div>
    </div>
    
    <div id="content"><img src="images/main%20dog%20pic_r1_c11.gif" alt="Dog Products." width="584" border="0" height="280">
    <div class="box2">
    <h2><img src="images/special%20offers%20Dogs_clearquestpads.gif" alt="Clearquest Puppy Pads">
    <img src="images/special%20offers%20Dogs_durapet.gif" alt="Stainless Steel durapet feeding bowl">
    <img src="images/special%20offers%20Dogs_toys.gif" alt="Popular Giggles Zanies Dog Toys">
    <img src="images/special%20offers%20Dogs_camon.gif" alt="Camon luxurious Dog and Cat beds. Available in both blue and pink.">
    <img src="images/reflective%20vests_r1_c1.gif" alt="Reflective vests for puppies and adult dogs">
    <img src="images/mountain%20range%20lead_r1_c1.gif" alt="Rogz Mountain Range Dog Lead"></h2>
    <p class="last2"></p>
    </div>
    <div class="box4">
    <h2>
    <img id="img2" src="images/pupzpinkcollar.gif" alt="Dog Collars, Leads and Harnesses">
    <img id="img3" src="images/waterproofdoged.gif" alt="Dog Bowls and Dog Bedding">
    <img id="img4" src="images/retrorex.gif" alt="Rogz Dog Toy Retro Rex">
    <img id="img5" src="images/mungojerry.gif" alt="Rogz Dog Toy Mungo Jerry">
    <img id="img6" src="images/groomingpic.gif" alt="Dog grooming and dog hygiene dog products">
    <img id="img1" src="images/grassdoggie.gif" alt="Puppy playing with toy on the grass"></h2>
    <p class="last4"></p>
    </div>
    </div>
    
    
    
    <div id="footer">Footer</div>
    </div>
    And some changes to your CSS -
    Code:
    #page-container {
    width: 1200px;
    margin: auto;
    overflow: auto;
    background: #0f0;
    }
    #main-nav {
    	height: 56px;
    width: 978px;
    margin: 0 auto 5px;
    }
    #main { 
    width: 978px;
    margin: 0 auto;
    border:none; 
    background: url(../images/ackground_r2_c3.gif)repeat-x; height:64px; 
    }
    #sidebar-b {
    float: left;
    width: 189px;
    margin: 100px 0 0 0;
    }
    #sidebar-a {
    float: right;
    width: 189px;
    }
    #content {
    margin: 20px 200px;
    background: #f00;
    }
    #footer {
    clear:both;
    	height: 66px;
    width: 1024px;
    margin: 0 auto;
    	background:black;
    }
    Your code would be much easier to work with if you had some indenting and mark your closing tags. Look at the code on that demo site I linked you to for an example.

    Check the links about validation in my signature line. They can really help you.

    You can edit your previous posts, just click the Edit button on the lower right of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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