CSS - Layout Is In Ie Not Good, Firefox Is Ok

OK, I've been working with Firefox for a long time, and it usually serves me well for all browsers except IE.
Now my design/CSS only looks good in firefox 4.0.1 and not Safari, Opera, or Google Chrome, and I'm really upset. Why are the other browsers displaying my CSS improperly? Is there a hack for all browsers now?

OK, here's the site: http://www.caillouette.com/Diesel_site7/
Any info or insight is greatly appreciated.

thanks
-S

Hi all,

My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place!

If anyone would be kind enough to view:
cavendish-cs.co.uk/beta/

You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look

Any help greatly appreciated

Thanks

Craig

Does anyone have any idea what could be happening to my main menu - it dissappears in Safari!

Hobo

Hi,

I'm having a problem with a layout in Firefox.

http://26990.vws.magma.ca/press-room.cfm

As you can see the content area is all shifted down and lines up with a block in the menu. It doesn't do this in IE and I need it to work the same way in Firefox.

Can anyone offer some suggestions as to what I can change to get it to work?

Ok I have been trying to read and search and fiddle - but im getting to my wits end here. Trying a 2 column layout from scratch and in IE it views fine but firefox is not so fine.

www.chroma-zone.net

css:

www.chroma-zone.net/new.css

Any idea's?

-Thanks

I created what I thought was a simple layout using css, but I have some odd space above my layout in Firefox that I can't get rid of. The background peeks through above the text at the top so it's easy to see:

http://sundaysermons.heikou.net/brickaday/

As you can see, the layout should be flush against the top of the browser. I renders correctly in IE but not in Firefox. I checked my code and both the html and css validate so I'm assuming there's something wrong with my css:

Code:

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Verdana, sans-serif;
	font-size:12px;
	color: #000000;
	background: #FFFFFF url(images/bg.gif) repeat-y left;

}

#heading {
	height: 44px;
}

#heading h1 {
	font: bold 18px "Trebuchet MS", Tahoma, Arial, "Microsoft Sans Serif";
	color: #E77F04;
	text-align: left;
}

#banner {
	height: 73px;
	background-color: #E29722;
	border-top: 1px solid #9D3E1F;
	border-bottom: 1px solid #9D3E1F;
}

#tagline{
	height: 17px;
	background-color: #F0DCA2;
	border-bottom: 1px solid #9D3E1F;
}

#leftcontent{
	width: 210px;
	background-color: #FCF1D0;
	padding-top: 20px;
}

#leftcontent ul {
	margin-left:0;
	padding-left:0;
	display:inline;
}
#leftcontent ul li {
	margin-left: 0;
	list-style: none;
	padding-left:10px;
	line-height:26px;
}

#rightcontent{
	width: 470px;
	float:left;
}

Any help you guys could give me would be greatly appreciated. Thanks.

http://925-sterling-silver-jewelry....udes/header.php

well this is my first proper CSS based site but i am having troubles with it. the problem is that in IE the div (main) starts near to the sidebar div, wheras in firefox it starts a bit further away! also at the moment the links at the bottom dont appear in IE but do in FF albeit little messed up.

help please?

Hi

COuld someone take a look at http://www.sussexfind.co.uk/test/ if you view it in Firefox the layout breaks and I don't know why.

If someone could explain why i would be very grateful as I need to get this done soon!!

Thanks

I have been pulling my hair out on this one because for the life of me I cannot make it work.

Here is my page:

www.nova-dataonline.com

Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image.

Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding

here is the relevant markup:

PHP Code:
<div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
    </div> 





and css:

Code:

.featured{
 visibility:visible;
 width:410px;
 height:350px;
 position:absolute;
 top:250px;
 left:340px;
 border:1px solid #999999;
 border-left:none;
 background-repeat:no-repeat;
 background-position:center;
 background-image:url(images/message/feat.jpg);
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 font-style:normal;
 padding:102px 27px 29px 29px; 
}

#feat_1{visibility:hidden;}

and javascript (if it is even relevant to the problem):

PHP Code:
<script language="javascript" type="text/javascript">
<!--
function toggleDiv(id,flag) 
{
    if (flag == "1")
    {
        if (document.layers) document.layers[''+id+''].visibility = "show"
        else if (document.all) document.all[''+id+''].style.visibility = "visible"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    
    if (flag == "0")
    {
        if (document.layers) document.layers[''+id+''].visibility = "hide"
        else if (document.all) document.all[''+id+''].style.visibility = "hidden"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
}
-->
</script> 





any idea?

I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different.

Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous.

The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess!

Thank you so much in advance,
-lindsey

Dear All,
I have a problem with viewing my page in firefox. The Tree Div moves to the right and pushes the other divs down. Please check this temporary URL page. It works fine with IE 7 but FF it creates problems.


http://82.147.208.5/MapsoluteTest/Default.aspx

The css file is given below

Code:

#hdr {
 height:80px;
 padding-top : 5px;
 padding-left : 5px;
 background:#FFFFFF;
 border-color: #EEEEEE;
 border-width : 1px;
 color: #333333;
 text-align:center;
 }
 
 #body_block 
 {
 position:relative;
 background: white;
 color: #333333;
 height:500px;
 padding : 200px;
 }
 
 .TopBar 
 {
 	height:84px;
 padding-top : 5px;
 padding-left : 5px;
 background:#C9E2FF;
 border-bottom-color:#EEEEEE;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.TreePanel 
{	
float:left;
 width:220px;
 height:700px;
 border-color : Navy;
 background-color:#FFFFFF;
 padding : 10px;
 overflow:scroll;
}

.mapView
{	
	height:600px;
	float:left;
    text-align :center;
    padding-left:150px;
    padding-top: 40px;
}

.mapView1
{	
	height:600px;
	float:left;
    text-align :center;
    padding-left:60px;
    padding-top: 40px;
}

.mapView2
{	
	height:470px;
	float:left;
    text-align :center;
    padding-left:150px;
    padding-top: 40px;     
}


.gridView
{	
	width: 950px;
	height:200px;		
	float:left;
	left:25px;
	text-align:center;	
	overflow: auto;
	padding-top: 10px;
	border : solid 1px black;
}

.roundedPanel
{	
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#e4e4e4;	
}

.brDefinition
{
	text-align:center;
	width:500px;
    min-height : 750px;
    border-right : solid 1px black;    
    float:left;
    padding-left:20px;
    padding-right:20px;
    
}

.brAssignment
{
	text-align:center;	
	width:757px;
	float:left;
    height : 500px;
    border-right : solid 1px black;    
    border-left : solid 1px black;        
}

.brPanel 
{	
	float:left;
	width:220px;
	height:500px;
	border-color : Navy;
	background-color:#FFFFFF;
	padding : 10px;
	overflow:scroll;
}

.BRTreePanel 
{	
float:left;
 width:220px;
 height:500px;
 border-color : Navy;
 background-color:#FFFFFF;
 padding : 10px;
 overflow:scroll;
}

.BRGrid 
{	
 height:300px;
 padding : 10px;
 text-align: center;
 border-top : solid 1px black;
}

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

#UpdateProgress1, #UpdateProgress2, #UpdateProgress3, #UpdateProgress4 {
      width: 300px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }

I am not good in CSS. Please help.

Thanks in advance.

Regards,
Noorul

Here's my problem. I was stupid enough to do my layout for a page I'm making in Firefox, but didn't look at IE until I was done. IE is rendering the whole thing completely off. I was wondering if anyone might be able to help me reconcile the two layouts?

Here's the CSS:
Code:

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ccc;
	background-color: #3C3C3C;
	text-align: center;
	}
img {
	border: 0;
	}
abbr, acronym, .help {
	border-bottom: 1px dotted #333;
	cursor: help;
	}
#container {
	padding-top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	/* opera does not like 'margin:20px auto' */
	background: url(images/background.png) repeat-y;
	border: 0px;
	text-align: left;
	width: 685px;
	}
#menu {
	float: right;
	z-index: 9;
	margin-right: -44px;
	}
#content {
	border: 10px solid #5B5B5B;
	background: #FFF;
	width: 661px;
	font-size: 12px;
	margin-top: 20px;
	margin-bottom: 10px; 
	margin-left: 2px;
	font-family: tahoma, verdana, san-serif;
	}
.content-right {
	float: right;
	width: 70%;
	}
.content-left {
	width: 32%;
	}
h1#primary {
	position:relative;
	z-index: 10;
	background: url(images/header-1.png) top left no-repeat;
	width: 685px;
	height: 35px;
	margin-top: 26px;
	margin-bottom: 0px;
	margin-left: 20px;
	text-indent: -9999px;
	}
h2#homeprofile {
	background: url(images/homeprofile.png) top left no-repeat;
	width: 105px;
	height: 20px;
	margin-top: 15px;
	margin-bottom: 5px;
	margin-left: 14px;
	text-indent: -9999px;
	}
h2#featured {
	background: url(images/featured.png) top left no-repeat;
	width: 167px;
	height: 21px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 14px;
	text-indent: -9999px;
	}
h2#realtor {
	background: url(images/realtor.png) top left no-repeat;
	width: 161px;
	height: 20px;
	margin-top: 35px;
	margin-bottom: 10px;
	margin-left: 14px;
	text-indent: -9999px;
	}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
#content ul li {
	padding-left: 20px;
	margin-left: 25px;
	margin-bottom: 3px;
	margin-top: 5px;
	background-image: url(images/bullet.gif);
	background-repeat: no-repeat;
	background-position: center left;
	font-size: 12px;
	color: #7D8381;
	}
.content-intro {
	font-size: 12px;
	color: red;
	font-weight: bold;
	}
#featured-pic {
	margin-left: 15px;
	margin-right: 10px;
	}
p.homeprofile-txt, p.realtor-txt, p.featured-txt {
	font-size: 12px;
	color: #7D8381;
	margin-top: 5px;
	margin-left: 15px;
	margin-right: 10px;
	}
a:link, a:visited {
	color: black;
	text-decoration: none;
	border-bottom: 1px solid black;
	}
a:hover, a:active {
	color: #343F51;
	text-decoration: none;
	border-bottom: 1px dotted black;
	}
img.featured-pic, img.realtor-pic {
	margin-left: 14px;	
	}

Here's the 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" xml:lang="en" lang="en">
<head>
<title>Our Home</title>

<style type="text/css" media="all">@import url("style.css");</style>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="robots" content="all" />
</head>

<body>
<div id="container">
	&nbsp;
	<div id="menu"><img src="images/imagemap.gif"></div>
	<h1 id="primary">Country Living</h1>

<div id="content">
	<div class="content-right">
		<h2 id="featured">Feature Presentation</h2>
			<img id="featured-pic" src="images/featured-thumb.png" align="left" width="124px" height="92px" />
			<p class="featured-txt"><span class="content-intro">Please browse our image gallery</span>, where you will find a complete tour of the house, including the kitchen, bedrooms, dining room, and more! Upon loading the gallery, you can choose a new picture simply by clicking on it. Move to the next page by clicking the arrows. <a href="/gallery/public_html/">see the gallery</a></p>
	
		<h2 id="realtor">Realtor Information</h2>
			<img id="featured-pic" src="images/realtor-thumb.png" align="left" width="124px" height="92px" />
			<p class="realtor-txt"><span class="content-intro">Call our realtor</span> to set up a showing of our home! Full information is provided to contact *******************. <a href="#">see the info</a></p>
	</div>

	<div class="content-left">
		<h2 id="homeprofile">Home Profile</h2>
			<p class="homeprofile-txt"><span class="content-intro">The home at ******************* Road</span> sits on three acres of well-manicured lawn. Just made for those beautiful ****** evenings, you'll find both the front porch and back patio providing beautiful vistas for the eye, best enjoyed with a cool glass of iced tea.</p>
			<p class="homeprofile-txt">Completely remodeled within the last year, this house is ready for any family, large or small, to call it home. Here are some of the vital statistics you'll be interested in:</p>
			<ul>
				<li>Bedrooms: 4</li>
				<li>Bathroom: 3.5</li>
				<li>Apprx. SqFt: 4824</li>
				<li><abbr title="List Price per Square Foot">Lp. SqFt</abbr>: 90.17</li>
				<li>Acreage: 3 acres</li>
				<li>City: *********</li>
				<li>County: *********</li>
				<li>Stories: One story</li>
				<li>Style: Traditional</li>
				<li>
			</ul>
			<p class="homeprofile-txt">Please look around our site for more information on this prime home. You'll find that we have a gallery complete with pictures from every area of the house, as well as information on our realtor, and directions on how to get the house if you want to get a better idea of the location.</p>
	</div>

</div>

</div>

</body>
</html>

Here's a picture of what the problem looks like in IE.

Here's a picture of what the problem looks like in Firefox.

I've been working with this issue for the better part of the day, and I think whatever the issue is, is one I'm not seeing because I've been doing just that. So I'm hoping to get a little guidance from those of you who're far superior to me in the world of CSS.

On this site ianrobinett.com/designwork/SAMPO/Sitev1/ I've been working on, in Mozilla, the fullwidth div I put below my other divs (in the main body content area), is appearing off to the right of the Twitter widget. In Chrome and IE, funny enough, it's right, and it's Mozilla having the fit.

I honestly figure this is something small, and something I'm just missing because I've been looking at the code all day.

I have a basic layout as follows:

Code:

   <div id="wrapper">
   
         <div id="header">
		 
		 	<!--#include virtual="/siteadmin/includes/inc_header.asp" -->		 
			   
		 </div>     
		 
		 <!-- Begin Left Column - Menu -->
		 <div id="leftcolumn">
		 
		<!--#include virtual="/siteadmin/includes/inc_admin_menu.asp" -->
		 
		 </div>
		 <!-- End Left Column - Menu -->
		 
		 <!-- Begin Right Column - Content -->
		 <div id="rightcolumn" align="left">
		       		 
		<!--#include virtual="/siteadmin/includes/inc_menu_page.asp" -->					 	
		 
	 	</div>
		 
		 <!-- End Right Column - Content -->
		 
		 <!-- Begin Footer -->
		 <div id="footer">
		       	
				<!--#include virtual="/siteadmin/includes/inc_footer.asp" -->
			    
	     </div>
		 <!-- End Footer -->		 
		 
   </div>

Which uses the following css

Code:

body {
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: 0px; 
	margin-right: 0px;
	font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
}
 
#wrapper {
	margin: 0px;
	width: 100%;
	padding: 0px;
}
#header {
	color: #333;
	width: 100%;
	float: left;
	border: 0px solid #ccc;
	height: 100px;
	background-image: url('/media/images/headerBackground.gif');
}
#leftcolumn {
	color: #333;
	border: 0px solid #ccc;
	background: White;
	padding: 10px;
	width: 195px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}
#rightcolumn {
	float: left;
	color: #333;
	border: 0px solid #ccc;
	background: White;
	padding: 10px;
	height: 100%;
	display: inline;
	padding-left: 10px;
	padding-right: 20px;	
}
#footer {
	width: 100%;
	height:27px;
	clear: both;
	color: #333;
	border: 0px solid #ccc;
	background-image: url('/media/images/footer_bg.jpg');
	background-repeat:repeat-x;
}

Anyway the problem is, IE will display as it needs to while firefox will put the right colum down below the left column, header and footer are in the correct spot. Am I doing something wrong here? (very new to layout css)