...

View Full Version : IE skewing my content to the left !?



webdiv
10-26-2010, 08:00 PM
Hi


<div id=#container> displays all of my content</div>

My logo at the head of the browser remains centred but everything within the #container is displaying to the left of the browser window in IE. It's perfectly centred with my logo in FF.

Can anyone suggest how to overcome this ?

Thanks for any suggestions.

MissPhoenix
10-26-2010, 08:08 PM
Hi


<div id=#container> displays all of my content</div>

My logo at the head of the browser remains centred but everything within the #container is displaying to the left of the browser window in IE. It's perfectly centred with my logo in FF.

Can anyone suggest how to overcome this ?

Thanks for any suggestions.

We would need an example of your working code and CSS, please attach! :cool:

webdiv
10-26-2010, 08:47 PM
We would need an example of your working code and CSS, please attach! :cool:


<div id="logo"><img src="img/logo.jpg"> </div>

<div id="nav">
<ul>
<li><a href="0">0</a></li>
<li><a href="0">0</a></li>
<li><a href="0">0</a></li>
<li><a href="0">0</a></li>
<li><a href="0">0</a></li>
<li><a href="0">0</a></li>
<li><a href="0">0</a></li>
</ul></div>

<div id="indexcontainer">
<p><img src="img/1.JPG" width="300" height="450">
<p>content</p>
<p>content </p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>

<p>Thank you for visiting<a href="mailto:..."><font size="2">Contact
me</font></a></p>
</div>


body {
color:#BDBDBD;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}

#logo {
position: relative;
padding-top: 10px;
margin-left: 175px;
}

#indexcontainer {
background-color: #424242;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 20px;
padding-left: 20px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 500px;
text-color: gray;
}

a{
text-decoration: none;
}
a:link {
color:white;
background color: gray;
}

a:visited {
color: white;
}

a:hover {
color: white;
background-color: #c0c0c0;
}

#indexcontainer img {
float: left;
margin-top: 5px;
margin-right: 20px;
margin-left: 5px;
}

#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}

#nav ul {
list-style: none;
margin-top: 5px;
margin-left: 370px;
margin-bottom: 10px;
padding: 0;
padding-top: 4px;
}

#nav li {
display: inline;
}

#nav a:link, #nav a:visited {
padding: 3px 10px 2px 10px;
color: #white;
background-color: #424242;
text-decoration: none;
border: 1px solid #BDBDBD;
}

#nav a:hover {
color: #FFFFFF;
background-color: #c0c0c0;
}

MissPhoenix
10-27-2010, 01:14 PM
The float:left might be causing it, for all images if you apply align=left it will align to the left where the text wraps around it. :) If that's the look you're looking for I would replace float with align. :)

SB65
10-27-2010, 03:06 PM
webdiv, do you have a valid doctype on your page?

webdiv
10-27-2010, 05:47 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I thought of the 'float' but if I change it to 'align' all it does is stop the text wrapping to the image and I need that. Also, changing it to 'align' changes nothing in IE as the #container is till displaying to the left of the browser window. hhmmmmm !

teedoff
10-27-2010, 06:05 PM
Please post all of your code or provide a link to your page.

webdiv
10-27-2010, 06:28 PM
Please post all of your code or provide a link to your page.
All of the code is at the top ?

SB65
10-27-2010, 06:34 PM
No, it isn't which is why I asked about the doctype. If I paste your code into a document with a correct doctype etc then #indexcontainer is centred for me in IE7. So there must be something else wrong.

A link to your page would be much better, but if you can't do this then post the entire html inclusing the head and the doctype.

Changing float to align will definitely fail as align is not a css property. There's no reason why float shouldn't work.

teedoff
10-27-2010, 06:35 PM
All of the code is at the top ?

Then you are missing some code. I dont see any html opening or closing tags. No opening or closing body and head tags. All you posted was code for two divs and their content and the css.


No, it isn't which is why I asked about the doctype. If I paste your code into a document with a correct doctype etc then #imagecontainer is centred for me in IE7. So there must be something else wrong.

A link to your page would be much better, but if you can't do this then post the entire html inclusing the head and the doctype.

Changing float to align will definitely fail as align is not a css property. There's no reason why float shouldn't work.

Beat me to it! lol

webdiv
10-27-2010, 07:21 PM
Add this below to the code at the top; then you have all of the code with the exception of
</body> </html> at the bottom of the doc'.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body background="img/bckgrnd.jpg" >

I'm afraid I do not have the files on a server as they are still in design so can't give you a link to them.

Thanks for your help. I'm a beginner to this.

jasonpc1
10-27-2010, 07:34 PM
so you are saying that you can view this in a browser but it is not uploaded to the internet..

if so, please view this in your browser where you are seeing the problems, and view the source code from the browser and copy the 'entire' source code to your next reply.

this will enable one of us to better help and snippets of code in multiple posts is very confusing to most of us.

SB65
10-27-2010, 07:45 PM
And are you saying that with that code in IE that the div #indexcontainer is not centred on the page? It is for me in IE7.

teedoff
10-27-2010, 07:52 PM
One thing you should do, and religiously, is validate your code. You have a few errors that, if fixed, might resolve your problem. You can copy and paste your source code here (http://validator.w3.org) and click check to see the errors.

webdiv
10-27-2010, 07:52 PM
And are you saying that with that code in IE that the div #indexcontainer is not centred on the page? It is for me in IE7.
Yes. The actual container with all of its content is off to the left leaving the logo centred at the top. All of the actual content inside the div remains where it should be. It is the same with all of my x8 pages.I'm not sure what version of IE it is bit it's the one that came with Win7 Home Premium which I have only recently bought.

SB65
10-27-2010, 07:59 PM
Ah sheesh. Change:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to:


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

I'd included the complete doctype in my test page which is why it worked for me. The validator never picks up this which I always think is odd - I assume because it's a transitional doctype.

jasonpc1
10-27-2010, 08:07 PM
Yes. The actual container with all of its content is off to the left leaving the logo centred at the top. All of the actual content inside the div remains where it should be. It is the same with all of my x8 pages.I'm not sure what version of IE it is bit it's the one that came with Win7 Home Premium which I have only recently bought.

If you provide the complete source code as many have asked then this issue can be solved a lot quicker.

Submitted the code to http://validator.w3.org/ as
teedoff suggested will tell you what may be causing the problems you are having. But posting you code here may get the answers you are looking for.

webdiv
10-27-2010, 08:09 PM
Ah sheesh. Change:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to:


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


SB65 You're a genius BINGO ! So what's that all about ?

Thanks !

SB65
10-27-2010, 08:10 PM
Read this (http://www.alistapart.com/articles/doctype/). IE doesn't play nice without a valid and complete doctype.

Or, to be more strictly accurate, IE doesn't play nice. The absence of a valid and complete doctype makes it worse.:D

teedoff
10-27-2010, 08:49 PM
lol I suggested he validate as there were issues with his doctype....anyway, glad you got it working. Again, you should always validate your code as a FIRST step to debugging problems.

webdiv
10-27-2010, 09:01 PM
Thanks again for all of the input and links guys. Brilliant. I'll validate in future also.

Away from my computer now for a while.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum