hi,

 

this is the first time i have posted on a web forum so any help would be appreciated. i recently finished the html/css for my site and solved all issues in firefox and safari for mac, IE6 and IE7. however, when i went to test it on firefox PC i found that on some pages a div has a margin-left appearing and a UL seems to have a padding-left.(again, firefox mac and all other browsers are perfect). i have went through the html and stylesheet and can find nothing which would cause this.

 

any ideas?

 

 

thanks

Post the code.

Post the code.

 

there is a margin-left of about 120px between the beginning of div .breadcrumbs and the begining of li Home. the code is below:

 

 

 

HTML

 

<!-- middle section container -->

<div class="middlesection iefix">

<div class="breadcrumbs">

<ul>

<li><a href="../index.php">Home</a></li>-->

<!--[if IE 6]><img src="../assets/logos/arrowdivide.gif" alt="arrow divider"/><![endif]-->

<img src="../assets/images/arrowdivide.png" alt="arrow divider" class="ie6hide"/>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

 

 

 

CSS

 

.breadcrumbs

{

position: relative;

top: 10px;

left: 25px;

width:903px;

height:20px;

border: 1px solid #C9C9C9;

}

 

.breadcrumbs ul

{

list-style-type: none;

background-color: red;

height: 20px;

width: 900px;

}

 

.breadcrumbs ul li

{

float: left;

padding: 2px 8Px 0px 8Px;

margin-left: 0px;

display: inline;

}

 

.breadcrumbs img

{

float: left;

}

 

.breadcrumbs a

{

color: #555656;

text-decoration: none;

margin-top: 10px;

}

 

.breadcrumbs a:hover

{

text-decoration: underline;

}

there is a margin-left of about 120px between the beginning of div .breadcrumbs and the begining of li Home. the code is below:

HTML

 

<!-- middle section container -->

<div class="middlesection iefix">

<div class="breadcrumbs">

<ul>

<li><a href="../index.php">Home</a></li>-->

<!--[if IE 6]><img src="../assets/logos/arrowdivide.gif" alt="arrow divider"/><![endif]-->

<img src="../assets/images/arrowdivide.png" alt="arrow divider" class="ie6hide"/>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

CSS

 

.breadcrumbs

{

position: relative;

top: 10px;

left: 25px;

width:903px;

height:20px;

border: 1px solid #C9C9C9;

}

 

.breadcrumbs ul

{

list-style-type: none;

background-color: red;

height: 20px;

width: 900px;

}

 

.breadcrumbs ul li

{

float: left;

padding: 2px 8Px 0px 8Px;

margin-left: 0px;

display: inline;

}

 

.breadcrumbs img

{

float: left;

}

 

.breadcrumbs a

{

color: #555656;

text-decoration: none;

margin-top: 10px;

}

 

.breadcrumbs a:hover

{

text-decoration: underline;

}

 

Its difficult to solve your problem like this..

Youekther post the Full code or attach the HTML and CSS file..

Or it will be much better if you can upload and provide a link.

 

Just a guess try to make the default margin and padding of UL, img, to 0.

all browsers and os have their defaults if you don't specify the margin,padding.. etc..

 

add this code at the top right after body.. hope it helps.

 

css:

 

body{

/* code here */

}

 

ul,li{

/* this forces all browsers and OS to have 0 padding and 0 margin. */

margin:0;

padding:0;

}