F
Fredo Vincentis
I am having difficulties with aligning an image (left or right) on IE5/Mac
while it is in a positioned element. Two problems show:
1. a left-aligned image atually moves out of the left border of the element
2. right-align image is being overlapped by text
This only happens if the images and the content are sitting inside of a
positioned element. Here a link of a sample to show you what is happening:
http://www.addictivemedia.com.au/client/solutions/consulting.php?currentPrim
eNav=Solutions¤tSecNav=Consulting
The Css is external, so I thought I best post it here:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0px;
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 17px;
}
H1 {
color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14pt;
margin-top: 10px;
margin-bottom: 0px;
padding-bottom:0px;
padding-top:0px;
font-weight:600;
}
..headLine {
margin-bottom: 10px;
margin-top: 0px;
padding-top:0px;
}
#bottomSection{
position:relative;
height:auto;
width:711px;
left:36px;
}
#logoBack {
width:780px;
height:38px;
background-color: #000000;
}
#logo {
position:absolute;
left:565px;
background-color: #000000;
z-index: 1;
}
#FlashMenu {
width:780px;
}
/*
* "clear" indicates which sides of an element's box(es) may not be adjacent
to an earlier floating box
* it ensures that each homeBlock has its own row
*/
..homeBlock{
clear:both;
margin-top:0px;
}
html, body, #contents, #entireSite {
min-height: 100%;
width: 100%;
height: 100%;
}
/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/
html>body, html>body #contents, html>body #entireSite {
height: auto;
}
/*
* Without this, Moz1.0 adds a vertical scrollbar
*/
body {
margin:0px 0px; padding:0px; /* Need to set body margin and padding to get
consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
font-family: Arial, sans-serif;
}
#contents {
position: absolute;
top: 0;
left: 0;
width:780px;
background-color:#FFFFFF;
}
#entireSite {
position: relative;
width:780px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
}
#footer {
position: absolute;
bottom: 0;
background-color: #000000;
width: 100%;
z-index: 3;
}
#main {
height: auto;
width:780px;
background-color:#FFFFFF;
}
/* this is for the strip for the subsections*/
#blackStrip {
position: relative;
left: 0px;
top: 34px;
}
while it is in a positioned element. Two problems show:
1. a left-aligned image atually moves out of the left border of the element
2. right-align image is being overlapped by text
This only happens if the images and the content are sitting inside of a
positioned element. Here a link of a sample to show you what is happening:
http://www.addictivemedia.com.au/client/solutions/consulting.php?currentPrim
eNav=Solutions¤tSecNav=Consulting
The Css is external, so I thought I best post it here:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0px;
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 17px;
}
H1 {
color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14pt;
margin-top: 10px;
margin-bottom: 0px;
padding-bottom:0px;
padding-top:0px;
font-weight:600;
}
..headLine {
margin-bottom: 10px;
margin-top: 0px;
padding-top:0px;
}
#bottomSection{
position:relative;
height:auto;
width:711px;
left:36px;
}
#logoBack {
width:780px;
height:38px;
background-color: #000000;
}
#logo {
position:absolute;
left:565px;
background-color: #000000;
z-index: 1;
}
#FlashMenu {
width:780px;
}
/*
* "clear" indicates which sides of an element's box(es) may not be adjacent
to an earlier floating box
* it ensures that each homeBlock has its own row
*/
..homeBlock{
clear:both;
margin-top:0px;
}
html, body, #contents, #entireSite {
min-height: 100%;
width: 100%;
height: 100%;
}
/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/
html>body, html>body #contents, html>body #entireSite {
height: auto;
}
/*
* Without this, Moz1.0 adds a vertical scrollbar
*/
body {
margin:0px 0px; padding:0px; /* Need to set body margin and padding to get
consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
font-family: Arial, sans-serif;
}
#contents {
position: absolute;
top: 0;
left: 0;
width:780px;
background-color:#FFFFFF;
}
#entireSite {
position: relative;
width:780px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
}
#footer {
position: absolute;
bottom: 0;
background-color: #000000;
width: 100%;
z-index: 3;
}
#main {
height: auto;
width:780px;
background-color:#FFFFFF;
}
/* this is for the strip for the subsections*/
#blackStrip {
position: relative;
left: 0px;
top: 34px;
}