Images breaking nested div layout in firefox (works fine in IE)

[vecima]

first of all, hello (first time poster).

the url in question: http://www.type3studios.com/?projects

(i guess you can grab the html and css from there, but if you want, i'll post it.)

EDIT: if you do grab my css and html, you're mainly looking for the .block, .blocka, and .blockb sections.

on that site, i'm using the "unordered list of divs with display:table-row and display:table-cell" trick to set up several rows of 3 boxes each. they work fine without images as shown below.

(in case this url changes, i'm including some pictures to help explain)

that is in firefox. as you can see the layout fits within the page. note the areas with the text 'main screenshot' - that is the alt value for my images.

now... here is the same page with the images

i'm not sure what's causing this, but the <li> sections are becoming huge, and my .blocka and .blockb (which are within the <li>) are dropping below where they should be.

here is the same page with images in IE (this is how i want it to look in firefox). note however that in my html source, i specify different styling to use for IE, since display:table-row and display:table-cell don't work properly.

[drhowarddrfine]

I'm walking out the door for the weekend but things you can check:
1) Validate your html for one error and CSS for four. There is no such thing as 'float:center'.
2) Check your divs for this IE bug. IE expands elements to contain floated and absolutely positioned elements. This is incorrect behavior but could be causing the problem.

Sorry I don't have time to do more.

[vecima]

thank you for your reply.

NOTE: the page in question has been moved to:
http://www.type3studio s.com/test/?projects

the CSS now validates, but the HTML validation fails because i used a div with nothing in it, but with a background image for the main site "banner" image. (so i could easily switch out the image with the style switcher at the bottom). anyhow, i don't think that error is affecting this one.

while i thank you whole heartedly for your response, i'm not sure if you understood my original post... the page works fine in IE, but breaks in Firefox. That in and of itself seems backward ;-) most of the time working on updating this site it's been IE that's needed tweaks, but in this particular case it's the other way around.

anyhow, I'll keep tinkering and if you or anyone else has any ideas, be sure to let me know!

[vecima]

well, i seemed to have answered my own question.

i replaced the following CSS code:

.block ul {
    display: table-row;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
 
    height: 150px;
    min-height: 150px;
    max-height: 150px;
}
 
.block li {
    display: table-cell;
    text-align: center;
    margin: 0;
}

with this:

    .block ul {
        display:block;
        float:left;
        list-style: none;
        margin: 0;
        padding: 0;
        border: none;
    }
 
    .block li {
        display:block;
        float:left;
        text-align: center;
        margin:0;
    }

the new code is what i was telling IE to do all along. I could of swore I tried it before, but when I tried it again, IE and firefox now display the same (in a good way this time! :-) )

thanks for your help, and i'm sure i'll be back to ask some more questions!

[vecima]

hello again. I've fixed the initial problem, but i'm having another, and since it's on the same page (here), and a similar situation, i figured i'd just use the same thread.
again, IE is displaying as i wish, and firefox is a bit off.

this first shot is from IE: (notice how the 'thumbnail' images fit within the row).

the next shot is from Firefox: (notice the space between the images, and how the bottom two overflow onto the gray bar beneath).

the css styling these images is here:

a:link img {
    border: 2px solid #3d5e57;
}
a:visited img {
    border: 2px solid #3d5e57;
}
a:hover img {
    border: 2px solid #a6f5fa;
}    
a:active img {
    border: 2px solid #a6f5fa;
}

any ideas on how to make them both show the images closer together (like the IE rendering)?

[drhowarddrfine]

i'm not sure if you understood my original post... the page works fine in IE, but breaks in Firefox. That in and of itself seems backward ;-)

Yes it is backwards because you are trying to compare what IE is doing and implying Firefox is doing something wrong. However, even though IE is doing what you want, it isn't doing it correctly.

1) IE is in 'quirks mode', meaning it is using its "broken box model". The reason is that you have 'stuff' before the doctype. Remove all comments and spaces of any kind before the doctype to get IE out of quirks. Firefox, otoh, is not in quirks because it doesn't have this sort of problem.

2) The validator complains you have a misplaced <div>. This needs to be fixed.

Now, how those two items affect your page, I don't know because I can't fix the first one and don't have time right now to fix the second (just got back from out of town). But it is hard enough to debug valid code than try and mess with invalid code. This I think you already know.

[vecima]

thanks again for clarifying.

i've fixed the <div> situation, and moved my doctype declaration to the top of the page, and the validator declared it valid, however the validator told me about my mime type conflict (serving text/html rather than application/xhtml+xml). it also provided me a link from which i copied in the following php code:

(from http://juicystudio.com/article/content-negotiation.php )

<?php 
    header("Vary: Accept");
    if (stristr($_SERVER[HTTP_ACCEPT], "application/xhtml+xml")) 
        header("Content-Type: application/xhtml+xml; charset=utf-8");
    else
        header("Content-Type: text/html; charset=utf-8");
?>

apparently this code needs to be at the top of the document, or else i get the folowing errors:

Warning: Cannot modify header information - headers already sent by (output started at E:\xampp\htdocs \xampp\Type3\in dex.php:3) in E:\xampp\htdocs \xampp\Type3\in dex.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at E:\xampp\htdocs \xampp\Type3\in dex.php:3) in E:\xampp\htdocs \xampp\Type3\in dex.php on line 6

if i do place the php code at the top, with the doctype immediately following, the site is rendered with a white border around it, and the validator still tells me about a mime type conflict anyway.


for the time being, i've deleted the php code, moved the doctype to the very top and used this meta tag:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

i still get the warning about mime types, but the page does validate. if you think it's necessary i'll try further to allow the site to serve application/xhtml+xml, but currently i think many sites leave it as i have it now (correct me if i'm wrong).

now that all of that is out of the way, the site is still rendering exactly as it was in the images in my previous post. if IE is still rendering in 'quirks' mode, there must be something else causing it. notice in the firefox shot that the images run over onto the next gray bar beneath, which itself is enlarged for some reason. also notice that IE seems to use the same distancing between images vertically and horizontally, whereas firefox seems to use more distancing vertically between the images. this is what i want to 'correct' - i understand that it may not be 'wrong' but at any rate, i would like it to display in firefox as it is doing in IE.

i also noticed a problem with my style switching mechanism. the links are at the bottom of the page. it works fine in firefox, but in IE is a bit odd.

thanks again for your help.

[TRScheel]

You are coding HTML in a backwards manner... Code for firefox, fix for IE. Dont code for IE than fix for firefox because it will be a convulated mess.

[vecima]

i actually have been coding for firefox and fixing for IE.

in this particular case i tried something that i expected to work in firefox, and when it didn't, i checked it in IE, and by chance it looked as i expected it to. the fact that this happened twice in a row is to me as mind boggling as it is frustrating.

[TRScheel]

i actually have been coding for firefox and fixing for IE.

in this particular case i tried something that i expected to work in firefox, and when it didn't, i checked it in IE, and by chance it looked as i expected it to. the fact that this happened twice in a row is to me as mind boggling as it is frustrating.

I can imagine... I have a squishy ball next to my desktop machine for working on HTML for this very reason.

Did you try setting the margins/padding on the images? Have you read into a global reset CSS file (and no, not the * everything reset files).'

Page on Global Reset

DO NOT DO (or any variation of this):

/* CSS global reset for all browsers */ 
* {
    padding: 0;
    margin: 0;
   }