...

View Full Version : Spans creating new break in Firefox, but not IE?



mattboy_slim
04-02-2007, 02:48 AM
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:


<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

Excavator
04-02-2007, 03:01 AM
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:
#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.

mattboy_slim
04-02-2007, 03:28 AM
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.asp?cat=Outback 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum