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 5 of 5
  1. #1
    Daf
    Daf is offline
    Regular Coder
    Join Date
    Feb 2005
    Location
    East Texas
    Posts
    140
    Thanks
    32
    Thanked 2 Times in 2 Posts

    Text/image - don't want text to wrap around image

    Hello,

    I'm trying to replace a few tables we have left on our site with CSS.

    One of which is giving me a little trouble.

    Here is the existing code w/table

    Code:
    <div class="lotto">
    <table>
    <tr>
    <td><a href="http://www.txlottery.org/"><img src="images/lotterylogo.gif" height="58" class="blackborderpad"
    align="left" width="50" alt="Texas Lottery" /></a></td>
    <td>Mega Millions  	for 2/22/05  	15 - 18 - 28 - 41 - 45   (27) MB
    MEGAPLIER: 4<br />
    Lotto Texas 	for 2/19/05 	7 - 16 - 19 - 21 - 42  (19) BB<br />
    Texas Two Step 	for 2/21/05 	2 - 9 - 16 - 27  (33) BB<br />
    Cash Five 	for 2/22/05 	14 - 22 - 27 - 30 - 33<br />
    Pick 3 Day 	for 2/22/05 	2 - 6 - 2<br />
    Pick 3 Night 	for 2/22/05 	7 - 1 - 3</td>
    </tr>
    </table>
    </div>
    here is the "lotto" class:
    Code:
    .lotto {
    	background: #f5f5f5;
    	border: solid 1px #000000;
    	color: #000000;
    	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	margin: 5px;
    	padding: 3px;
    }
    I want the image to be independent of the text - like you see there with the 2 table cells separating the image and text. This is what I'm trying to reproduce with css.

    Here is the code I'm working with:
    Code:
    <style type="text/css">
    
    .lotto {
        background: #f5f5f5;
        border: solid 1px #000000;
        color: #000000;
        font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
        margin: 5px;
        padding: 10px;
       height: 90px;
       width: 90%;
    }
    
    .left {
        float: left;
        margin: 12px 0 0 10px;
        width: 60px;
    }
    
    .right {
    float: right;
    position: relative;
    top: auto;
    left: -50%;
    }
    
    </style>
    </head>
    <body>
    <div class="lotto">
    <div class="left"><img src="http://www.ktbb.com/images/lotterylogo.gif" width="50" height="58" alt="" /></div>
    
    <div class="right">Mega Millions for 2/22/05 15 - 18 - 28 - 41 - 45 (27) MB MEGAPLIER: 4<br />
    Lotto Texas for 2/19/05 7 - 16 - 19 - 21 - 42 (19) BB<br />
    Texas Two Step for 2/21/05 2 - 9 - 16 - 27 (33)<br />
    BB Cash Five for 2/22/05 14 - 22 - 27 - 30 - 33<br />
    Pick 3 Day for 2/22/05 2 - 6 - 2<br />
    Pick 3 Night for 2/22/05 7 - 1 - 3</div>
    </div>
    I'm doing some testing in a test page and that's why no external css file - the actual site uses an external sheet.

    Now this works fine in Firefox and Opera but not in IE (surprise!) - would one of you please take a look and see where I screwed up. Or suggest a better way? I would really appreciate it!

    Thanks
    Daf
    Last edited by Daf; 02-24-2005 at 01:14 AM.

  • #2
    Daf
    Daf is offline
    Regular Coder
    Join Date
    Feb 2005
    Location
    East Texas
    Posts
    140
    Thanks
    32
    Thanked 2 Times in 2 Posts
    Did I post incorrectly? Sorry if that is the case.

    Please let me know what I should correct.

    Thanks
    Daf

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Patience, grasshopper

    Actually, it would be a lot easier if you provided a link to your site... otherwise we have to copy/paste your code and some of us (well, okay... me) are notoriously lazy.

    As far as the floats go, you could do without the float on the .right div. The nature of floats is that the text will wrap around the image, and if you set a margin on the .right class the text can be pushed off to the side, wherever you need it.

    Try this in lieu of the css assigned to ".right", adjust to your taste:

    Code:
    .right {
    margin-left: 100px
    }
    Hopefully that's more of what you were looking for...

  • #4
    Daf
    Daf is offline
    Regular Coder
    Join Date
    Feb 2005
    Location
    East Texas
    Posts
    140
    Thanks
    32
    Thanked 2 Times in 2 Posts

    Thanks!

    Ah - very nice!! That's what I was looking for.
    I guess I was "over floating"


    Thanks for your time!

    Daf

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    no problem


  •  

    Posting Permissions

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