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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    NW Iowa
    Posts
    185
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Spans creating new break in Firefox, but not IE?

    The following page renders how I want it to look in IE7, but not Firefox:
    http://www.keatonstanzel.com/

    In IE, the images with description and date show up from left to right, yet in Firefox they simply load from top to bottom. I'm not quite sure what the problem is.

    Should look like this:
    [img] [img] [img] [img]
    [dsc] [dsc] [dsc] [dsc]

    [img] [img] [img] [img]
    [dsc] [dsc] [dsc] [dsc]

    Firefox looks like this:
    [img]
    [dsc]

    [img]
    [dsc]

    [img]
    [dsc]

    Here is the HTML output of the code:
    Code:
    <span id="photo">
    
    			  <a href="photo.asp?ID=88"><img style="border:none" src="_images/photos/keaton-07-small.jpg" alt="Sitting On A Horse"></a><br/>
    			  Sitting On A Horse<br/>
    			  <span style="color:#999999">9/17/2006</span><br/>      
    			</span>
    		
    			<span id="photo">
    			  <a href="photo.asp?ID=93"><img style="border:none" src="_images/photos/keaton-12-small.jpg" alt="Driving a Deere"></a><br/>
    			  Driving a Deere<br/>
    			  <span style="color:#999999">9/16/2006</span><br/>      
    			</span>
    Here is the CSS for the photo span
    #photo {
    width:200px;
    margin-left:15px;
    margin-right:15px;
    margin-bottom:15px;
    text-align:middle;
    font-size:10px;
    color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    Generally, I'd assume I would see this if the PHOTO ID was using a DIV rather than a SPAN. Any help or advice is appreciated.

    Thanks,
    Matt
    Last edited by mattboy_slim; 04-02-2007 at 01:49 AM. Reason: Additional code pasted

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mattboy_slim,
    I have been working on/tweaking/perfecting something similar for a long time now. Have a look at the example page: http://www.nopeople.com/CSS/thumbnail%20presentation/

    You know an id can only be used once? Your #photo should be .photo, a class instead of an id.

    To fix yours:
    Code:
    #photo {
    	width:200px;
    	margin-left:15px;
    	margin-right:15px;
    	margin-bottom:15px;
    	text-align:middle;
    	font-size:10px;
    float: left;
    	color:#FFFFFF;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    But I only tested that in FF.
    Last edited by Excavator; 04-02-2007 at 02:06 AM.
    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

  • #3
    Regular Coder
    Join Date
    Dec 2002
    Location
    NW Iowa
    Posts
    185
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks, i changed my 'photo' ID to a CLASS.

    If I add the float:left to the "photo" class, then it works, but it ruins the footer: http://www.keatonstanzel.com/default...back Bowl 2006

    As you can see, the footer no longer shows up on the bottom, but on the right side of the content.

    Any idea how to fix that now?

    EDIT: Nevermind, I added "float:left" to my footer classes and that resolved the issue. Thanks for the help.
    Last edited by mattboy_slim; 04-02-2007 at 03:51 AM.


  •  

    Posting Permissions

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