Alignment Issue in I.E. - New to CSS

1

1995 Cobra

Hello all, brand new to CSS thanks to some help from some folks in this
group so I'm likely making a rookie mistake. If you go to this link
http://www.pamschams.com/pc_beta2.asp there are essentially 3 columns
to make up the design. I'm posting my style sheet below. The site views
fine in Firefox and Safari, but I.E. puts the center column below the
left and right column. Any ideas? :

/* CSS Document */

body, input, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
background-color: white;
margin: 0px;}

a:link {
color: #0066CC;
text-decoration: none;}

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

#holderback {
width: 100%;
background-color: #ff3399;
text-align: center;
padding: 0px;}

#holder {
margin-left: auto;
margin-right: auto;
width: 900px;
margin-top: 0px;
margin-bottom: 0px;}

#header {
width: 800px;
margin-top: 0px;
margin-left: 35px;
margin-right: 35px;
padding: 0px 15px;
border: 0px;
background-color: white;
height: 550px;
text-align: center;
margin-bottom: 0px;}

#left {
float: left;
background-image: url(images/index/leftbar.jpg);
background-repeat: no-repeat;
background-position: top right;
height: 550px;
margin-left: 0px;
width: 35px;
margin-top: 0px;
margin-bottom: 0px;}

#right {
float: right;
background-image: url(images/index/rightbar.jpg);
background-repeat: no-repeat;
background-position: top left;
height: 550px;
margin-right: 0px;
width: 35px;
margin-top: 0px;
margin-bottom: 0px;}

h3 {
font-size: 125%;
color:#FF3399;
text-align: left;}

blockquote {
text-align: left;}

#footerholder {
width: 100%;
margin-top: 0px;
padding-top: 10px;
text-align: center;
background-color: white;}

#footer {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
border: 0px;
text-align: center;}

Thank you.
 
B

BootNic

1995 Cobra said:
news: (e-mail address removed)
Hello all, brand new to CSS thanks to some help from some folks in
this group so I'm likely making a rookie mistake. If you go to this
link http://www.pamschams.com/pc_beta2.asp there are essentially 3
columns to make up the design. I'm posting my style sheet below. The
site views fine in Firefox and Safari, but I.E. puts the center
column below the left and right column. Any ideas? :


[snip]

http://www.positioniseverything.net/explorer/threepxtest.html

Your #header is 6px too wide for IE. (3px X 2)

Possible work around for it:

<link href="pc_style_2.css" rel="stylesheet" type="text/css">

<!--[if lte IE 6]>
<link href="pc_style_2IE.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>

===
pc_style_2IE.css content

#header{
width:794px;
}
#right{
position: relative;
top:0;
right:3px;
}
#left{
position: relative;
top:0;
left:3px;
}

--
BootNic Friday, September 08, 2006 9:49 AM

All men dream, but not equally. Those who dream by night in the dusty
recesses of their minds, wake in the day to find that it was vanity:
but the dreamers of the day are dangerous men, for they may act on
their dreams with open eyes, to make them possible.
*Thomas Edward Lawrence (of Arabia)*
 
1

1995 Cobra

BootNic said:
news: (e-mail address removed)
Hello all, brand new to CSS thanks to some help from some folks in
this group so I'm likely making a rookie mistake. If you go to this
link http://www.pamschams.com/pc_beta2.asp there are essentially 3
columns to make up the design. I'm posting my style sheet below. The
site views fine in Firefox and Safari, but I.E. puts the center
column below the left and right column. Any ideas? :


[snip]

http://www.positioniseverything.net/explorer/threepxtest.html

Your #header is 6px too wide for IE. (3px X 2)

Possible work around for it:

<link href="pc_style_2.css" rel="stylesheet" type="text/css">

<!--[if lte IE 6]>
<link href="pc_style_2IE.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>

===
pc_style_2IE.css content

#header{
width:794px;
}
#right{
position: relative;
top:0;
right:3px;
}
#left{
position: relative;
top:0;
left:3px;
}

--
BootNic Friday, September 08, 2006 9:49 AM

All men dream, but not equally. Those who dream by night in the dusty
recesses of their minds, wake in the day to find that it was vanity:
but the dreamers of the day are dangerous men, for they may act on
their dreams with open eyes, to make them possible.
*Thomas Edward Lawrence (of Arabia)*

Hey, thank you for the reply. Are you able to explain or point me in
the direction of an explanation on why it's too wide? My #holder is
900px wide and the sum of my 3 divs is 900px wide. Is this just a
"glitch" in I.E. or am I doing something incorrectly? Thank you again.
 
B

BootNic

1995 Cobra said:
[snip]

Hey, thank you for the reply. Are you able to explain or point me in
the direction of an explanation on why it's too wide? My #holder is
900px wide and the sum of my 3 divs is 900px wide. Is this just a
"glitch" in I.E. or am I doing something incorrectly? Thank you again.

If the link I provided does not sufficiently explain it, perhaps you can Google
for more.

Perhaps something like: http://www.google.com/search?q=IE+3px+bug
 
D

dorayme

Hey, thank you for the reply. Are you able to explain or point me in
the direction of an explanation on why it's too wide? My #holder is
900px wide and the sum of my 3 divs is 900px wide. Is this just a
"glitch" in I.E. or am I doing something incorrectly? Thank you again.

It is a glitch in the sense that this browser goes its own way
and adds pixels to your layout without invitation. It is
consistent behaviour though and was, as I understand,
deliberately planned by MS (to give some grace to layouts). The
idea is give just IE a special and different instruction, through
one of the techniques for doing this, namely - as Bootnic shows -
a conditional statement that only IE takes notice of. In effect,
if IE is adding 3 px here and there, the conditional makes sure
that when it adds these amounts, it is adding to a dimension that
is less 3px to what the other browsers see. In other words, IE
gets told a width is 3px less than what is told to other
browsers. When it adds the 3px of its own, the width concerned
then appears like the way other browsers handle it.
 
1

1995 Cobra

dorayme said:
It is a glitch in the sense that this browser goes its own way
and adds pixels to your layout without invitation. It is
consistent behaviour though and was, as I understand,
deliberately planned by MS (to give some grace to layouts). The
idea is give just IE a special and different instruction, through
one of the techniques for doing this, namely - as Bootnic shows -
a conditional statement that only IE takes notice of. In effect,
if IE is adding 3 px here and there, the conditional makes sure
that when it adds these amounts, it is adding to a dimension that
is less 3px to what the other browsers see. In other words, IE
gets told a width is 3px less than what is told to other
browsers. When it adds the 3px of its own, the width concerned
then appears like the way other browsers handle it.

Wow, thank you for your insite. Once again I.E. screws developers. This
is about as good as making Flash movies have to "activate" before use.
Thank you for the work-arounds. It is truly appreciated.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top