...

View Full Version : CSS IE FF issues



boratspider
01-08-2010, 02:57 PM
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?


<!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>



.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 :thumbsup:

Kor
01-08-2010, 03:18 PM
A link to a test page would be of great help, as we can not see how those pictures are not aligned.

abduraooft
01-08-2010, 03:18 PM
Can we have a link to your page, as we don't have those images included?
Oh Kor, you beat me! :)

drhowarddrfine
01-08-2010, 04:14 PM
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.

boratspider
01-08-2010, 05:39 PM
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.

boratspider
04-18-2010, 03:26 PM
is there anyway to edit my above posts?

Excavator
04-18-2010, 04:34 PM
Hello boraspider,
If you re-arrange your markup a little so you 3 column layout follows this example (http://nopeople.com/CSS/simple3column/index.html) then getting it to lay right is just a matter of changing some CSS.
Try your markup ordered like this -

<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 -
#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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum