Cross Browser

jwalker80 · #1 Dec 21st, 2005, 08:07

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)

sypher · #2 Dec 21st, 2005, 09:41

Show us the code

jwalker80 · #3 Dec 21st, 2005, 10:01

This is my code:

Code: Select all

 <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>

sypher · #4 Dec 21st, 2005, 10:04

Delete the spaces in your code

jpmitchell · #5 Dec 21st, 2005, 13:47

Sypher is right... If that doesn't work let us know.

It is very crazy how spaces and breaks in code CAN sometimes translate into layout problems.

benbramz · #6 Dec 21st, 2005, 13:52

yeah sounds like that should work
also, you [code] tags next time

ive done it this time

jpmitchell · #7 Dec 21st, 2005, 14:00

I think benbramz means: USE [code] tags next time.

I was wondering why it looked a bit wierd.

jwalker80 · #8 Dec 21st, 2005, 21:45

hey, getting rid of the spacing didnt work, here is my CSS (in code tag

)

Code: Select all

/* 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 · #9 Dec 21st, 2005, 22:03

Its coll, i got it, i needed

img {display:block;}

in my CSS

benbramz · #10 Dec 22nd, 2005, 14:37

Quote:

Originally Posted by DSMag

I think benbramz means: USE [code] tags next time.

I was wondering why it looked a bit wierd.

yeah....haha notice i edited the post in question...

glad you got it sorted!

sypher · #11 Dec 22nd, 2005, 14:38

glad you sorted it

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
cross browser issues	planescape	Web Page Design	4	Aug 29th, 2007 21:16
Cross-Browser difficulties...	Dapandyman	Web Page Design	6	Dec 9th, 2006 20:53
HELP!!! Cross browser issue...	hak	Web Page Design	7	Dec 4th, 2006 11:40
Help! Cross Browser Issue	centenial	Web Page Design	1	Aug 8th, 2006 18:56
New Cross-Browser Low	masonbarge	JavaScript Forum	2	May 11th, 2006 17:18

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Cross Browser