Topic: CSS alignment issue in IE Pages that link to <a href="https://ozoneasylum.com/backlink?for=23957" title="Pages that link to Topic: CSS alignment issue in IE" rel="nofollow" >Topic: CSS alignment issue in IE\
 
Author Thread
Seymour
Bipolar (III) Inmate

From: K-town, FL, USA
Insane since: Jun 2002

 IP logged posted posted 11-08-2004 18:28 Edit Quote

Hey everyone,
I have been having some trouble with css alignment. In Firefox everything looks fine but in IE6 the alignment is off with my <div id="leftcontent and rightcontent" I have posted the css and html code below. I know that the size of the header is off and i am going to fix that once I get this.

html code:

<HTML>
<HEAD>
<TITLE>Page test</TITLE>
<link rel="stylesheet" type="text/css" href="smithstyle.css" />
</HEAD>

<BODY>
<div id="header" </div>
<div id="leftcontent" </div>
<div id="rightcontent" </div>
</BODY>
</HTML>

css code:


body {
background: url("smithpattern2.gif");
font-family: verdana, sans-serif;
font-size: 10px;
color: #000;
margin: 0;
padding: 0;
}

h3 {
background: #fff;
text-align: left;
margin: 0px;
padding: 0px;
border: 0px;
}

#header
{
margin: 20px 0px 1px 20px;
border: 1px solid #000;
text-align: center;
background: #fff;
width: 562px;
height: 50px;
}

#leftcontent{
position: absolute;
top: 72px;
margin: 5px 0px 0px 20px;
background:#fff;
border:1px solid #000;
height:400px;
width:150px;
}

#rightcontent {
margin: 5px 0px 0px 177px;
background:#fff;
border:1px solid #000;
height:600px;
width:400px;
}
ninmonkeys
Nervous Wreck (II) Inmate

From:
Insane since: May 2004

 IP logged posted posted 11-08-2004 19:24 Edit Quote

If you can provide a link, or describe what's wrong in more detail, we can help you better.

Maybe it's because you use absolute positioning, but don't specify left/right/top? Take a look at this: http://www.positioniseverything.net/articles/top-prop.html

What are you trying to make the page look like? Have you heard of the "float" property? Here's an example: http://glish.com/css/1.asp

A variation of that is used to create this page: http://glish.com/css/home.asp (theres several examples here)

I recently found this website, It has some great tutorials, along with many examples: http://css.maxdesign.com.au/floatutorial/index.htm (navagation lists, how selectors work, float tutorials, etc )
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 11-08-2004 20:31 Edit Quote

Without seeing the page in action, it's hard to say off hand.

I would highly recommend not using absolute positioning, however, as it is very often problematic when used in a 'normal' layout.
Seymour
Bipolar (III) Inmate

From: K-town, FL, USA
Insane since: Jun 2002

 IP logged posted posted 11-09-2004 16:09 Edit Quote

Well i played around with the floats for a little while but i didnt get the results that I wanted and i realized that i had a lot of things in there that i didnt need so i started over and the problem seemed to fix itself. I think that it had something to do with how IE was looking at my borders and margins. There is still like a 1px space in the page that i am not completely happy with but I am going to work on that for a little bit.. Maybe try putting all the id's inside of one main div so that you wont be able to see the line that I am talking about.. And I am sorry for posting without somekinda page to link to. I don't have access to the webspace until this wednesday so i will try to post it then. Thank you for all the help though.


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu