Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: Cross Browser

  1. #1
    Member
    Join Date
    Dec 2005
    Posts
    57
    Member #
    12146
    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)
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    We need to see your code to tell exactly, pictures don't help. But, if you used tables in your layout, my first guess would be your </td> tags. Make sure they are inline without any space between the content they contain. Example:
    Code:
    <td>Some type of content, picture, etc</td>
    Notice there is no space between the etc and the </td> tag. I hope I conveyed this clearly?

  4. #3
    Member
    Join Date
    Dec 2005
    Posts
    57
    Member #
    12146
    Sorry here is my html and css code:

    HTML:

    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. Cum 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 &nbsp; | &nbsp; SITEMAP</span>
    </div>
    </div>
    </body>
    </html>
    CSS:
    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;
    }

  5. #4
    Member
    Join Date
    Dec 2005
    Posts
    57
    Member #
    12146
    Its cool, I got it. I needed
    Code:
    img {display:block;}
    in my CSS

  6. #5
    Senior Member audiofreak9's Avatar
    Join Date
    Apr 2005
    Location
    NJ
    Posts
    339
    Member #
    9584
    Glad to see you've got it fixed, and used div's and not tables...good luck!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com