Webmaster-Talk.com > Coding Talk > CSS Forum > Looks great in Firefox, wrong in IE :(

Reply
Looks great in Firefox, wrong in IE :(
Old 12-05-2005, 09:09 PM Looks great in Firefox, wrong in IE :(
HitRaj47's Avatar
Extreme Talker

Posts: 177
Location: GA
Talkupation: HitRaj47 is on a distinguished road
This is what my site is supposed to look like:



Thats in Firefox.

Now, this is what it looks like in IE:



Notice, that the horizontal scrollbar has appeared in IE and you have to scroll right to read all the text.

This is my CSS code:

Code:
 
html, body {
height: 100%;
}
 
body{
background: #ffffff url('../images/main_bg.jpg') repeat-y;
margin: 0 auto;
}

a:link, a:active, a:visited{
color: #cc0000;
text-decoration: underline;
}

a:hover{
color: #ff0000;
text-decoration: none;
}

#header{
background-image: url('../images/header_bg.jpg');
background-repeat: repeat-x;
height: 90px;
}

#header img{
border: 0;
}

#navbar{
position: relative;
top: -4px;
background-image: url('../images/navbar_bg.jpg');
height: 50px;
}

#navbar img{
border: 0;
}

#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#navbar ul li{
display: inline;
}

#main{
position: relative;
top: -4px;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}

html>body #main {
height: auto;
}

#sidebar{
float: left;
width: 190px;
background-color: #ffffff;
text-align: left;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}

#sidebar ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 5px;
}

#sidebar ul li{
background-image: url('../images/sidebar_li.jpg');
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 17px;
}

#sidebar ul li:hover{
background-image: url('../images/sidebar_li_hover.jpg');
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 17px;
}

#sidebar p{
font-size: 8pt;
text-align: center;
margin-left: 5px;
}

#sidebar p#search{
text-align: left;
}

#sidebar img{
border: 0;
}

#sidebar input{
margin-left: 5px;
border: 1px solid #cc0000;
background-color: #ffffff;
font-family: "Trebuchet MS", Verdana, Arial;
}

#sidebar input:hover{
background-color: #FFDFDF;
}

#content{
position: absolute;
float: left;
left: 190px;
_left: 0;
margin-left: 20px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}

#content ul#breadcrumbs{
list-style-type: none;
margin: 0;
padding: 0;
padding-bottom: 4px;
border-bottom: 1px dashed #cc0000;
}

#content ul#breadcrumbs li{
display: inline;
font-size: 8pt;
}

#content h1{
color: #cc0000;
font-size: 26pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: -4px;
margin-bottom: -4px;
}

#content h2{
color: #000000;
font-weight: bold;
font-size: 20pt;
}

#content h3{
color: #000000;
font-weight: bold;
font-size: 16pt;
}

#content hr{
color: #cc0000;
}

#content input{
margin-left: 5px;
border: 1px solid #cc0000;
background-color: #ffffff;
font-family: "Trebuchet MS", Verdana, Arial;
}

#content input:hover{
background-color: #FFDFDF;
}

#footer{
width: 100%;
height: 30px;
background-image: url('../images/footer_bg.jpg');
background-repeat: repeat-x;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
padding-top: 6px;
padding-left: 4px;
}

#footer ul{
list-style-type: none;
padding: 0;
margin: 0;
}

#footer ul li{
display: inline;
}
And this is my XHTML code:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Web Design &amp; Development portfolio - Beware of Raj</title>
<link rel="stylesheet" type="text/css" href="css/bewareofraj.css" />
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/navbar_home_hover.jpg','images/navbar_portfolio_hover.jpg','images/navbar_about_hover.jpg','images/navbar_services_hover.jpg','images/navbar_contact_hover.jpg')">

<div id="header">
<!-- Logo goes here -->

	<a href="#" name="top" id="top"><img src="images/header.jpg" alt="Beware of Raj" /></a>
	
<!-- end header -->
</div>

<div id="navbar">
<!-- Main navigation bar -->

	<ul>
		<li><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbarhome','images/navbar_home_hover.jpg',1)" onmouseover="MM_nbGroup('over','navbarhome','images/navbar_home_hover.jpg','images/navbar_home_hover.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/navbar_home.jpg" alt="Home" name="navbarhome" width="150" height="50" border="0" id="Home" onload="" /></a></li>
		<li><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbarportfolio','images/navbar_portfolio_hover.jpg',1)" onmouseover="MM_nbGroup('over','navbarportfolio','images/navbar_portfolio_hover.jpg','images/navbar_portfolio_hover.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/navbar_portfolio.jpg" alt="Portfolio" name="navbarportfolio" width="150" height="50" border="0" id="Portfolio" onload="" /></a></li>
		<li><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbarabout','images/navbar_about_hover.jpg',1)" onmouseover="MM_nbGroup('over','navbarabout','images/navbar_about_hover.jpg','images/navbar_about_hover.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/navbar_about.jpg" alt="About" name="navbarabout" width="150" height="50" border="0" id="About" onload="" /></a></li>
		<li><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbarservices','images/navbar_services_hover.jpg',1)" onmouseover="MM_nbGroup('over','navbarservices','images/navbar_services_hover.jpg','images/navbar_services_hover.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/navbar_services.jpg" alt="Services" name="navbarservices" width="150" height="50" border="0" id="Services" onload="" /></a></li>
		<li><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbarcontact','images/navbar_contact_hover.jpg',1)" onmouseover="MM_nbGroup('over','navbarcontact','images/navbar_contact_hover.jpg','images/navbar_contact_hover.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/navbar_contact.jpg" alt="Contact" name="navbarcontact" width="150" height="50" border="0" id="Contact" onload="" /></a></li>
	</ul>
	
<!-- end navbar -->
</div>

<div id="main">
<!-- Container for sidebar and content -->

	<div id="sidebar">
	<!-- Put section specific links here. Adverts can also go here. -->
	
		<ul>
			<li><a href="index.htm">Home/Welcome</a></li>
			<li><a href="news/index.htm">News</a></li>
			<li><a href="news/archives/index.htm">News Archives</a></li>
		</ul>
		
		<p>
		<!-- Google AdSense advert -->
		<script type="text/javascript"><!--
		google_ad_client = "pub-0407482721675004";
		google_ad_width = 160;
		google_ad_height = 600;
		google_ad_format = "160x600_as";
		google_ad_type = "text_image";
		google_ad_channel ="";
		google_color_border = "000000";
		google_color_bg = "FFFFFF";
		google_color_link = "CC0000";
		google_color_url = "FF0000";
		google_color_text = "000000";
		//--></script>
		<script type="text/javascript"
		  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
		<!-- end Google AdSense advert -->
		</p>
		
		<p id="search">
		<strong>Search this site:</strong>
		<!-- SiteSearch Google -->
		<form method="get" action="http://www.google.com/custom" target="_top">
		<input type="hidden" name="domains" value="bewareofraj.com" />
		<input type="text" name="q" size="27" maxlength="255" value="" />
		<input type="submit" name="sa" value="Search" />
		<input type="hidden" name="sitesearch" value="bewareofraj.com" />
		<input type="hidden" name="client" value="pub-0407482721675004" />
		<input type="hidden" name="forid" value="1" />
		<input type="hidden" name="ie" value="ISO-8859-1" />
		<input type="hidden" name="oe" value="ISO-8859-1" />
		<input type="hidden" name="cof" value="GALT:#FF0000;GL:1;DIV:#000000;VLC:FF0000;AH:center;BGC:FFFFFF;LBGC:FFFFFF;ALC:CC0000;LC:CC0000;T:000000;GFNT:CC0000;GIMP:CC0000;FORID:1;" />
		<input type="hidden" name="hl" value="en" />
		</form>
		<!-- SiteSearch Google -->
		</p>
		
	<!-- end sidebar -->
	</div>
	
	<div id="content">
	<!-- All main page content goes here -->
	
		<ul id="breadcrumbs">
          <li><a href="index.htm">Home</a> &gt; </li>
		  <li>Welcome!</li>
		</ul>
	
		<h1>Welcome!</h1>
		
		<p>My name is Rajesh Ramsaroop. This is my online web design &amp; development portfolio. If you are an employer/business or individual and have web design/development related needs, please take a look at my <a href="portfolio/index.htm">portfolio</a> for examples of previous work. You should also take a look at the <a href="services/index.htm">services</a> page to see if there is anything else I can do for you. <strong>I'd love to help you out!</strong></p>
		
			<div id="footer">
	<!-- Footer. Copyright stuff goes here -->
	
		<ul>
			<li><a href="#">Home</a> | </li>
			<li><a href="#top">Back to top</a> | </li>
			<li>Beware of Raj&copy;2005 Rajesh Ramsaroop.</li>
		</ul>
		
	<!-- end footer -->
	</div>

		
	<!-- end content div -->
	</div>
	

<!-- end main container -->
</div>

</body>

</html>
Any help is greatly appreciated.
HitRaj47 is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
     
Old 12-16-2005, 12:25 PM
akratellio's Avatar
Average Talker

Posts: 25
Location: Berlin Germany Europe World
Talkupation: akratellio is on a distinguished road
hi HitRay47,

i'm to lazy to debug all your code, so
maybe you should start debugging your site by your own.
You can start from the basic layout and go further and further, until
you reach the element which appears the horizontal scrollbar because of
it's width attributes.
Maybe it's an p or another block element.
Inline elements mostly don't push the layout aside.

mfg

akratellio
__________________
I'm always lying...
Ich lüge immer...
http://www.kcanada.de
akratellio is offline
Reply With Quote
View Public Profile Visit akratellio's homepage!
 
Old 12-16-2005, 05:21 PM
ADAM Web Design's Avatar
Canadastaninianite

Latest Blog Post:
A Strange Forum Policy: The Boutique Board
Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Talkupation: ADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond repute
It's your footer. Take this line out:

width: 100%;

It will probably solve that issue.
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 12-16-2005, 06:36 PM
HitRaj47's Avatar
Extreme Talker

Posts: 177
Location: GA
Talkupation: HitRaj47 is on a distinguished road
still doesnt solve it im afraid
HitRaj47 is offline
Reply With Quote
View Public Profile
 
Old 12-17-2005, 05:09 PM
vangogh's Avatar
Post Impressionist

Latest Blog Post:
A Focused Blog Is A Happy Blog
Posts: 8,663
Name: Steven Bradley
Location: Boulder, Colorado
Talkupation: vangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond reputevangogh has a reputation beyond repute
I'm not entirely certain, but I think I have a guess as to what's going on. I think the problem may be in #content. You're trying to use both absolute positioning and a float and I think that's what's throwing things off.

You also shouldn't have to use the _left for IE.

You can try doing away with the left positioning and the float entirely and use margin-left:190px on #content.

The reason I think the problem is in the #content is because it looks to me like there is about 190px to the right of the scrollbar. Something is telling #content to start 190px from the left edge while still maintaining the full 100% width of everything else.

Do you have the page up anywhere instead of just the image? It would be easier to debug if I could view the actual page.

I hope my guess about what's wrong is correct and helps.
__________________
l Search Engine Friendly Web Design | Van SEO Design
l Tips On Marketing, SEO, Design, and Development | TheVanBlog
l Custom WordPress Themes | Small Business Forum
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Reply     « Reply to Looks great in Firefox, wrong in IE :(
 
Previous Thread | Next Thread Webmaster-Talk.com > Coding Talk > CSS Forum > Looks great in Firefox, wrong in IE :(

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Webmaster Resources Marketplace:
Software Development Company | Webhosting.UK.com
Web Templates | Text Link Brokers | Stock Photos


   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.15012 seconds with 13 queries