CSS - Ie Doctype/nodoctype Layout Problems

Can anyone tell me why www.thecharliepoweragency.com

wont auto stretch in firefox, it also has layout problems in ie5mac and safari.

This may be a wordpress issue or it may be an issue with my coding that I've modified in my css/settings for the theme, but I can't get the site to display consistently across all three major browsers (Firefox, IE, Chrome). My site: www(.)cinemasight(.)com

For some reason, Firefox is adding a margin (20px maybe?) to the "Content" div. This isn't present in IE and Chrime is adding an image to the background of the "Content" div that isn't present in any of the CSS that I can find.

Similarly, in the upper right hand section, with the Facebook, RSS and Twitter links, the Google Search bar is displaying entirely differently on all three browsers.

Code posted below:

Resolved.
Mods please delete! Thanks.

Hi there

I have done my first CSS based design, it has bassed w3c validation both for the html and css.

It looks exactly how I want in firefox, but in IE7 it is all messed up.

I would be really grateful if someone could take a look and let me know where I am going wrong.

There are two issues in IE7

1. Content seems to go under the footer and lose the correct background.

2. Horizontal navigation menu button look weird.

You can view the page at

82(dot)147(dot)22(dot)10/~ifasouth/

as I have not redireceted DNS yet

Hello all,

Its my first post here so you'll have to bear with my ignorance for code! (im just a lowly designer struggling to learn HTML)

Heres the site im having problems with
http://www.madewithpixels.co.uk

ive been hammering away at this over the last two weeks trying to sort out all sorts of cross browser problems... the aim being to get the whole thing rendering exactly the same on all browsers / all platforms...

Ive sorted the cross browser issues... but am having problems with layout of the page on MAC Internet Explorer 5.2 (everything is a-ok in safari)

The problem is (for those of you without access to a mac) the main navigation links in the top frame. they are aligned perfectly well on my PC in all browsers... but in MAC IE5.2 the alignment is all over the place....

I was originally using <span>'s to set the line spacing / padding of each line, but to ensure cross browser support I had to swith to using <DIV>'s inside a .container style in the CSS.... i am positive that this is where the problem lies as the text lined up perfectly on the MAC before i switched from <SPAN> to <DIV>'s

ANY help at all here would be greatly appreciated... i am soooo close yet so very far away!

thanks

Mike

**edit**
ive just been playing around with this for an hour and found that changing the text size within IE MAC to say 90% and then changing it back to 100% seems to correct the problem.... curious, now im even more baffled than before!

This picture((URL address blocked: See forum rules) ) will show you the page layout at the moment, Here you can see a lot of lines in paint i did.


Edit2: The picture damaged page formatting so here it is:
img206.imageshack.us/img206/107/57260190dy8.png

The Pink lines are what i ideally want to happen, however, my "posts" are overlapping into my right hand navigations (the red dotted lines).

I fixed this with a z-index for now but i really need a solution to this
Id prefer it if i had some kind of Div tag which Held the two content areas seperate (as posts will wrap around the navigations) this is displayed in the orange boxes.

If anyone could offer some help id greatly appreciate it its just annoying me .... and ive only just learnt CSS layouts so i can only fix so much


Code was a bit long, but as i cant Link to it for some reason ill spam it he


Code:

body{
	background-color: #1c1c1c;
	padding: 0; margin:0;
	color: #A2E700;
	}
#topBar{
		height:50px;
		background-color: #666666;
		color: #A2E700;
		overflow: hidden;
		border-bottom: 5px solid #B4E67F;
		background-image: url(topBarBG.png);
		}


.topNav{
	margin: 0; padding: 0;
	height: 100%; 
	background-color: #666666; 	float: left;
}
.topNav img{width: 20px; height: 20px; text-align: center; border: 0; margin: 0;}
.topNav li a{
	float: left; color: #FFFFFF;
	padding: 0px 10px 0px 10px;
	text-align: center;
	border-top: 5px solid #EEEEEE;
	height: 100%;
	text-decoration: none;
	border-right: 1px solid #EEEEEE;
	background-color: #90D900;
}
.topNav li{display: inline;}
.topNav li a:hover{
	background-color: #B4E67F;
}

#IntroBox{
	width: 100%;
	height: 200px;
	background-color: #EEEEEE;
	border-bottom: 2px solid #B4E67F;
}
.IntroHeader{position: absolute; text-indent: 150px; top:85px; font:normal 400% georgia,Verdana,Arial,Sans-serif;}

#contentArea{
	width: 100%;
	
}


#rightIntro{
	float:right;
	width: 380px;
	height: 100%;
	background: url(needles.jpg);
	border-width: 0px 0px 0px 5px;
	border-color: #B4E67F;
	border-style: solid;
	position: relative;
}
#leftIntro{color: #90D900;}


#content{position: relative;}

#MenuRR, #MenuRL{
	z-index: 2;
	position: relative;
	float:right;
	width: 190px;
	height:250px;
	border-width: 0px 0px 5px 1px;
	border-color: #B4E67F;
	border-style: solid;
	text-align: center;
}
#MenuRL{background-color: #EEEEEE;}
#MenuRR{background-color: #EEEEEE;}
#MenuRR img{padding: 5px 0px;}

		#MenuRL ul {
			list-style: none;
			border:0; padding:0; margin:0;
			}
			
		#MenuRL li {
			margin: 0;
			}
		#MenuRL li a {
			display: block; padding: 0 5 0 0;
			background-color: #B4E67F;
			text-decoration: none;
			color: #666666;
			border-bottom: 1px dashed #90D900;
			font: normal 75% georgia,Verdana,Arial,Sans-serif;
			width: 190px; height: 20px;
			text-align: center;
			
			}
		#MenuRL li a:hover{
			background-color: #90D900; letter-spacing: 4px;
			}
	
#MenuRL h4, #MenuRR h4{text-align: center; color: #EEEEEE; background-color: #666666; width: 100%; padding:0; margin: 0;}



.post{z-index: 1; border-bottom: 1px dashed #CCCCCC; position:relative;}
.post h3 {
		margin: 0; padding:0;
        color: #A7B78D;
        font: 24pt fantasy;
}
.postContent{color:#A2E700;}
.postInfo{padding: 0; margin:0;color: #336699; top:-15px; left:10px; position:relative; font: 75% georgia;}

#footer{clear:both; width: 100% height: 25px; background-color: #666666; text-align:center; color: #CCCCCC;}

and HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" title="main" href="style.css" />
	<link rel="alternate stylesheet" type="text/css" href="alternate.css" title="other" />
	<title>test Page 2</title>
</head>
<body>
	<div id="topBar">
		<ul class="topNav">
			<li><a href="#"><img src="home.png"/><br>Home</a></li>
			<li><a href="#"><img src="about.png"/><br>About</a></li>
			<li><a href="#"><img src="email.png"/><br>Contact Us</a></li>
		</ul>
	</div>

	<div id="IntroBox">
		<div id="rightIntro">
		
		</div>
		<div id="leftIntro"> 
		<!-- next tables in here (in div form ;))-->
		<span class="IntroHeader">Welcome!</span>
		<img src="laptop.png" />To the portfolio for XXXXXXXXX, A Bsc Computing student at Portmouth. 
		
		</div>

	</div>
	<!--END ALL TOP STUFF - ABOVE = INTRO, BELOW = Content-->
	
	<div id="contentArea">
		<div id="MenuRR">
		<h4 class="navTitle">:: Linkpad ::</h4>

				<a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=219"><img border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2b80x15.gif"/></a>		
				<br /><img src="w3c_xhtml11_valid.gif" />
				
		<h4 class="navTitle">:: Poll Booth ::</h4>
		Stuff
		</div>
				
		
		<div id="MenuRL">
		<h4 class="navTitle">:: Navigation :: </h4>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Forum</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		</div>
	</div>
	<div id="content">
		
		<div class="post">
		<h3>Automated, Anyone?</h3><span class="postInfo">Posted By: Rich on 01/12/07 in Category: General</span>
		<div class="postContent">
			Welcome to the first proper post on my portfolio, this system will all be automated through a php and SQL backend. At the moment this text is just a placeholder for whats to come. As are half the ****ty graphics that are yet to be replaced!
		</div>
		</div>
		
		<div class="post">
		<h3>Random</h3><span class="postInfo">Posted By: Rich on 29/11/07 in Category: General</span>
		<div class="postContent">
			Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!Blah Blah Blah!
			<br>
			<br>
			lollololo lollololo lollololo lollololo lollololo lollololo 
			lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo 
			lollololo 
			lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo lollololo 
			lollololo lollololo lollololo lollololo lollololo <br><br>
		</div>
		</div>
		
	</div>
	
	<div id="footer">
	<img src="info.png" />Design by XXXXXXXXXXX. Optimized for 1024 x 768 or above resolutions operating in 32bit colour and above.
	</div>
</body>
</html>

Footnotes:
it's not 100% valid XHTML, and i know this... but from experience i know it doesnt have to be 100% valid for the CSS to work fully... as long as its

..

hey guys,

I am learning how to design a website right now, and to get started I take layouts that still exists and replacet them.

I want to create a layout such such as that:

http://www.girlfriendnyc.com

My code looks like that

Code:

#global {
    background: none repeat ,#262626;
    display: block;
    height: 99px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#global .nav-wrapper {
    background-color: #222222;
    height: 99px;
    margin: auto;
    width: 1200px;

}

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="anna.css" />
</head>

<body>
	<div id="global">
		<div class="nav-wrapper">
			<ul>
				<li>
					<h2> Contact us </h2>
				</li>
				<li>
					<h2> Follow us </h2>
				</li>
				<li>
					<h2> Read our blog </h2>
				</li>
			</ul>
			
			<ul>
				<li>
					<h2> Learn about us </h2>
				</li>
				<li>
					<h2> See our portfolio</h2>
				</li>
			</ul>
		</div>
	</div>
<body>
</html>

My Problem is why do these 2 Boxes do not fit together?

greetings and thx in advance

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


 }


  

I am having some problems laying out a center-aligned container with 3 columns within it. I am sure the issue is with float, but I can't figure out how to get around it.

Actually, it does work, but only if the center column is longer than the other two columns. Otherwise, they wrap over the footer and extend outside the container.

Here is the CSS:
Code:

body {
		margin:0px 0px 10px 0px;
		background-image : url(image_name.gif);
		background-repeat:repeat-x;
	    text-align: center;
		}
	A 			{ color: #0066CC; text-decoration: none; font-weight:bold; } 
	A:link		{ color: #0066CC; text-decoration: none; } 
	A:visited	{ color: #0066CC; text-decoration: none; } 
	A:active	{ color: #3399ff;  } 
	A:hover		{ color: #3399ff;  }
	
	h1, h2, h3 {
		margin: 0px;
		padding: 0px;
	}

	
	
#container {
    position: relative;
    margin: 0 auto;
    width: 622px;
    text-align: left;
    padding: 0px;
    border: 1px solid blue;
    }

#topnav {
    width: 622px;
    border: 1px solid black;
    }

#topnav_text {
    width: 622px;
	height: 92px;
    border: 1px solid black;
    }

	
#banner {
    width: 622px;
    border: 1px solid black;
	padding: 10 0 20 0;
    }
	
#footer {
    width: 622px;
    border-top: 1px solid silver;
	padding: 5 0 0 0;
    text-align: left;
    border: 1px solid black;
    }

#homepix {
    width: 235px;
    float: left;
    border: 1px solid green;
	padding: 0 5 0 5;
    }

#homejournal {
    margin-left: 248px;
    width: 215px;
    border: 1px solid red;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

#homeshows {
    float: right;
    width: 135px;
    border: 1px solid blue;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

.homeblog {
 		padding-left:15px;
 		padding-bottom:15px;
 		padding-right:15px;			
	}	

.homeblogbody {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:110%;
 		padding-left:5px;	
 		padding-right:5px;
	
	}


.homeblogbody a,
.homeblogbody a:link,
.homeblogbody a:visited,
.homeblogbody a:active,
.homeblogbody a:hover {
	font-weight: normal;
	text-decoration: underline;
}

}

.title	{ 
	font-family: verdana, arial; 
	font-size: small; 
	color: #003366; 
	text-transform: uppercase;
	font-weight:bold;	
	}			
	

.homeside {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:140%;
 		padding:2px;				
	}	

.side a {
	font-family:verdana, arial, sans-serif;
	font-size:x-small;
 		background:#FFF;
 		line-height:140%;
	}	

And here is a sample page:

Code:

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

    <title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">


<!--#include virtual="/inc/functions.js" -->
  </head>

  <body>
    <div id="container">
	
	  <div id="topnav">
	  Navigation row goes up here
	  </div>
	
   
	  <div id="homepix">
		Generally an image goes here
      </div>
      <!-- end navcol -->

	  <div id="homeshows">
	  <div class="homeside">
        <strong>Upcoming Events Calendar</strong><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		<a href="/shows/">All events...</a>
		</div>
      </div>

      <div id="homejournal">
	  
	  <div class="homeblogbody">
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
	  </div>
	 
      </div>
      <!-- end content div -->

	  
      <div id="footer">
       <!--#include virtual="/inc/footer.inc" -->
      </div>


    </div>
    <!-- end container div -->
  </body>
</html>

hello,
(and excuse me if a similar topic already exists, i just couldn't find anything that matches my problem here,)

i have a CSS layout problem. the site is located he http://raami.maailm.net/ and the CSS file can be found he http://raami.maailm.net/layout/user.css. i have tested it on all sorts of browsers, problems occurred only on some versions of Konqueror and the often problematic Netscape 4. but this is not the question.

the question is as follows. i later used a computer with win98 and ie6 to browse the site, and the layout was not working. actually, it was totally screwed up. as i couldn't reproduce a similar problem elsewhere, there is no screenshot.

if you cannot reproduce the problem, but some of you have at least the same OS and browser, can you post a screenshot? some directions how to solve this, would also be useful.

thanks in forward,
julius

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 everyone,
Please take a look at this site:
http://174.122.106.156/~johanna/php

The layout is fine in FF3.6, Chrome9, IE7 and IE8, but in IE6, the layout is buggered.

Can anyone tell me what's wrong and why?

Also, what is a good way to debug/troubleshoot layout problems in IE6? Currently, I use IETester to "view" pages in different versions of IE, but I can't poke around with the IE Developer Plugin or FireBug and know exactly what's the offending code.

How do you guys find and fix IE6-specific layout issues?

Thanks.

I am pretty much a css newbie, but I get everything that I have learned so far. The only problem I have is understanding how floating for layout works.

I want to create a 3 column layout, with the nav menu on the left, content in the middle, and sidebar on the right. I just can't get them to align where I want them to. How would I go about in doing this?

I have followed many tutorials and tried doing it on my own, and just can't get it right. I've tried various methods such as floating left and right, clearing left and right, padding, added width and negative margins. It's really frustrating.

Can someone please help me out? Thanks in advance!