I'm working on a blog template that I need to work on all browsers. There's been a few bugs, but the majority of been squashed. The last remaining problem is with IE 5/Mac and Konqueror 3.0.5/Linux which both have problems placing the avatar picture as I want it.
View Template (<!-- m --><a class="postlink" href="http://www.darkfaerytale.com/services/testing/marieORANGE/">http://www.darkfaerytale.com/services/t ... rieORANGE/</a><!-- m -->)
View Screenshot of Problem (<!-- m --><a class="postlink" href="http://www.darkfaerytale.com/services/testing/marieORANGE/scaps/ie5mac.jpg">http://www.darkfaerytale.com/services/t ... ie5mac.jpg</a><!-- m -->)
I specify the avatar image placement with
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/avatar.jpg" align="right" class="avatar" alt="Username's Display Picture" />
and in the stylesheet:
.avatar {
margin: 0px;
border: 1px solid #AD4307;
padding: 2px;
background: #FFFFFF;
position: relative;
top: -65px;
right: -48px;
text-align: right;
float: right;
}
But the IE/Mac browser won't position it negatively for some reason. Any ideas? Thanks.
PS - Also, another slight problem, though not really affecting acessability. In IE 5.0 and 5.5 (Windows this time), the border and padding doesn't show up on the avatar...help?Wow what a useless browser to support
Change it from this:
<div class="spacer"></div>
<div class="user"><div class="navihead">Username</div></div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/avatar.jpg" align="right" class="avatar" alt="Username's Display Picture" />
to
<div class="user">Username <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/avatar.jpg" class="avatar" alt="Username's Display Picture" /></div>
and use the CSS
.user img {
margin: 0;
border: 1px solid #AD4307;
padding: 2px;
background: #FFF;
position: relative;
top: -65px;
right: -48px;
float: right;
}
Also see if you can find more meaningful tags to use besides all divs. <h1> through <h6> could be used in there
View Template (<!-- m --><a class="postlink" href="http://www.darkfaerytale.com/services/testing/marieORANGE/">http://www.darkfaerytale.com/services/t ... rieORANGE/</a><!-- m -->)
View Screenshot of Problem (<!-- m --><a class="postlink" href="http://www.darkfaerytale.com/services/testing/marieORANGE/scaps/ie5mac.jpg">http://www.darkfaerytale.com/services/t ... ie5mac.jpg</a><!-- m -->)
I specify the avatar image placement with
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/avatar.jpg" align="right" class="avatar" alt="Username's Display Picture" />
and in the stylesheet:
.avatar {
margin: 0px;
border: 1px solid #AD4307;
padding: 2px;
background: #FFFFFF;
position: relative;
top: -65px;
right: -48px;
text-align: right;
float: right;
}
But the IE/Mac browser won't position it negatively for some reason. Any ideas? Thanks.
PS - Also, another slight problem, though not really affecting acessability. In IE 5.0 and 5.5 (Windows this time), the border and padding doesn't show up on the avatar...help?Wow what a useless browser to support
Change it from this:
<div class="spacer"></div>
<div class="user"><div class="navihead">Username</div></div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/avatar.jpg" align="right" class="avatar" alt="Username's Display Picture" />
to
<div class="user">Username <img src=http://www.webdeveloper.com/forum/archive/index.php/"images/avatar.jpg" class="avatar" alt="Username's Display Picture" /></div>
and use the CSS
.user img {
margin: 0;
border: 1px solid #AD4307;
padding: 2px;
background: #FFF;
position: relative;
top: -65px;
right: -48px;
float: right;
}
Also see if you can find more meaningful tags to use besides all divs. <h1> through <h6> could be used in there