Line Break Difference in IE and FireFox

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • qchtrawe
    New Member
    • May 2009
    • 4
    #1

    Line Break Difference in IE and FireFox

    Code:
    <style>
a.valuetype2 {
  width:200px;
  height:200px;
  border: 1px solid #666666;
  display:inline;
}
</style>

<a href=.. class=valuetype2> <img src=picture.gif> <p> Some Text </a>
<a href=.. class=valuetype2> <img src=picture2.gif> <p> Some Text 2 </a>
    With the display:inline css line in Internet Explorer the two links are side by side with no line break. In Firefox the links are on top of each other. I want the links to be side by side, the display inline works in IE but not in Firefox. Why is this and how can I make Firefox work?
    Last edited by Frinavale; May 12 '09, 08:23 PM. Reason: Added code tags. Please post code in [code] [/code] tags.
    Tags: display:inline, firefox
    • Markus
      Recognized Expert Expert
      • Jun 2007
      • 6092
      #2
      If I remember correctly, anchors are naturally inline. But looking at your code, I would guess it's the block level P tags that are causing the line break.

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          You can use CSS to say an element is to be displayed inline but that doesn't make the html valid. Paragraphs cannot be enclosed in an anchor element because the DOM tree will still be wrong.

            Comment

            • qchtrawe
              New Member
              • May 2009
              • 4
              #4
              It is a layout issue. I want a rectangle and inside the rectangle I want an image and then some text underneath it. Then I want another rectangle just like it to the right of it and so on. IE and Firefox will put the rectangles side by side, but if I do a <br> or <p> tag (the text below the picture) within the rectangle Firefox puts the whole rectangle underneath each other instead of side by side like IE. I don't understand why you can't have boxes with elements inside them and put them side by side in firefox.

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  You can but you have to use the language properly. What you have may have worked in IE but that was by accident rather than design.

                  I'll try and look at this better in a bit.

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      <p>
                      <a><img src="">Text here</a><a href=""><img src="">Text here</a>
                      </p>

                        Comment

                        • qchtrawe
                          New Member
                          • May 2009
                          • 4
                          #7


                          I do a bad job describing the problem so I added a pic. The code displays side by side in Internet Explore, but the same code displays in FirexFox in example 2. How do I code the html and css so than is displays in Firefox like example 1.

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              This is one way to do it.
                              Code:
                              <style type="text/css">
a{display:block;float:left}
span{float:left}
</style>
<body>
<p>
<a href=""><img src="1.gif"><span>text</span></a><a href=""><img src="1.gif"><span>text</span></a>
</p>
</body>

                                Comment

                                • qchtrawe
                                  New Member
                                  • May 2009
                                  • 4
                                  #9
                                  Thanks, I inserted float:left into the css sytle and it works now.

                                  Thanks again

                                    Comment

                                    Previous template Next
                                    Working...