...

View Full Version : CSS: List alignment goes funny in IE, please help



beNcooKe
03-17-2005, 01:50 PM
Hi,

Im using lots of CSS and Divs and trying to develop new pages for our company. I have a problem Ive just run into though:

My page is here: http://www.oxoid.com/2005/beNhome.asp

In Mozilla Firefox 1.0 the page looks fine [ it is still in the development stage remember ] However in Internet explorer 6 the list on the far left seems to be displayed in a staggering pattern going diagonal down to the left.

how can i fix this? My CSS code for these sections is as follows:

#prod_info_wrapper {
margin:0;
padding:0;

}
#prod_info_list {
float:left;
/*display:inline;*/
/*left:0;*/
background:#FFF;
}

/* CSS for the list div elements*/


#prod_info_list ul {
/* list-style-type:none;*/
margin:0px 0px 2px 2px;
padding:1px;
border-left: 10px solid #F6CA26;
/*display:block;*/
list-style:none;
}

#prod_info_list li {
padding:0;
margin:0;

}

#prod_info_list h3 {
background:#F6CA26;
text-align:center;
color:#FFF;
font: 0.75em Arial, Helvetica, sans-serif;
font-weight:bold;

margin:2px;

}
/* CSS for the content div elements*/

#prod_info_content h2 {
margin:0;
}




beN

_Aerospace_Eng_
03-17-2005, 02:01 PM
what happens if you take away the padding or margin from this css?

#prod_info_list ul {
/* list-style-type:none;*/
margin:0px 0px 2px 2px;
padding:1px;
border-left: 10px solid #F6CA26;
/*display:block;*/
list-style:none;
}

beNcooKe
03-17-2005, 02:08 PM
Removing those just messes up the layout by putting loads of space around elements in the lists.

I need to be able to specify a margin and padding.

The layout seems perfect in FireFox

Any ideas?

_Aerospace_Eng_
03-17-2005, 02:26 PM
try this

#prod_info_wrapper {
margin:0;
padding:0;

}
#prod_info_list {
float:left;
width:226px;
/*display:inline;*/
/*left:0;*/
background:#FFF;
}

/* CSS for the list div elements*/


#prod_info_list ul {
/* list-style-type:none;*/
width:211px;
margin:0px 0px 2px 2px;
/*display:block;*/
list-style:none;
}

#prod_info_list li {
padding:0;
margin:0;
}

#prod_info_list h3 {
background:#F6CA26;
width:224px;
text-align:center;
color:#FFF;
font: 0.75em Arial, Helvetica, sans-serif;
font-weight:bold;
margin:2px;
}
/* CSS for the content div elements*/

#prod_info_content h2 {
margin:0;
}

beNcooKe
03-18-2005, 09:54 AM
Cheers,

Ive sorted it well now, thanks for your help,

beN



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum