IE Aligning Issues (Will pay some if you can fix it)

Hey guys,

I am working on a site and the site currently displays perfect in Firefox, however in IE all the content is all not properly aligned. Here is the CSS, if you can fix this, I may throw some cash your way! -

* {
margin: 0 auto; 
padding: 0; 
border: none;
text-decoration: none;
}

body {
	background-color: #191919;
	background-image: url(img/bg.png);
	background-repeat: repeat-x;
}
#container {
	width: auto;
	margin: 0 auto;
}
#contentcontain {
	width: 900px;
	margin: 0 auto;
}
#header {
	height: 129px;
	width: 900px;
	background: url(img/header.png) no-repeat;
}

#footer {
	height: 110px;
	background: url(img/footerbg.gif) #0c0c0c repeat-x;
	width: auto;
	color: #FFFFFF;
	text-align: center;
	font-size: 11px;
	font-family: Verdana;
	clear: both;
}

#footcontain {
	width: 900px;
}

#footerleft {
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana;
	float: left;
	margin-top: 40px;
	margin-left: 35px;
	text-align: left;
}

#footerright{
	float: right;
	margin-top: 5px;
	margin-right: 35px;
}

#footer a:link,a:visited {
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana;
}
#footer a:hover,a:active {
	color: #FFFFFF;
	font-size: 11px;
	font-family: Verdana;
	text-decoration: underline;
}

#contenta {
	float: right;
	width: 200px;
	color: #FFFFFF;
	font-size: 11px;
	font-family: Tahoma, sans-serif;
	padding-top: 30px;
	padding-bottom: 15px;
	padding-left: 50px;
	background: url(img/contentmain.gif) no-repeat top left;
	text-align: left;
}

p {
	padding-bottom: 25px;
}

#content {
	float: left;
	color: #FFFFFF;
	width: 580px;
	padding-bottom: 15px;
	padding-top: 35px;
	padding-left: 35px;
	font-size: 13px;
	font-family: Tahoma, sans-serif;
	background: url(img/contentmain.gif) no-repeat top left;
	line-height: 1.2em;
	text-align: left;
}

#content a:link, #content  a:visited {
		color:#FFFFFF;
		text-decoration: underline;
}
#content a:hover, #content  a:active {
		color:#FFFFFF;
		text-decoration: none;
}


h1 {
	font-size: 18px;
	font-family: Arial;
	font-weight: none;
	padding-bottom: 5px;
	color: #FFFFFF;
}

#posted {
	font-size: 9px;
	font-family: Arial;
	color: #909090;
}

#posted a:link, #posted a:visited {
		color: #909090;
		font-size: 9px;
		font-family: Arial;
		text-decoration: underline;
}
#posted a:hover, #posted a:active {
		color: #909090;
		font-size: 9px;
		font-family: Arial;
		text-decoration: none;
}

ul#navlist {
	padding-top: 14px;
	padding-bottom: 15px;
}

ul#navlist li{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
}
	ul#navlist li a,
	ul#navlist li a:visited{
		font-size: 18px;
		font-family: Arial;
		color: #FFF;
		text-decoration: none;
		font-weight: normal;
		margin: 5 5 5 5px;
	}
	ul#navlist li a:hover{
		border-bottom: 2px solid #008aff;
	}
	
ul#navlists{
	color: #FFFFFF;
}

ul#navlists li{
	
	list-style-image: url(img/bullet.png);
	padding-right: 20px;
}
	ul#navlists li a,
	ul#navlists li a:visited{
		font-size: 11px;
		font-family: Tahoma;
		color: #FFF;
		text-decoration: none;
		font-weight: normal;
	}
	ul#navlists li a:hover{
		text-decoration: underline;
	}

Code (markup):

 

Try this

* {
margin : 0 auto;
padding : 0;
border : none;
text-decoration : none;
}
body {
background-color : #191919;
background-image : url(img/bg.png);
background-repeat : repeat-x;
}
#container {
width : auto;
margin : 0 auto;
}
#contentcontain {
width : 900px;
margin : 0 auto;
}
#header {
height : 129px;
width : 900px;
background : url(img/header.png) no-repeat;
}
#footer {
height : 110px;
background : #0c0c0c url(img/footerbg.gif) repeat-x;
width : auto;
color : #ffffff;
text-align : center;
font-size : 11px;
font-family : Verdana;
clear : both;
}
#footcontain {
width : 900px;
}
#footerleft {
color : #ffffff;
font-size : 11px;
font-family : Verdana;
float : left;
margin-top : 40px;
margin-left : 35px;
text-align : left;
}
#footerright {
float : right;
margin-top : 5px;
margin-right : 35px;
}
#footer a:link, a:visited {
color : #ffffff;
font-size : 11px;
font-family : Verdana;
}
#footer a:hover, a:active {
color : #ffffff;
font-size : 11px;
font-family : Verdana;
text-decoration : underline;
}
#contenta {
float : right;
width : 200px;
color : #ffffff;
font-size : 11px;
font-family : Tahoma, sans-serif;
padding-top : 30px;
padding-bottom : 15px;
padding-left : 50px;
background : url(img/contentmain.gif) no-repeat top left;
text-align : left;
}
p {
padding-bottom : 25px;
}
#content {
float : left;
color : #ffffff;
width : 580px;
padding-bottom : 15px;
padding-top : 35px;
padding-left : 35px;
font-size : 13px;
font-family : Tahoma, sans-serif;
background : url(img/contentmain.gif) no-repeat top left;
line-height : 1.2em;
text-align : left;
}
#content a:link, #content a:visited {
color : #ffffff;
text-decoration : underline;
}
#content a:hover, #content a:active {
color : #ffffff;
text-decoration : none;
}
h1 {
font-size : 18px;
font-family : Arial;
padding-bottom : 5px;
color : #ffffff;
}
#posted {
font-size : 9px;
font-family : Arial;
color : #909090;
}
#posted a:link, #posted a:visited {
color : #909090;
font-size : 9px;
font-family : Arial;
text-decoration : underline;
}
#posted a:hover, #posted a:active {
color : #909090;
font-size : 9px;
font-family : Arial;
text-decoration : none;
}
ul#navlist {
padding-top : 14px;
padding-bottom : 15px;
}
ul#navlist li {
display : inline;
list-style-type : none;
padding-right : 20px;
}
ul#navlist li a, ul#navlist li a:visited {
font-size : 18px;
font-family : Arial;
color : #fff;
text-decoration : none;
font-weight : normal;
}
ul#navlist li a:hover {
border-bottom : 2px solid #008aff;
}
ul#navlists {
color : #ffffff;
}
ul#navlists li {
list-style-image : url(img/bullet.png);
padding-right : 20px;
}
ul#navlists li a, ul#navlists li a:visited {
font-size : 11px;
font-family : Tahoma;
color : #fff;
text-decoration : none;
font-weight : normal;
}
ul#navlists li a:hover {
text-decoration : underline;
}

Code (markup):

Hope it helps you and remember to save yours in case mine doesn't help.

 

its really hard if its only css file you posting... really hard to fix if you cant see the mock up

 

What the url like

 

Here is the HTML -

<html>
<head>
<title>Flexible Gaming</title>
<link rel="stylesheet" type="text/css"  href="style.css" media="screen" />
</head>
<body>

<div id="container">

<div id="header"></div>

<div id="navigation" align="center">
<ul id="navlist">
	<li><a href="#">Home</a></li>
	<li><a href="#">Powerleveling</a></li>
	<li><a href="#">Accounts</a></li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Feedback</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</div>

<div id="contentcontain"><br />
<img src="img/main.png" />
<div id="content">
<a href="#"><h1>Welcome to Flexible Gaming!</h1></a>
<div id="posted">Posted by Tim in <a href="#">General</a> on October 13th 2008</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nec pede. In tincidunt, eros sit amet semper feugiat, diam augue laoreet massa, ac consequat mi nisl non dolor. Pellentesque malesuada turpis nec velit. Nulla malesuada. In ultrices, elit egestas fermentum dictum, est sem semper odio, nec adipiscing purus sem eget sem. Curabitur dictum erat ultrices sapien. Proin vel tellus. Duis est. Ut sollicitudin neque et neque. Vestibulum et urna non nulla aliquam dapibus. Praesent est velit, pulvinar et, consequat non, volutpat quis, odio. Cras gravida mi ac justo. Proin placerat sodales nisi. Fusce lacinia metus ac dolor. Aliquam interdum neque ut leo. Praesent dui. Nam ornare, elit in laoreet tincidunt, dolor diam accumsan erat, non sollicitudin odio diam vitae tortor. Vivamus dui sem, vestibulum nec, dictum at, dictum at, mi. 
</p>
<a href="#"><h1>Flexible Gaming Online!</h1></a>
<div id="posted">Posted by Tim in <a href="#">General</a> on October 12th 2008</div>
<p>
Nullam eu metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Integer mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pretium. Donec ornare orci non urna. Mauris pellentesque. Vivamus vel tortor vel ipsum aliquam porta. Vivamus vitae leo at orci venenatis ullamcorper. Nunc ac lectus sit amet ante congue ultrices. Nulla vulputate nunc id lorem. Maecenas imperdiet justo eu lacus. Praesent porttitor. Proin ac mauris at quam commodo convallis. 
</p>
</div>

<div id="contenta">
<h1>Navigation</h1>
<ul id="navlists">
	<li><a href="#">Home</a></li>
	<li><a href="#">Powerleveling</a></li>
	<li><a href="#">Accounts</a></li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Feedback</a></li>
	<li><a href="#">Contact</a></li>
</ul>
<br /><br />
<h1>Meta</h1>
<ul id="navlists">
	<li><a href="#">Site Admin</a></li>
	<li><a href="#">Register</a></li>
	<li><a href="#">Log In</a></li>
</ul>

</p>
</div>
</div>

<div id="footer">
<div id="footcontain">

<div id="footerleft">Copyright &copy; 2008 <a href="http://www.flexiblegaming.com/">Flexible Gaming</a>. All Rights Reserved.<br />
<font type="Verdana" size="1">Registered names and Trademarks are the copyright<br />
and property of their respective owners.</font></div>

<div id="footerright"><img src="img/footerlogo.gif" /></div>
</div></div>

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

</body>
</html>

Code (markup):

 

Post the url, may be i can help you

 

I posted the HTML and CSS, that is all you need, the site isn't live, so please stop asking for a url.

If someone can fix this I will throw some cash your way.

 

Did my code not help you? If not I will try and fix the html for you as well. There may be something wrong with it.

 

@Guaransheed - Ya, your code did not change anything. Thanks.

Regards,
Carsen K.

 

Well from just a quick look you have this
#footerright{
float: right;
margin-top: 5px;
margin-right: 35px;
}

Some info
http://www.positioniseverything.net/explorer/floatIndent.html

 

Um, the code you posted has no Doctype. So, are we like, supposed to GUESS whether you have one and just didn't post it, or guess that you don't, or guess that you have one but have a space or a character before the doctype?

Since I dunno if you even have one (no doctype= IE goes into Total Retard Mode, or with something in front of it), I'll just tell you to google HTML doctype in case you are unfamiliar with all the terrible IE woes that go with it.

You could make our jobs a lot easier by at least telling us SPECIFICALLY what IE is screwing up. How can we possibly guess what's "wrong" with the site?

It would certainly be a waste of everyone's time to find a css error if the HTML isn't even correct.
Though, if you care, I did see errors-- send both your HTML (after you add a proper doctype) and the css to the validators-- they catch typos and stuff:

	ul#navlist li a:visited{
		font-size: 18px;
		font-family: Arial;
		color: #FFF;
		text-decoration: none;
		font-weight: normal;
		margin: 5 5 5 5px;[b]<----TYPO[/b] pls add units 

Code (markup):

Or this:

<a href="#"><h1>Welcome to Flexible Gaming!</h1></a>

Code (markup):

That one I don't believe is a typo.

Funny, the CSS looks written by someone who generally knows what they're doing, and except for all the br's (lose them) and stuff like above (inlines are like water, blocks are like buckets, and while buckets can hold water, water can't hold a bucket) the HTML in general also looks like someone knew what they were doing.

Template?

 

I know how to code CSS and HTML, don't flame me, Im still learning how to code tableless though, Also I ran it through a validator and fixed a lot of the issues, also I did state in my thread exactly what was wrong, It isn't aligning properly in IE, it is simple as that. I fixed it with adding a simple text-align: center; to the body CSS type and then adding text-align: left; to counter it to the content areas.

Also in general, I know what I am doing, there are a few things here and there that I don't know, hence why I was asking for help. Thanks for flamming!

 

He is true have you posted the whole of your HTML document, because you should add this at the very very very top:

Providing you want your document as XHTML. That should align everything in IE as in Firefox afaik.

Also as further pointers:

- You have specified <font type="Verdana" size="1"> when this can be controlled via the CSS so there is no need for it to be inside the HTML. Try to keep all things presentational to your stylesheet.

- Also as explained above there is no real need for line breaks <br> apart from certain times, as you can simply add padding and margins to elements inside the CSS to create the gaps you need.

I assume you know this already anyway as you have paddings and font styles already assigned in your stylesheet.

 

Just to add to what others have already suggested, I've had alignment issues with IE and fixed it by using an override CSS file, though this can make things annoying if you change your mind a lot

To give an example of how to use this, in style.css we may have this:

Displays correctly in FF, with a 1px error in IE so in iefix.css we have this:

IE loads style.css then makes any changes within iefix.css to what it already has so you don't need to specify everything again in the override

Just an example, sometimes IE may put the div say 150px from top when you've set it to 100px, hope this will be useful!

You've said you've fixed it using text-align, eventually you'll have all this initially when starting a new project (sometimes they're as important as <html></html> etc. for correct pages) so it's a good thing, we probably learn most from mistakes and errors. You could go as far as to put the body's text-align: center; into iefix.css so that you don't need to specify it again, just do whatever you're comfortable with

Scoty

EDIT: I'd suggest aiming to code XHTML 1.0 Strict, this has probably helped me personally learn to code as effiecient as I possibly can, unless you really need more "flexibility"

 

Yes i think he may not have declared a document type so IE is in quirks mode, hence why he's getting the problems. You should only really use conditional statements for known IE problems which usually only occur on IE 6, there shouldn't be many cases where this is required.

 

Actually I have IE8 uses IE7 rules then use the statement to fix the 1px errors (which is what happens in my case a lot), IE8 although supposedly supports standards is much much worse some of my stuff gets completely screwed up lol, and although I probably should, I don't test IE6 or other browsers, as long as I have it working in FF and IE7 then I'm happy

 

Huh? You absolutely did not get flamed.

Sp pointed out that you did not provide a clear problem statement; that something doesn't align could mean any number of things. I noticed one respondent trying to deal with centering, and another trying to deal with float margins. You wasted people's time by not stating the specific way alignment was whacked.

You did not show the community the courtesy of checking your own code for validity. Did you expect us to check your code for you?

Then, there is the DTD thing. Without a complete and proper DTD, IE follows a different set of rules than the modern browsers. X-browser compatibility becomes difficult—damned near impossible—without it. It affects things like margins and box sizes; that could be alignment, right? She told you to look it up. Did you? I think not, from reading your found solution.

None of that, nor this, is a flame by any stretch. It is good advice, meant to help you use html+css, and the community better.

Now, to your solution. IE in quirks mode (no DTD) does not grok margin auto. It wrongly applies text-align to block elements, so {text-align: center;} on the body centers your container in IE/quirks. Then you restore normal left alignment in the container. That's a totally unnecessary hack for IE6+. All you needed was the DTD.

I strongly suggest you read How To Ask Questions The Smart Way. That article was written in 2001, and has been continually maintained. Most professionally oriented forums and lists incorporate it into their rules, or use it as a base. Be sure to read this section.

cheers,

gary

 

It wasn't a flame, but I'll admit, it had some attitude in the first paragraph : ) Sorry, dude.