CSS - Css Ie + Firefox Differences In My Site Layout - Help!

I have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome.

My Site

and here is me css file

css Code:
Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }

  

  


 /* Basic style sheet */


 html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {


   margin: 0px;


   padding: 0px;


   border: 0px;


 }


  


 body{


   background-image: url(../images/thumbBG.gif);


   background-repeat: repeat;


   color: #999999;


   font-family: Arial, Helvetica, sans-serif;


   font-size: 100.01%; 


   text-align: center;


 }


  


 #wrapper{


   width: 800px;


   text-align: left;


   background-color: #1A1A1A;


 }


  


 #rightshadow{


   width: 850px;


   margin-left: auto;


   margin-right: auto;


   background-image:url(../images/rightshadow.png);


   background-position: right top;


   background-repeat: repeat-y;


   /*background-attachment: inherit;*/


 }


  


 #leftshadow{


   padding-left: 25px;


   background-image: url(../images/leftshadow.png);


   background-position: left top;


   background-repeat: repeat-y;


   /*background-attachment: inherit;*/


 }


  


 #banner{


   height: 135px;


   background-position: center;


   background-repeat: no-repeat;


   background-image: url(../images/banner2.jpg);


 }


  


 #nav{


   height: 10px;


   background-color: #000000;


   text-align: center;


   margin-bottom: 10px;


 }


  


 #nav ul{


   padding: 0px;


   margin: 0px;


   background-color: #000000;


 }


  


 #nav ul li{


   display: inline;


   padding: 0px;


   margin: 0px;


 }


  


 #nav ul li a{


   font-size: 80%;


   color: #FFFFFF;


   background-color: #000000;


   text-decoration: none;


   padding: 0px 25px 0px 25px;


   text-align: center;


   width: 9em;


 }


  


 #nav ul li a:hover, #nav ul li a:focus{


   background-color: #D0EB5A;


   color: #000000;


 }


  


 #usepic{


   height: 110px;


   width: 104px;


   border: 1px solid #000000;


   background-color: #000000;


   margin-top: 5px;


   margin-bottom: 15px;


   margin-left: 5px;


 }


  


 #user{


   float: left;


   width: 115px;


   background-color: #000000;


   text-align: center;


   margin-top: 10px;


   margin-left: 13px;


 }


  


 /* html div#user  { width: 20px; top: 38px; left:20px; position:absolute; }*/


  


 #content{


   margin-top: 10px;


   margin-right: 23px;


   margin-bottom: 4px;


   float: right;


   width: 625px;


 }


  


 .containAll{


   background: #000000;


   margin-bottom: 10px;


 }


  


 .container{


   width: 100%;


   float: none;


   margin-bottom: 10px;


 }


  


 #content p{


   font-size: 80%;


   margin: 20px;


   font-weight: bold;


 }


  


 #content h1{


   font-size: 130%;


   color: #003366;


   padding: 0px;


   margin: 20px;


 }


  


 #content h2{


   font-size: 110%;


   color: #D0EB6A;


   padding: 0px;


   margin: 20px;


 }


  


 hr{


   visibility: hidden;


 }


  


 .leftimage{


   float: left;


   margin: 0px 10px 20px 0px;


   border: 1px solid #000000;


 }


  


 .rightimage{


   float: right;


   margin: 0px 0px 20px 15px;


   border: 1px solid #000000;


   width: 150px;


 }


  


 .container hr{


   clear: both;


   visibility: hidden; 


 }


  


 hr{


   visibility: visible;


 }


  


 #footer{


   border-top: 1px solid #000000;


   background-color: #C0DB5A;


   color: #000000;


   clear: both;


 }


  


 #footer p{


   padding: 3px;


   font-size: 70%;


 }


  


 #navcontainer{ 


   font-size: 12px;


   width: 100px; 


   margin-left: 5px;


   margin-bottom: 5px;


 }


  


 #navcontainer ul{


   margin-left: 0px;


   padding-left: 0px;


   list-style-type: none;


   font-family: Arial, Helvetica, sans-serif;


 }


  


 #navcontainer a{


   display: block;


   padding: 1px;


   width: 100px;


   background-color: #333333;


   border-bottom: 1px solid #1A1A1A;  


 }


  


 #navcontainer a:link, #navlist a:visited{


   color: #EEE;


   text-decoration: none;


 }


  


 #navcontainer a:hover{


   background-color: #D0EB5A;


   color: #000000;


 }


  


  


 /* clearing


 ----------------------------------------------- */


  


 .clearfix:after {


   /*content: "."; */


   display: block; 


   height: 0; 


   clear: both; 


   visibility: hidden;


 }


  


 * html>body .clearfix {


   display: inline; 


   width: 100%;


 }


  


 * html .clearfix {


   /* Hides from IE-mac \*/


   height: 1%;


   /* End hide from IE-mac */


 }


  

Hi,
I run this Farsi site and yesterday, I posted a few articles and suddenly I noticed my sidebar is out of its place! It is using wordpress and I must say, I did not change any css or did anything with the theme...just did normal posting.
Would you kind people tell me how I can find out where the problem is in these cases?

I checked to see if there is any extra code in the text of the articles recently posted, but found nothing...pure text and few <a> and <img> html tags....
size of the pictures are also moderate as you can see...

I know you can't read the text, but where do you think I should look for the problem?

the site address is (oh i can't post links!!!)
please use 'punez' dot 'nafice' dot 'com' (it's a subdomain)

I'm working on www.wirelessguy.net and I'm trying to add something to my layout.

I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color.

I'm currently using 10% left/right margins to get the material in the middle of the page.

Here is my css for the outerbox:

Code:

div#outerBox
{
	margin-left:-5%;
	margin-right:-5%;
	border-left: 1px dotted red;
	border-right: 1px dotted red;
	width:100%;
	height:100%;
}

When I do this I get the following result: www.wirelessguy.net/index2.php

Any ideas on how to get the box to be made with negative margins?

Hello all - I wondered if anyone can help. I have created a site using html and css and seem to have a problem with the layout - see http://www.mysimplestore.com/

I have used <div>tags to define the different sections of the website in terms of a main container, header, left hand side, main content and a footer.

When I look at the site in Internet Explorer there is gap between the search bar and the start of the text and I would like to reduce this gap. I have tried an number of options without success.

Can anyone help?

Thanks

Techmog

Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this:
A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it.
Not sure if this is the right section, sorry if it isn't.

Thanks.

this should be simple, but i just don't seem to have the hang of css yet

what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css

the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it

maybe just looking at what i have will help more

the HTML

Code:

......
<body>
<div id="all">
<div id="head">
Head Section
</div>
<div id="main">
Bar


<div id="content">Content Goes Here</div>

</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

and the css

Code:

body    {
        background-color:#ff0000;
        }

#head   {
        height:200px;
        }
        
#all   {
        margin-left:3%;
        margin-right:3%;
        background-color:#a0a0a0;
        
        }

#main   {
        background-color:#ff00ff;
        
        }

#side_bar{
        background-color:#99ff99;
        }

#content{
        position:relative;
        float:right;
        width:80%;
        right:10px;
        background-color:#ffffff;
        padding:5px;
        }

#footer {
        height:200px;
        }

those funky colors are so i can see the divs

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?

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

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

Hi Guys,

I'm having a bit of an issue with the layout of my new site.

I have got it working in FF3, ie 6 and 7 using conditional comments, but now I have a problem where FF2 is giving me the same problems as what ie was giving me. As far as I know you can't use conditional comments to differentiate between FF 2 and 3.

I wish I could narrow down the problem further, but I am just completely lost. Please could you guys have a look at http://www.action-figure-world.com/index.html and tell me what I could do to fix the problem.

Thanks a ton!

I developed a site and finally thought about opening it in IE...

everything lays out perfectly in firefox and looks great. i opened it in IE and my sidebar that should be on the right, is showing up under the main content area vs on the right of it..

any suggestions?

you can see the site in development he

rurdesign dot com / OffRoadSolutions/

hi,

I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF.

Im fairly new to CSS so if anyone can spot what i have done wrong that would be great

link to layout here

thanks

Hi There,

For the last year I've been using a standard CSS layout with 2 columns held within a container. The problem is (and I know this is certainly a common problem) that the left column MUST be longer than the right column or else it flows over and following DIV elements in Firefox. Internet Explorer has no problems with the right column being longer than the left.

An example of this is here (to be viewed in Firefox):

hosteltrail.com/colombia/example/


Thus far, I've had to manually increase the length of the left column in the instances when it is shorter than the right by simply adding an empty div box. Below is the setup for the page container.

#columncontainer {
position:relative; margin:auto;width:750px;
}
#rightcolumn {
float:right;width:355px;
}
#leftcolumn {
width:355px;
}


Does anyone know of a solution to the firefox problem other than adding a div box as a fix?

I'm trying to make a 2 column layout, using multiple divs, but no wrapper divs. I cannot use wrappers around either column. This works fine in IE7, but in FireFox the fisrt right column element isn't top aligned; it starts on the same line as the last left column element. Does anyone have any ideas?

Thanks!

.left {
float:left;
clear:left;
margin-left:25px;
width:605px;
text-align:left;
}
.right {
float:right;
clear:right;
margin-right:25px;
width:285px;
}

<div id="one" class="left">left</div>
<div id="two" class="left">left</div>
<div id="three" class="right">right</div>
<div id="four" class="right">right</div>
<div id="five" class="right">right</div>

my goal is this:

left___right
left___right
______right