Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Alignment Issue in I.E. - New to CSS

Reply
Thread Tools

Alignment Issue in I.E. - New to CSS

 
 
1995 Cobra
Guest
Posts: n/a
 
      09-08-2006
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.

 
Reply With Quote
 
 
 
 
BootNic
Guest
Posts: n/a
 
      09-08-2006
> 1995 Cobra <(E-Mail Removed)> wrote:
> news: (E-Mail Removed). com
> 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/...reepxtest.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)*


 
Reply With Quote
 
 
 
 
1995 Cobra
Guest
Posts: n/a
 
      09-08-2006

BootNic wrote:
> > 1995 Cobra <(E-Mail Removed)> wrote:
> > news: (E-Mail Removed). com
> > 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/...reepxtest.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.

 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      09-08-2006
> 1995 Cobra <(E-Mail Removed)> wrote:
> news: (E-Mail Removed). com

[snip]
>> http://www.positioniseverything.net/...reepxtest.html

[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

--
BootNic Friday, September 08, 2006 4:55 PM

Hackers make toys. Crackers break them.
*Peter Seebach*

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      09-08-2006
In article
<(E-Mail Removed) .com>,
"1995 Cobra" <(E-Mail Removed)> wrote:

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


> 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.

--
dorayme
 
Reply With Quote
 
1995 Cobra
Guest
Posts: n/a
 
      09-09-2006

dorayme wrote:
> In article
> <(E-Mail Removed) .com>,
> "1995 Cobra" <(E-Mail Removed)> wrote:
>
> > > BootNic Friday, September 08, 2006 9:49 AM
> > >

>
> > 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.
>
> --
> dorayme


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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
a CSS problem (annotating a novel, horizontal flush alignment) Xah Lee XML 1 07-07-2005 09:24 PM
Question on CSS alignment tshad HTML 22 02-01-2005 09:12 PM
Question about alignment in css (repost) Becky Lash HTML 12 11-24-2004 05:12 AM
CSS Alignment of DIV's problem rfq HTML 3 09-03-2004 01:32 PM
img alignment in xhtml strict and css Kelwin Delaunay HTML 4 04-17-2004 05:41 PM



Advertisments