CSS - Css Broken In Ie6,7 & 8 But Perfect In All Other Browsers...

Hi,
I'm looking for code that will display a ul with nested uls as a dropdown. Furthermore, the links and dropdowns should center in the width of the nav.
as I add more top level links, the set should expand both left and right.
Right now, I can either make the nav align left, or justify the top level ul so the links fill the nav. I can't seem to make the leap to centered links though.
You can see what I'm talking about he
lipsitzponterio9[dot]com
Notice how the home link is left aligned, but contact us has a little space to the right.
Can anyone help? Thanks!

Hi all,

I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html
and my css file is here http://www.studioflow.net/sfglobal.css
Do I need to just abandon my quest for pixel perfect alignment?

Thanks,

alan

Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing.


http://mp3realm.org/new/index.php (First one)
http://mp3realm.org/new/search.php (search page)
http://mp3realm.org/new/default.css (CSS)


Thanks.

Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue.

The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up.

If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is:
http://www.favillephoto.com/new website/index.html

I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there.

Thanks in advance for your help.


This is the css file for my index page:
Code:

body {
	padding: 0;
	background: #ffffff url('images/img01.jpg');
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: normal;
	color: #AD1112;
}

h1 {
	font-size: 250%;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 140%;
	font-weight: bold;
}

h4 {
	font-size: 100%;
	font-weight: bold;
}

p, ol, ul {
	line-height: 180%;
}

p {
}

ol {
}

ul {
}

blockquote {
	margin: 0;
	padding-left: 20px;
	font-style: italic;
}

blockquote * {
	line-height: normal;
}

a {
	color: #1267bc;
}

a:hover {
	color: #999999;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 10px 15px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 15px;
}

hr {
	display: none;
}

/* Header */

#header {
	width: 1030px;
	height: 260px;
	margin: 0 auto;
	background: url('images/img02.jpg') no-repeat right top;
}


/* Menu */

#menu {
	float: right;
	width: 1030px;
	height: 40px;
	padding: 220px 0 0 0;
}

#menu a {
	display: block;
	height: 32px;
	background: url('images/img06.gif') no-repeat;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}

#menu ul {
	width: 1026px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: #AD1011 url('images/img05.jpg') repeat-x;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	list-style-type:none
}

#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#menu li a:hover
{	color: #123456;}

#menu div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #000000;
}

#menu div a
{	position: relative;
	display: block;
	margin: 0;
	padding: 3px 10px;
	width: auto;
	height: 20px;
	white-space: nowrap;
	text-align: left;
	background: #6c91c5;
	color: #ffffff;}
	
#menu div a:hover
{	color: #123456;}


/* Page */

#page {
	width: 1030px;
	margin: 0 auto;
}

/* Content */

#content {
	float: left;
	width: 760px;
	height: 2040px;
	padding: 20px;
	background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 220px;
	height: 2070px;
	padding-top: 10px;
	padding-right: 10px;
	background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}

#sidebar a {
	color: #dddddd;
}

#sidebar a:hover {
	color: #999999;
	text-decoration: underline;
}

#sidebar ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	
	font-size: 92%;
}

#sidebar ul li {
	background: url('images/img13.gif') no-repeat 0px 12px;
	border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}

#sidebar ul li.first {
	border: none;
}

#sidebar ul li h2 {
	margin: 0;
	font-size: 100%;
}

#sidebar ul li h3 {
	margin: 0;
	font-size: 92%;
}

#sidebar ul li p {
	color: #dddddd;
	margin: 0;
}

#sidebar p {
	color: #dddddd;
	margin: 0;
	font-size: 92%;
}

.boxed {
	margin-bottom: 10px;
	background: #113c5c url('images/img10.gif') no-repeat left bottom;
}

.boxed .title {
	height: 30px;
	margin: 0;
	background: #000000 url('images/img08.jpg') no-repeat;
	font-size: 16px;
	font-weight: bold;
	color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}

.boxed .content {
	padding: 15px;
	background: url('images/img09.gif') repeat-x;
}


.boxedPrintoftheMonth {
	margin-left: -790px;
	background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}

.boxedPrintoftheMonth .title {
	height: 30px;
	margin: 0;
	background: #000000 url('images/img08PotM.jpg') no-repeat;
	font-size: 16px;
	font-weight: bold;
	color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}

.boxedPrintoftheMonth .content {
	padding: 15px;
	background: url('images/img09.gif') repeat-x;
}

/* Footer */

#footer p {
	margin: 0;
	line-height: normal;
	font-size: 85%;
	color: #000000;
}

#footer a {
	color: #000000;
}

#footer a:hover {
	color: #666666;
}

This is the css for the rest of my pages:
Code:

body {
	padding: 0;
	background: #ffffff url('images/img01.jpg');
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: normal;
	color: #AD1112;
}

h1 {
	font-size: 250%;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 140%;
	font-weight: bold;
}

h4 {
	font-size: 100%;
	font-weight: bold;
}

p, ol, ul {
	line-height: 180%;
}

p {
}

ol {
}

ul {
}

blockquote {
	margin: 0;
	padding-left: 20px;
	font-style: italic;
}

blockquote * {
	line-height: normal;
}

a {
	color: #1267bc;
}

a:hover {
	color: #999999;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 10px 15px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 15px;
}

img.left1 {
	float: left;
	margin: 0 70px 0 70px;
}

img.right1 {
	float: right;
	margin: 0 70px 0 70px;
}

img.left2 {
	float: left;
	margin: 20px 100px 20px 100px;
}

img.right2 {
	float: right;
	margin: 30px 120px 20px 120px;
}

img.left3 {
	float: left;
	margin: 0 110px 0 110px;
}

img.right3 {
	float: right;
	margin: 20px 60px 0 60px;
}

hr {
	display: none;
}

/* Header */

#header {
	width: 1030px;
	height: 260px;
	margin: 0 auto;
	background: url('images/img02.jpg') no-repeat right top;
}


/* Menu */

#menu {
	float: right;
	width: 1030px;
	height: 40px;
	padding: 220px 0 0 0;
}

#menu a {
	display: block;
	height: 32px;
	background: url('images/img06.gif') no-repeat;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}

#menu ul {
	width: 1026px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: #AD1011 url('images/img05.jpg') repeat-x;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	list-style-type:none
}

#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#menu li a:hover
{	color: #123456;}

#menu div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #000000;
}

#menu div a
{	position: relative;
	display: block;
	margin: 0;
	padding: 3px 10px;
	width: auto;
	height: 20px;
	white-space: nowrap;
	text-align: left;
	background: #6c91c5;
	color: #ffffff;}
	
#menu div a:hover
{	color: #123456;}


/* Page */

#page {
	width: 1030px;
	margin: 0 auto;
}

/* Content */

#content {
	float: left;
	width: 990px;
	padding: 20px;
	background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}

/* Footer */

#footer p {
	margin: 0;
	line-height: normal;
	font-size: 85%;
	color: #000000;
}

#footer a {
	color: #000000;
}

#footer a:hover {
	color: #666666;
}

<body>
<div id="wrapper" style=" vertical-align:middle;">
<div id="border-top">
<div id="border-left">
<div id="border-right">
<div id="border-bottom"> </div>
</div>
</div>
</div>
</div>
</body>



body {
background-color:#5E362C;
margin: 0 0 0 0;
}

#wrapper {
width: 828px;
height: 558px;
position:relative;
left: 50%;
margin-left:-414px;
}

#border-top {
background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg);
background-position:top left;
background-repeat:no-repeat;
width: 828px;
height: 558px;
}

#border-left {
background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg);
background-position:top left;
background-repeat:no-repeat;
width: 828px;
height: 558px;
margin-top:20px;
}

#border-right {
background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg);
background-position:top right;
background-repeat:repeat-y;
width: 828px;
height: 557px;
margin-top:-20px;
margin-bottom:20px;
}

#border-bottom {
background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg);
background-position:bottom right;
background-repeat:no-repeat;
width: 828px;
height: 558px;
margin-top:-1px;
}




Thanks for the help !

Hi,

I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration

I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time.

I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers.

The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns.

The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded?

Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling.

http://www.acecards.com

Code:

body {
	background-color: #999999;
	margin-left: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
}
	#container {
		width: 750px; /* For browsers with no escapes */
		\width: 770px; /* For IE5/Win */
		w\idth: 750px; /* For good browsers */
		border: 1px solid gray;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		background-color: #000000;
		}
			#banner {
			width: 750px; /* For browsers with no escapes */
			\width: 750px; /* For IE5/Win */
			w\idth: 750px; /* For good browsers */
			height: 251px;
			background-repeat: no-repeat;
			clear: both;
			}
			#mainarea {
			clear: both;
			width: 750px; /* For browsers with no escapes */
			\width: 750px; /* For IE5/Win */
			w\idth: 750px; /* For good browsers */
			background: url(images/fauxcolumns.gif) repeat-y;
			display: table;
			}
			#sidebar {
			width: 179px; /* For browsers with no escapes */
			\width: 179px; /* For IE5/Win */
			w\idth: 179px; /* For good browsers */
			background-color: #993300;
			float: left;
 			}
			#content {
			margin-top: 0px;
			float: right;
			background-color: #FFFFFF;
			width: 570px;  /*For browsers with no escapes */
			\width: 570px;  /*For IE5/Win*/ 
			w\idth: 570px;  /*For good browsers */
			}
			#footer {
			width: 740px; /* For browsers with no escapes */
			\width: 750px; /* For IE5/Win */
			w\idth: 740px; /* For good browsers */
			padding: 5px;
			clear: both;
			}
.FooterText {	
	font-family: Verdana;
	color: #FFFFFF;
	font-size: 10px;
	text-align: right;
}
.Bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 11px;
	line-height: 17px;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 2px;
	padding-bottom: 2px;
}
.Bodylink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #499EEE;
	font-size: 12px;
	line-height: 17px;
	font-weight: bold;
	text-align: left;
	padding-top: 2px;
	padding-bottom: 2px;
}
.Bodyhighlight {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #993300;
	font-size: 12px;
	line-height: 17px;
	font-weight: bold;
	text-align: left;
	padding-top: 2px;
	padding-bottom: 2px;
}
.SideBarBanner {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	line-height:inherit;
	padding-top: 5px;
	padding-bottom: 5px;
}
.SideBarLink {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SideBarHeadingTop {
	background-color: #FF9B6A;
	height: auto;
	width: 169px; /* For browsers with no escapes */
	\width: 179px; /* For IE5/Win */
	w\idth: 169px; /* For good browsers */
	padding: 5px;
	color: #000000;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-bottom:thin solid;
	border-bottom-color:#D74600;
}
.SideBarHeading {
	background-color: #FF9B6A;
	height: auto;
	width: 169px; /* For browsers with no escapes */
	\width: 179px; /* For IE5/Win */
	w\idth: 169px; /* For good browsers */
	padding: 5px;
	color: #000000;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-top:thick solid;
	border-top-color:#000000;
	border-bottom:thin solid;
	border-bottom-color:#D74600;
}
.SideBarMenuBlock {
	background-image: url(images/button.gif);
	background-repeat: no-repeat;
	height: 26px;
	margin-top: 4px;
	margin-bottom: 0px;
	padding-left: 20px;
	margin-left: 9px;
	margin-right: 9px;
	width: 159px; /* For browsers with no escapes */
	\width: 179px; /* For IE5/Win */
	w\idth: 159px; /* For good browsers */
	text-align: left;
	vertical-align: middle;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
a:active {
	color: #000000;
	text-decoration: underline;
}
.Heading {
	width: 520px; /* For browsers with no escapes */
	\width: 570px; /* For IE5/Win */
	w\idth: 520px; /* For good browsers */
	padding-left: 40px;
	padding-right: 10px;
	padding-top: 15px;
	padding-bottom: 10px;
	background-image: url(images/aceofspades.gif);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: left;
	vertical-align: top;
	font-weight: bold;
	font-style: italic;
}
img {
border: none;
}

I am working on a template that looks great in IE and Chrome but Firefox makes it look really ugly so I was curious if anyone would mind looking at my site and telling what they think I need. centextechs is the site

Any help is greatly appreciated

Randy

Hi everyone,

Help please. I'm relatively new to CSS. I've coded the following application form and when opened in Chrome and IE9 the formatting and layout is shown as expected. IE8 doesnt seem as friendly and the 2nd page 'Questionnaire' has broken borders.

Can anyone help?

Here is the CSS behind the 'Job Application Form'

@charset "UTF-8";
/* CSS Document */
body{
background-image: url(xxxxxx);
background-repeat: no-repeat;
background-position: top left;
background-color: #CBCBCB}
form{
background-color:#FFFFFF;
width:800px;
margin:90px auto;
border:2px solid #A9A9A9;
padding: 20px;
}
#header_content
* {font-family:Arial,Helvetica,sans-serif!important}
#content {margin-bottom:20px;}
#sectionCandInf,
.sectionContent,
#content div *{background-color:#FFF}
#aq523 {width:650px;}
#aq515 {width:650px;}
#aq516 {width:650px;}
#aq517 {width:650px;}
#aq519 {width:650px;}
#aq522 {width:650px;}
#aq524 {width:650px;}
#aq521 {width:650px;}
#aq525 {width:650px;}
#aq518 {width:650px;}
#aq520 {width:650px;}
#aq2922 {width:650px;margin-bottom:10px;}
#aq2924 {width:650px;margin-bottom:10px;}
#aq2916 {width:650px;margin-bottom:10px;}
#aq2917 {width:650px;margin-bottom:10px;}
#aq2918 {width:650px;margin-bottom:10px;}
#aq2919 {width:650px;margin-bottom:10px;}
#aq2920 {width:650px;margin-bottom:10px;}
#aq2923 {width:650px;margin-bottom:10px;}
#aq2926 {width:650px;margin-bottom:10px;}
#aq2925 {width:650px;margin-bottom:10px;}
#chpLoginSection{margin-top:20px; border:2px dotted #0092B5}
#chpCreateSection {margin-top:20px;border:2px dotted #0092B5}
h5 {
font-size: 110%;
font-weight: bold;
margin: 0;
padding: 20 20px;
background-color: #fff!important;
color: #FFFFFF;
width: 25em;
float: left;
color: #000;
}
#reqstar{margin-bottom: 20px; margin-right: 80px}
.section fieldset {
clear: left;
width:100%;
padding: 5px 0;
color: inherit;
background-color: #CCCCFF;
border:1px solid #A9A9A9;
}
#sectionDocument {padding-right:0px;padding-top:8px;margin-left: 30px;margin-right:30px; border:1px solid #A9A9A9}}
#sectionDocument,
.sectionContent
#sectionDocument select, #sectionDocument input {margin-bottom:10px;}
#sectionDocument #aq2822, #sectionDocument #aq2824 {width:400px;}
#sectionDocument #aq2822 label, #sectionDocument #aq2824 label {width:40px;}
.submit input, #footersubmitbav div input,
input.chpbutton, input.footerbutton {font-size:12px;
font-family:Arial,Helvetica,sans-serif;
border: 1px solid #7F7F7F!important;
background-color:#547EA8!important;
text-align:center; cursorointer; text-decoration:bold !important; font-weight:normal; color:#ffffff;padding:4px 6px 4px 6px !important;
}
/*Job summary headers*/
.headerlabel1, .headerlabel2, .headerlabel3 {font-weight:bold;color:#A32425;}
.headerlabel1, .headerlabel2 {padding-left:0px;}
.headervalue1, .headervalue2, .headervalue3, .headerlabel1, .headerlabel2, .headerlabel3 {font-size: 14px;}
.headerlabel3 {padding-left:0px;}
.bodyAppProc h4 {font-size: 17px; font-weight:bold; color:#A32425;}
.bodyAppProc h5, .bodyAppProc h6 {font-size: 14px; font-weight:bold;color:#A32425;}
.bodyAppProc input, .bodyAppProc textarea, .bodyAppProc select{font-size: 11px;}
#saveApp {margin-top:20px; margin-bottom: 20px;}
#step_navigation_content,
#content h4{margin-left:00px;}
#headertable{padding: 10px 0px 10px 0px; line-height:1.7em; }
.section h5{padding-left:0;}
#chpCreateSection {border-left:1px dotted #C8B08BF!important}
#step1input input, #step2input input,#step2input input,#step3input input, a.currentStep {font-size: 14px!important}
/* migration 28B -> 28C */
#sMobilePhoneNumber {width:220px;}
#tem {border:none;}
#sectionWelcome {background-color: #fff}
/*MedusaTech Additions*/
#aq6783 {margin-bottom:10px}
#aq6696 {margin-bottom:10px}
#aq6700 {margin-bottom:10px}
#navbarValue a, #navbarValue input {font-size:14px;color:#4F6DB6;text-decoration:none;padding-top:1px;}
#navbarValue a:hover, #navbarValue input:hover {text-decoration:underline;}
#navbarValue .disabledLink a, #navbarValue .disabledLink input {color:#000000;}
#navbarValue .disabledLink a:hover, #navbarValue .disabledLink input:hover {text-decoration:none;}
#navbarLabel {font-size:14px;}
.navbarLine {padding:0;margin:0;}
#sectionAttachContent
{border: 1px solid #A9A9A9;}
.label {width:242px;}
#sectionAttachContent .value {}

Hi all,

I have a small problem with the new design for my website and after trying things for like 30 minuts and asking some other people I decided to give up and try here. It's probably going to be something very simple but I just can't figure out what

Website: URL
CSS: URL
Explaination pictu URL
The first part is how it shows in Internet Explorer, the second shows Firefox and the third how it is supposed to be.

I hope somebody can help me with this.

Thx in advance.

Greetings,

Sjoerd

Hey,

I had a website which ran for about an year on most browsers with no probs. Now when Firefox v4 struck my site css is broken and im struggling to make it work on all sites properly.

I know its shameless of me to ask to look trough the whole site but i just cant pick out where the problem exactly lies.

the site is www . alterum . ee

in firefox v4 main menu just breaks and seems like drags the content-wrapper with it. other browsers work fine atm.

i would really appriciate if someone heped me with that problem. Or ill have to redo whole css from scratch which would be a bummer.

Hi guys.

For some reason, this page's layout is broken.. I'm suspecting that it's a problem with css.

Page is
mtvicdojo.org.nz/2008/03/20/thanks/

Here is my css.
mtvicdojo.org.nz/wp-content/themes/theme_mtvicdojo/style (dot) css

Any ideas why it is broken..?

Thanks.

For some reason my sidebar keeps breaking the wrapper and floating under my content on my blog page.

universitysquarecondos. com / owners-2 / updates/

Sorry about wack url but it wont let me post urls since it thinks I may be spamming or something...

Note that this only happens in IE, not in Mozilla (of course... )

Any ideas?

Thanks for helping a noob get his sealegs,

Reid

I'm having a very hard time getting a particular website to look correctly in IE6. It looks perfect in Safar, Firefox, and IE7. But of course, IE6 can't seem to figure out what I want done.

If you go to www . sixpak . org/~chafer2002/tactical/index.php (remove the spaces between www and sixpak and sixpak and org), you'll see the page. The page is laid out with a branding area, navigation area, a main content <div>...and within the main content <div>'s there are three "sub" <divs>...a left content, middle content (for the bulk of the content), and a right content. For some reason, the right content <div> "breaks" the middle content <div> and is pushed off to the left.

I can't figure out how to get it back where it belongs...on the left side of the page. You can view the same link in Firefox. It looks fine.

I'd appreciate any ideas on how to get this page to look right. Thanks!

Russell

This is a first I've seen my problem and I'm hoping it's something silly stupid.

check out the site, code is listed below as well: http://bigoak.kjellandrew.com

Ultimately I'm trying to float the sidebar to the left of the main content.

First thing I notice is that the banner image has excess margin that is anywhere in the CSS. I've tried everything to eliminate that spacing and am starting to think it's related to my other problem.

Second is that when I try to float the side bar (float: left on content and float: left on sidebar) it kills the div #body prematurely. You can tell cause the background color disappears and using firebug proves it showing that the body div is shortened. I've tried specifying heights (min height does extend it, but ultimately not a fix). I've made sure all of my divs are closed in proper order. And I've checked for random ", ', }, or / in my CSS and html and it's totally clean. It validates just fine too.

HELP
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Big Oak - Home</title>

	<style type="text/css">
		* { margin: 0; padding: 0;}
		a img {
			border: none;
		}
		.clear {
			clear: both;
		}
		body {
			background: url('_img/outside_bg.png') no-repeat top center #59858b;
		}
		#body {
			margin: 0 auto;
			margin-top: 50px;
			background-color: #fff;
			width: 950px;
			height: 100%;
		}
		#header {
			background: url('_img/header_wood.jpg') no-repeat top;
			width: 950px;
			height: 75px;
		}
			#header h1 {
				text-indent: -9000px;
				font-size: 0;
			}
			#header img.logo {
				float: left;
				position: relative;
				top: -50px;
			}
			#header img.banner {
				margin: 0px auto;
			}
			#header ul {
				float: left;
				list-style: none;
				padding-top: 40px;
				width: 480px;
			}
				#header li {
					display: inline;
					margin: 10px;
					font-family: helvetica;
					font-weight: normal;
					font-size: 1em;
				}
				#header li a:link, 
				#header li a:active {
					text-decoration: none;
					color: #231f20;
				}
				
				#header li a:hover,
				#header li a:active {
					border-bottom: 2px solid #444;
				}
		#header form {
			float: left;
			margin: 30px 5px 0 0;
			display: inline;
		}

				.searchbox {
					height: 1.5em;
					font-size: 1em;
					padding: 2px 2px 2px 5px;
					width: 140px;
					vertical-align: middle;
					border: 1px solid #ccc;
				}
				.searchsubmit {
					vertical-align: middle;
				}
		#social_links img {
			float: left;
			padding: 30px 5px 0 0;
		}
		
	#container {
		width: 890px;
		margin: 0px auto;
	}
	#content {
		width: 560px;
		float: left;
	}
		
		#sidebar {
			width: 270px;
			margin-left: 25px;
		}
	</style>

</head>
<body>
	<div id="body">
		<div id="header">
			<h1>Big Oak</h1>
			<a href="/"><img src="_img/bigoak_logo.png" alt="big oak logo" class="logo" height="119" width="142"></a>
	
			<ul class="nav">
				<li><a href="#">about</a></li>
				<li><a href="#">speaking</a></li>
				<li><a href="#">a:life</a></li>
				<li><a href="#">go events</a></li>
				<li><a href="#">contact</a></li>
			</ul> <!-- ends main navigation list -->
			
			<form method="get" action="">
				<p><input type="text" class="searchbox">
				<input type="image" src="_img/go.png" class="searchsubmit"></p>
			</form>
			
			<div id="social_links">
				<a href="#"><img src="_img/facebook.png" alt="facebook"></a>
				<a href="#"><img src="_img/twitter.png" alt="twitter"></a>
				<a href="#"><img src="_img/rss.png" alt="rss"></a>
			</div> <!-- ends social links div -->
						
		</div> <!-- ends header div -->
		<div id="container">
			<img src="_img/header_img.jpg" alt="banner" class="banner" width="890" height="270">
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
			</div> <!-- ends content area -->
			<div id="sidebar">
				<h3>Cool Sidebar</h3>
					<ul>
						<li>item 1</li>
						<li>item 2</li>
					</ul>
			</div><!-- ends sidebar div -->
		</div> <!-- ends container div for main area of content -->
		
		
	</div>
</body>
</html>