HTML Forum

**jwalker80** · 12-21-2005, 04:13 AM

Hi, I have developed a page using firefox. It looks different in IE, there are spacings between elements.

Anyone know how to get rid of them? (See screenshots)

**chrishirst** · 12-21-2005, 04:15 AM

a url would be infinitely more useful than pictures.

But it's probably whitespace between elements. Are they block elements or inline ?

**jwalker80** · 12-21-2005, 07:12 AM

This is my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSI inside page</title>
<link href="styles.css"rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
<div id="top">
<img src="img/index_01.jpg" />
</div>

<img src="img/topNav.gif" />
<div id="navigate">
<a href="#">SERVICES</a> | <a href="#">OUR APPROACH</a> | <a href="#">INDUSTRY RESOURCES</a> | <a href="#">CAREERS</a> | <a href="#">CONTACT US</a>
</div>
<img src="img/bottomNav.gif" />

<div id="title">
<img src="img/index_17.jpg" />
</div>

<div id="leftcontent">
<img src="img/topEdge.jpg" /><p class="floatLeft"><a class="secondaryNav" href="#">COST MANAGEMENT</a><br><img class="floatLeft" src="img/dots.gif" />
<a class="secondaryNav" href="#">BUSINESS PROCESS ANALYSIS</a><br><img class="floatLeft" src="img/dots.gif" />
<a class="secondaryNav" href="#">TECHNOLOGY SUPPORT</a></p>
<img class="floatRight" src="img/edgeImage2.jpg" />
<img class="floatLeft" src="img/working.jpg" /><img class="floatRight" src="img/Leftbracket.gif" /><span class="imgText floatLeft leftpadding">Fusce convallis tincidunt dui. Fusce convallis tincidunt dui. Fusce convallis tincidunt dui.</span><p class="blackbold floatLeft leftpadding">John Smith<br>Turner Construction Inc.</p>
<img src="img/turner.jpg" />
</div>

<div id="middlecontent">
<img class="floatRight" src="img/hardhat.jpg" /><p class="floatLeft sectionText maxWidth"><span class="biggerText">We work smart </span> to deliver success in the industrial contruction market. By combining strategic consulting with on-site implementation services, CSI rapidly identifies and targets quantifiable change for customers. We like to call this our SWAT approach.</p>
<p class="descriptText clear"><span class="graybold">Our project based, practical solutions deliver value in a short time. CSI offers:</span><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pulvinar purus ut arcu. Morbi neque. Mauris elementum commodo risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tristique neque quis felis. Donec cursus. Aliquam adipiscing ullamcorper nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nec ligula. Maecenas in quam eget elit accumsan lobortis. Proin at quam.<br><br>
Pellentesque dignissim. Mauris id diam dictum purus condimentum bibendum. Mauris vitae augue. Curabitur nunc. Etiam quam. Pellentesque nec sapien. Mauris ut metus eget arcu faucibus adipiscing. Sed vel ante. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ornare elementum urna.</p>
</div>

<div id="rightcontent">
<img src="img/index_08.jpg" /><img src="img/index_11.jpg" />
</div>

<div id="footer">
<a href="#"><img src="img/index_12.jpg" border="0" align="middle" /></a><span class="footerText">LEGAL   |   SITEMAP</span>
</div>
</div>

</body>
</html>

**vangogh** · 11:07 AM

Can you post your css as well?

**jwalker80** · 12-21-2005, 05:50 PM

Yea Sorry, here it is:

Code:

/* CSS Document */


#container
{
width: 900px;
background-color: #fff;
padding: 0;
margin: 0;
}

#top
{
padding: 0;
background-color: #ddd;
}

#hometop
{
margin: 0;
padding: 0;
background-image:url(img/logo_repeat.gif);
background-repeat: repeat-x;
}

#top h1
{
padding: 0;
margin: 0;
}

#nav
{
padding: 0;
margin: 0;
}

#navigate
{
    background-image:url(img/background_repeat.jpg);
    background-repeat: repeat-x;
    padding-left:26px;
    padding-bottom:4px;
    padding-top:3px;
}
 
#navigate a
{
    font-weight:bolder;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    color: #000000;
}
 
#navigate a:hover
{    
    color:#ffffff;
}


#title
{
padding: 0;
margin: 0;
}

#leftcontent
{
float: left;
width: 266px;
margin: 0;
padding: 0;
}

#leftcontent_home
{
float: left;
width: 361px;
margin: 0;
padding: 0;
}

#left_div1
{
background-image:url(img/top_right_short_bg.gif);
float: left;
width: 361px;
height:128px;
margin-left: 0;
}

#left_div2
{
background-image:url(img/news_bg1.gif);
clear:left;
float: left;
width: 206px;
height:31px;
margin: 0;
}

#left_div3
{
background-image:url(img/news_bg2.gif);
float: right;
width: 155px;
height:31px;
margin: 0;
padding: 0;
}

#left_div4
{
clear:left;
float: left;
width: 206px;
height:182px;
margin: 0;
padding: 0;
}

#left_div5
{
float: right;
width: 250px;
height:182px;
margin: 0;
padding: 0;
position:absolute; top: 389px; right: 560px;
z-index:5;
}

#middlecontent_home
{
background-image:url(img/home_strip1.gif);
background-repeat: repeat-x;
float: left;
width: 170px;
margin: 0;
padding: 0;
}

#rightcontent_home
{
background-image:url(img/right_side_bg.gif);
float:right;
width: 352px;
height: 341px;
margin: 0;
padding: 0;
}

#image_home
{
float: left;
margin: 0;
padding: 0;
width: 187px;
}

#rightcontent
{
float:right;
width: 158px;
margin: 0;
padding: 0;
}



#middlecontent
{
float: left;
width: 476px;
margin: 0;
padding: 0;
background:url(img/backcolour_1.jpg) no-repeat;
}



#footer
{
background-image:url(img/background_repeat3.gif);
background-repeat: repeat-x;
width:900px;
height:35px;
clear: both;
margin: 0;
padding: 0;
}

.menutext
{
font-family:Arial, Helvetica, sans-serif;
color:#990000;
}

.sectionText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#999999;
padding-left:21px;
padding-top:6px;
}

.descriptText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}

.graybold
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
font-weight:bold;
}

.biggerText {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color:#000000;
}

.imgText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
max-width: 16em;
}

.blackbold
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color:#000000;
}

.ver_10_lgrey
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#CCCCCC;
}

.ver_10_grey
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#666666;
}

.ver_10_black
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
}

.ver_10_black_bold
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
color:#000000;
}

.ver_10_bold_red
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
color:#990033;
}

.bold_big_white
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 14px;
color:#FFFFFF;
}

.link_black a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
}

.link_black a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#990033;
}

.footerText
{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
padding-left:360px;
}

.footerText_home
{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
padding-left:150px;
padding-top:1px;
}

.footerText_home a
{
color:#000000;
text-decoration:none;
}

.footerText_home a:hover
{
color:#000000;
text-decoration:underline;
}

.spanwidth
{
width: 100px;
}

.floatRight
{
float: right;
}

.floatLeft
{
float: left;
}

.maxWidth
{
max-width: 30em;
}

.currentPageLink
{
color:#999999;
}

.clear
{
clear:both;
}

.secondaryNav
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#990033;
padding-left:23px;
}

.secondaryNav a
{
text-decoration:none;
}

.secondaryNav a:hover
{
text-decoration:underline;
}


.maxwidth
{
max-width: 30em;
}

.leftpadding
{
padding-left: 25px;
}

.toppadding
{
padding-top: 10px;
}

.right_text_padding
{
padding-top: 31px;
max-width: 20em;
line-height: 12pt;
}

.textlayer
{
position:absolute; top: 358px; right: 622px;
z-index:4;
}

**jwalker80** · 12-21-2005, 06:03 PM

its cool i got it, i need

img {display:block;}

in the css

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!