www.webdeveloper.com
Results 1 to 9 of 9

Thread: Cross browser alignment problem

  1. #1
    Join Date
    Jan 2005
    Posts
    42

    Cross browser alignment problem

    I'm having to align some ASP generated text using spans (I can't use tables due to the way the html is generated). The following code looks fine in IE6:

    Code:
    <style>
    hr 			{
    			border: 1px dashed; 
    			width: 100%;
    			color:#1C096F;
    			height:1px;
    			}
    
    .toneText		{
    			color:#1C096F;
    			font-weight:bold;
    			width:120px;
    			}
    </style>
    
    <span class=toneText>This text should wrap after 120px</span>&nbsp;&nbsp;[IMAGE]
    <hr>
    <span class=toneText>This text should wrap after 120px</span>&nbsp;&nbsp;[IMAGE]
    <hr>
    <span class=toneText>This text should wrap after 120px</span>&nbsp;&nbsp;[IMAGE]
    <hr>
    <span class=toneText>This text should wrap after 120px</span>&nbsp;&nbsp;[IMAGE]
    <hr>
    On firefox and opera the text does not wrap.

    If I use float:left on .toneText and add a <br> before each <hr> it looks OK but this is no good since the text in the real code can be of different lengths (I would need a different number of <br>'s depending on how many lines the text goes onto).

  2. #2
    Join Date
    Oct 2004
    Location
    Portland, OR
    Posts
    145
    This worked for me...

    .toneText {
    display:block;
    color:#1C096F;
    font-weight:bold;
    width:120px;
    }

  3. #3
    Join Date
    Jan 2005
    Posts
    42
    For me that causes the image to end up on the next line.

  4. #4
    Join Date
    Oct 2004
    Location
    Portland, OR
    Posts
    145
    Oh, I thought that was the effect that your were going for.
    How wide is the image?

  5. #5
    Join Date
    Jan 2005
    Posts
    42
    Actually it will be two images, only about 50 px wide each.


    you can see the site if you want:

    http://test.awol-ringtones.com

    Firefox and opera seem to ignore the width on the span.

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Spans don't have width. They're inline elements. You need divs and you probably need to float them left.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  7. #7
    Join Date
    Jan 2005
    Posts
    42
    Ah that's what I thought originally but I couldn't get it working.

    Code:
    <style>
    
    .toneText		{
    			width:120px;
    			float:left;
    			}
    </style>
    		
    <div class=toneText>This text should wrap after 120px</div>&nbsp;&nbsp;[IMAGE]
    <hr>
    <div class=toneText>This text should wrap after 120px</div>&nbsp;&nbsp;[IMAGE]
    <hr>
    <div class=toneText>This text should wrap after 120px</div>&nbsp;&nbsp;[IMAGE]
    <hr>
    <div class=toneText>This text should wrap after 120px</div>&nbsp;&nbsp;[IMAGE]
    <hr>
    What I want is:

    text that wraps [IMAGE]
    like this
    -------------------------
    text that wraps [IMAGE]
    like this
    -------------------------
    text that wraps [IMAGE]
    like this
    -------------------------

    How can I achieve this with spans? Sorry I'm a bit new to css alignment - been reading a few resources but not getting anywhere.

  8. #8
    Join Date
    Oct 2004
    Location
    Portland, OR
    Posts
    145
    Hi,

    I think I have a solution for you.
    For this to work,will will have to move the image above the spans in your html.
    I have tested in all of my mac browsers:
    IE5.2, FF, OP, NN and Safari
    All are displaying correctly.
    File is attached.

    -Mike
    Attached Files Attached Files

  9. #9
    Join Date
    Jan 2005
    Posts
    42
    Ah... I never thought to float the image to the right. Good idea.
    Thanks alot for your time The ringtones industry salutes you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles