...

View Full Version : gap problem with IE



blacktears
12-11-2006, 10:36 PM
I have a selection of 4 list items, which are images that I want to fit close together vertically. I have done this before but for some reason this time, nothing seems to change with different values, it's driving me nuts as I have tried numerous fixes for this but I am pretty sure that it's something I'm missing. I would be really greatful if someone could point out why it's happening so I know for the future.

CSS


body {

background: #071E30;
color: white;

}

a {text-decoration: none; color: #fff;}
a:hover {text-decoration: underline;}
img {border: none;}

#wrap {

margin-top: 3px;
margin-left: 60px;
padding: 0px;
width: 880px;
height: 560px;


}




#synthbg {

margin-left: 0px;
margin-top: 0px;
list-style: none;
height: 601px;
width: 486px;
padding: 0px;



}


#synthbg li {
height:10px;
text-align: center;
line-height:40px;
}

HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>

<head>


<meta name="author"
content="Becka Dawson">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Keywords" content="chris, chris jennings, jennings, music, stoke-on-trent, hanley, stoke, north, studio, music, depeche mode, composer, sound designer,">
<meta name="Title" content="Rainstorm - Photography">
<meta name="Description" content="Rainstorm v2.0 is an online portfolio for Rebecca Dawson's creative exploration within photography and visual art. ">


<title>Chris Jennings Music - Profile</title>

<link rel="stylesheet" type="text/css" href="styleIE.css">

</head>

<body>

<div id="wrap">

<ul id="synthbg">

<li><img src="images/synth1.jpg"></li>
<li><img src="images/synth2.jpg"></li>
<li><img src="images/synth3.jpg"></li>
<li><img src="images/synth4.jpg"></li>

</ul>

</div>

</body>

</html>

_Aerospace_Eng_
12-11-2006, 10:56 PM
#synthbg li {
height:10px;
text-align: center;
line-height:40px;
font-size:0;
}

blacktears
12-13-2006, 07:41 PM
Thanks so much for that! How did that actually work for future reference?

Becka

rmedek
12-13-2006, 08:14 PM
What's happening is the list items make room for the font plus the line-height. So by resetting the font-size to zero, you're effectively using the line-height only.

You can also avoid this by using "display: block" on the list items, which will give the list items the ability to have an explicit height and width, although then you need a different method to position them.

blacktears
12-13-2006, 08:20 PM
ah that's really helpful cheers :D

Becka

Excavator
12-13-2006, 08:45 PM
Since you run into that problem in so many places I always add

html, body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
to the CSS and then specify margin, padding, line-height and font size as needed for each div.

VIPStephan
12-13-2006, 11:45 PM
Since you run into that problem in so many places I always add

html, body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
to the CSS and then specify margin, padding, line-height and font size as needed for each div.

If you're doing this you can actually leave the first rule and just use the second one as that will address every element anyway (the body and html elements).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum