...

View Full Version : Why are my images not aligning on IE7?



Toniee
02-02-2007, 04:22 PM
Why are my images not aligning on IE7? I set them on Wordpress to align RIGHT, it works on Firefox but on IE, it gets aligned to the LEFT instead of the RIGHT.

http://tonycai.com

Can someone help me find the problem please?

THanks

Toniee
02-02-2007, 09:51 PM
My images meaning the images on my posts?

koyama
02-03-2007, 01:25 AM
You are using <img src="..." align="right" /> for your images. For instance here:


<img src="http://farm1.static.flickr.com/150/375165795_6655d6d068_o.gif"
style="width: 119px; height: 40px" align="right"
height="40" width="119" />
This is not equivalent to float: right in IE, but often messes things up instead. Anyway the align attribute is deprecated and should be avoided.

Instead use style="float: right"


<img src="http://farm1.static.flickr.com/150/375165795_6655d6d068_o.gif"
style="width: 119px; height: 40px; float: right"
height="40" width="119" />

Toniee
02-06-2007, 05:10 AM
It's not working. Im using WordPress so I cant edit all my past posts, is there any CSS changes I can do to help this?


/*
Theme Name: U5
Theme URI: http://utombox.com
Description: This theme is form <a href="utombox.com">UtomBox.com</a>.
Version: 6.11
Author: Utom
Author URI: http://utombox.com
*/
* {
list-style:none;
margin:0;
padding:0;
}

blockquote {
margin-left:15px;
background-color:#F8F5D1;
border-left:5px solid #F9CA68;
border-right:1px solid #F9CA68;
border-bottom:1px solid #F9CA68;
border-top:1px solid #F9CA68;
margin-right:15px;
padding:4px;
}

#flickrrss {
margin-left:390px;
padding-top:7px;
position: absolute;
}

.navigation {
font-family:"Trebuchet MS", Verdana, sans-serif;
margin-bottom:5px;
font-size:12px;
}

.navigation a {
color:#3E6697;
text-decoration:none;
}

.navigation a:hover {
color:#3E6697;
text-decoration:underline;
}

.navigation .alignleft {
float:left;
}

.navigation .alignright {
float:right;
}

.post {
margin-right:10px;
clear:both;
border-bottom:1px dotted #999999;
margin-bottom:5px;
padding-bottom:10px;
margin-top:10px;
}

.post h1 {
font-size:30px;
font-family:"Trebuchet MS", Verdana, sans-serif;
}

.post h1 a {
color:#4374b0;
text-decoration:none;
padding-left:1px;
padding-right:1px;
}

.post h1 a:hover {
color:#4374b0;
text-decoration:underline;
padding-left:1px;
padding-right:1px;
}

.post h2 {
font-size:20px;
font-family:"Trebuchet MS", Verdana, sans-serif;
}

.post h2 a {
font-size:20px;
color:#4374b0;
text-decoration:none;
padding-right:1px;
margin-top:5px;
}

.post h2 a:hover {
font-size:20px;
color:#4374b0;
text-decoration:underline;
padding-right:1px;
margin-top:5px;
}

.post small {
font-size:10px;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.post small a {
color:#3E6697;
text-decoration:none;
}

.post small a:hover {
text-decoration:underline;
}

hr { clear:both; border:0px;
background-image:url(/images/hor_div.gif);
background-repeat:repeat-x;
height:1px;
background-color:#FFFFFF;
padding:0px; }

body {
overflow:auto;
background:#fff;
color:#fff;
font-size:11px;
line-height:22px;
font-family: "Verdana", Lucida Grande, Arial, Helvetica, sans-serif;
}

p {
font-size:11px;
margin:0 0 10px 0;
}

p a {
color:#333;
text-decoration:none;
margin:0;
margin-bottom:15px;
}

p a:hover {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}

h1, h2, h3, h4, h5, h6 {
font-family:"Trebuchet MS";
}

.entry strike{
text-decoration:line-through;
}

input, textarea {
background:#fff;
border:1px solid #999;
font:11px "Verdana", Arial, Helvetica, sans-serif;
color:#333;
padding:2px;
}

input[type=text]:focus, textarea:focus {
background:#fff;
border:1px solid #666;
font:11px "Verdana", Arial, Helvetica, sans-serif;
color:#333;
}

#wrapper {
background:#fff;
margin:0 auto;
padding:0 5px;
width:990px;
position: absolute;
}

#header {
height:125px;
background-image: url(http://tonycai.com/images/headertop.gif);
background-repeat: no-repeat;
}

#headerimg {
height:90px;
width:auto;
}

#headerlinks {
background-image: url(/images/headerlinks.gif);
background-repeat: repeat-x;
height:30px;
width:auto;
}

#headerimg .description {
display:none;
}

#box {
padding:0 20px 20px;
}

#content, #sidebar {
float:left;
margin:0 20px 0 0;
}

#content {
width:550px;
color:#333;
}

#content2 {
width:550px;
color:#333;
float:left;
margin:0 50px 0 0;
}

.narrowcolumn a {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}

.narrowcolumn ul.u_datetime {
background:#666 url("images/datetime.png") no-repeat 0 0;
width:60px;
height:60px;
float:left;
text-align:center;
color:#FFF;
margin:0 10px 0 0;
}

.narrowcolumn li.u_month {
font-size:10px;
font-family:"Georgia", Arial, Helvetica, sans-serif;
line-height:20px;
}

.narrowcolumn li.u_day {
font-size:20px;
font-family:"Georgia", Arial, Helvetica, sans-serif;
font-weight:700;
line-height:20px;
}

.narrowcolumn li.u_year {
font-size:12px;
font-family:"Georgia", Arial, Helvetica, sans-serif;
font-weight:700;
line-height:20px;
}

.narrowcolumn h2 a {
color:#4374b0;
font-size:20px;
margin:0;
}

.narrowcolumn .u_tag, .narrowcolumn ul.u_postinfo li {
line-height:23px;
margin:0 10px 0 0;
padding:0 0 0 20px;
}

.narrowcolumn .u_tag {
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .u_author {
background:transparent url("images/user.png") no-repeat left center;
}

.narrowcolumn .u_timepost {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .u_category {
background:transparent url("images/folder.png") no-repeat left center;
}

.narrowcolumn .u_comment {
background:transparent url("images/comments.png") no-repeat left center;
}

.narrowcolumn .entry {
clear:both;
padding:10px;
overflow : hidden;
}

.narrowcolumn .entry blockquote {
margin-left:15px;
background-color:#F8F5D1;
border-left:5px solid #F9CA68;
border-right:1px solid #F9CA68;
border-bottom:1px solid #F9CA68;
border-top:1px solid #F9CA68;
margin-right:15px;
padding:4px;
}

.narrowcolumn .entry img {
vertical-align: middle;
margin:5px;
}

.narrowcolumn .entry a:hover img {
border:0px solid #FFF;
vertical-align: middle;
}

.narrowcolumn .navigation {
height:20px;
margin:0 0 20px;
}
.narrowcolumn .navigation_page a, .narrowcolumn .navigation_page .utompage{
font-size: 10px;
float: left;
height: 20px;
padding: 0 5px;
line-height: 20px;
margin: 0 1px 1px 0;
}
.narrowcolumn .navigation_page a{
background: #fff;
border:0px solid #fff;
color: #666;
}
.narrowcolumn .navigation_page a:hover, .narrowcolumn .navigation_page .utompage{
color: #4374b0;
background: #fff;
border:0px solid #fff;
}
.narrowcolumn .alignright {
float:right;
}

.narrowcolumn .postmetadata {
border-top:1px solid #fff;
border-bottom:1px solid #fff;
margin:20px 0;
padding:10px;
}

.narrowcolumn .postrss2 a {
background:transparent url("images/rss_big.png") no-repeat 0 0;
position:absolute;
width:80px;
height:80px;
overflow:hidden;
text-indent:400px;
line-height:200px;
margin:-5px 0 0 400px;
}

.narrowcolumn .postmetadata li {
line-height:23px;
padding:0 0 0 20px;
}

.narrowcolumn .postdatetime {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .postcategory {
float:left;
background:transparent url("images/folder.png") no-repeat left center;
margin:0 10px 0 0;
}

.narrowcolumn .posttag {
float:left;
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .posttrackback {
clear:both;
background:transparent url("images/arrow_refresh.png") no-repeat left center;
}

.narrowcolumn .postedit {
clear:both;
background:transparent url("images/pencil.png") no-repeat left center;
}

span.ugr {
float:left;
width:50px;
height:50px;
border:0px solid #666;
margin:0 3px 3px 0;
}

.narrowcolumn .entry ol li {
list-style:upper-roman;
margin-left:30px;
}
.narrowcolumn .entry ol {
padding-bottom:10px;
}
.narrowcolumn .entry ul {
padding-bottom:10px;
}
.narrowcolumn .entry ul li {
list-style:disc;
margin-left:30px;
}

.narrowcolumn h3#comments, .narrowcolumn h3#respond {
font-size:11px;
margin:10px 0;
}

.narrowcolumn ol.commentlist {
border:0px solid #666;
border-bottom:none;
margin:0 0 20px;
}

.narrowcolumn ol.commentlist li {
border-bottom:0px solid #666;
background:#fff;
padding:10px;
}

.narrowcolumn ol.commentlist li.alt {
background:#fff;
}

.narrowcolumn .commentlist .uar, .narrowcolumn .commentlist .uar a {
font-size:12px;
font-weight:700;
color:#333;
}

.narrowcolumn .spost, .narrowcolumn .commentlist p {
clear:both;
}

.narrowcolumn #comment {
width:80%;
}

#sidebar {
width:100px;
color:#666;
}

#sidebar h2 {
font-size:18px;
color:#38b63c;
margin:10px 0;
}

#sidebar .rss_feed, #sidebar .del_icio_us {
margin:25px 0 0;
}

#sidenotes {
float:right;
width:180px;
}

#sidenotes #s {
width:130px;
}

#searchsubmit {
font-size:10px;
height:22px;
}

#sidenotes h2 {
font-size:18px;
color:#f1044c;
margin:10px 0;
}

#sidenotes a {
font-size:12px;
color:#333;
}

#rencent_entrie {
float:left;
width:250px;
color:#999;
}

#rencent_entrie .reptime {
font-size:10px;
color:#666;
display:block;
}

#rencent_entrie li h2, #rencent_entrie li h2 a {
font-size:14px;
color:#F1044C;
margin:10px 0 0;
}

#footer {
border-top:1px solid #222;
border-bottom:1px solid #222;
background:#111;
padding:20px;
}

#footer .query_posts, #footer .u_links {
width:250px;
float:left;
margin:0 20px 0 0;
}

#footer .u_flickr {
width:270px;
float:left;
}

#footer h2 {
font-size:18px;
color:#999;
margin:0 0 10px;
}

#footer .u_links ul li {
width:50%;
float:left;
}

#footer .u_flickr a {
float:left;
display:block;
margin:0 8px 8px 0;
}

#footer a:hover img {
border:2px solid #4374b0;
}

#utom2006 {
height:30px;
color:#999;
font-size:10px;
padding:0 20px;
}

#utom2006 .copyright {
float:right;
line-height:20px;
padding:5px 0;
}

#utom2006 .validate {
float:left;
line-height:20px;
padding:5px 0;
}
.xhtml, .css {
padding:3px 15px 3px 25px;
}
.xhtml {
background:transparent url("images/xhtml.png") no-repeat left center;
}
.css {
background:transparent url("images/css.png") no-repeat left center;
}

.udownloads a {
display:block;
width:280px;
height:80px;
background:transparent url("images/downloads.png") no-repeat 0 0;
margin:0 0 20px;
padding:10px;
}

.entry3 {
margin:10px 0 0;
}

.udownloads a:hover {
background:transparent url("images/downloads.png") no-repeat 0 -100px;
}

.udownloads a img {
float:left;
margin:0 10px 0 0;
}

.udownloads strong {
display:block;
color:#000;
}

.hl-surround {
background-color:#fff;
border:1px solid #666;
margin-bottom:5px;
width:400px;
overflow:auto;
text-align:left;
padding:8px;
}

.hl-surround, .hl-surround pre, .hl-surround span {
font:normal 9pt 'Courier New', monospace;
}

.hl-default {
color:#000;
}

.hl-code {
color:Gray;
}

.hl-brackets {
color:Olive;
}

.hl-comment {
color:#fa0;
}

.hl-quotes {
color:#8b0000;
}

.hl-string {
color:Red;
}

.hl-builtin {
color:Teal;
}

.hl-reserved {
color:Green;
}

.hl-var {
color:#00008b;
}

.hl-special {
color:Navy;
}

.hl-number {
color:Maroon;
}

.hl-main {
background-color:transparent;
}

.hl-main pre {
margin:0;
padding:0;
}

#navigation ul li a:hover{
color:#fff;
}
.narrowcolumn a:hover{
color:#666;
}
#content3, #sidebar a:hover, #sidebar .uexc, #sidenotes a:hover, #rencent_entrie a:hover, #footer a {
color:#4374b0;
}

.narrowcolumn .u_tag, .narrowcolumn ul.u_postinfo, .narrowcolumn span.commentmetadata {
font-size:10px;
}

.narrowcolumn .u_postinfo li, .narrowcolumn .alignleft {
float:left;
}

.narrowcolumn .entry a img, #footer a img {
border:0px solid #999;
}

.narrowcolumn .commentlist .uar a:hover, #utom2006 a:hover {
color:#333;
}

#sidebar a, #footer a:hover, #utom2006 a {
color:#4374b0;
}

#sidebar h2, #rencent_entrie h2.rencent_entrie {
font-size:18px;
color:#38b63c;
margin:0 0 10px;
}

.hl-identifier, .hl-inlinedoc, .hl-url, .hl-inlinetags {
color:Blue;
}
.styleswitcher {
float:right;
margin:5px 0 0 0;
}
.styleswitcher a span{
display:none;
}
.styleswitcher a{
float:left;
display:block;
width:10px;
height:10px;
margin:0 5px 0 0;
}
.styleswitcher a.default{
background:transparent url("/images/us.png") no-repeat 0 0;
}
.styleswitcher a.pink{
background:transparent url("/images/cn.png") no-repeat 0 0;
}
.styleswitcher a.no{
background:transparent url("/images/de.png") no-repeat 0 0;
}
.googlead{
background:#111;
border:1px solid #222;
margin:0 auto;
padding:3px;
width:468px;
height:60px;
clear:both;
}

.WelcomeBar
{
font-weight:normal;
text-align:left;
font-size:70%;
position: absolute;
left: 695px;
width:245px;
height:20px;
top:10px;
text-align:center;
color:White;
}

.WelcomeBar A
{
color:#76D8FF;
font-weight:bold;
}
#welcome
{
color: #000000;
font-size: 10px;
margin-right: 5px;
margin-top: -5px;
padding-bottom: 10px;
}

#welcome A, #welcome A:VISITED, #welcome A:ACTIVE, #welcome A:HOVER
{
font-size: 10px;
color: #000000;

}

.rating-container {
height: 11px;
width: 61px;
background: url(http://www.tonycai.com/wp-content/plugins/ds-rating-images/black/rating-off.gif) no-repeat;
overflow: hidden;
}
.rating {
padding-top: 11px;
height: 0px !important;
height /**/:11px; /* for IE5/Win only */
background: url(http://www.tonycai.com/wp-content/plugins/ds-rating-images/black/rating-on.gif) no-repeat;
text-align: left;
overflow: hidden;
}
.zero { width: 0px; }
.zero-and-half { width: 6px; }
.one { width: 11px; }
.one-and-half { width: 18px; }
.two { width: 24px; }
.two-and-half { width: 31px; }
.three { width: 36px; }
.three-and-half { width: 43px; }
.four { width: 50px; }
.four-and-half { width: 55px; }
.five { width: 61px; }

Thanks

Toniee
02-06-2007, 05:18 AM
And I have the float:right on my CSS. IE 7, just wont work. FF works.

koyama
02-06-2007, 05:32 AM
Which style are you referring to having float: right?

I wouldn't guarantee anything, but I would try this:


.narrowcolumn .entry img {
/* vertical-align: middle; */
float: right;
margin:5px;
}

Toniee
02-06-2007, 10:20 PM
Nope, that doesn't work either. :(

Excavator
02-06-2007, 10:22 PM
Hello Toniee,
What images are not lining up and what browser are you viewing it with.
I can't tell you have a problem when I look at your site with FF or IE7.

Toniee
02-06-2007, 10:31 PM
The entries, the posts, the images I align right on FF works, when using the same code on IE, it aligns left, making the line spacing all messed up.

koyama
02-06-2007, 10:32 PM
Hmm, just downloaded your page and tried it, and it worked for me.

I was referring to line 315 in style.css.

Excavator
02-06-2007, 11:41 PM
And I have the float:right on my CSS. IE 7, just wont work. FF works.

hmmm, I didn't really search for that but if you have align:right; inline it overides linked CSS. Did you read Koyama's post:

You are using <img src="..." align="right" /> for your images. For instance here:

Code:
<img src="http://farm1.static.flickr.com/150/375165795_6655d6d068_o.gif"
style="width: 119px; height: 40px" align="right"
height="40" width="119" />This is not equivalent to float: right in IE, but often messes things up instead. Anyway the align attribute is deprecated and should be avoided.

Instead use style="float: right"

Code:
<img src="http://farm1.static.flickr.com/150/375165795_6655d6d068_o.gif"
style="width: 119px; height: 40px; float: right"
height="40" width="119" />

Toniee
02-07-2007, 12:48 AM
I cant really change it like that, it's a blog script. It uses align by itself.

Toniee
02-07-2007, 12:57 AM
And if I add that CSS, all my images will be right, I dont want that. I want the ones where I only specify to be right be aligned right.

I mean, I dont know where in the WordPress engine I can alter that for the future.

koyama
02-07-2007, 01:26 AM
In that case you may try with a Microsoft dynamic expression:


.narrowcolumn .entry img {
vertical-align: middle;
float: expression((this.align=='right') ? 'right' : 'none');
margin: 5px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum