Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why are my images not aligning on IE7?

    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

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My images meaning the images on my posts?

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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" />

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

    Code:
    /*
    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

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And I have the float:right on my CSS. IE 7, just wont work. FF works.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Which style are you referring to having float: right?

    I wouldn't guarantee anything, but I would try this:
    Code:
    .narrowcolumn .entry img {
    /* vertical-align: middle; */
    float: right;
    margin:5px;
    }

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    Nope, that doesn't work either.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm, just downloaded your page and tried it, and it worked for me.

    I was referring to line 315 in style.css.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by Toniee View Post
    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" />
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I cant really change it like that, it's a blog script. It uses align by itself.

  • #13
    New Coder
    Join Date
    Jan 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    In that case you may try with a Microsoft dynamic expression:
    Code:
    .narrowcolumn .entry img {
      vertical-align: middle;
      float: expression((this.align=='right') ? 'right' : 'none');
      margin: 5px;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •