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.type3studios.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\index.php:3) in E:\xampp\htdocs\xampp\Type3\index.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at E:\xampp\htdocs\xampp\Type3\index.php:3) in E:\xampp\htdocs\xampp\Type3\index.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;
   }
 

[drhowarddrfine]

The reason for the mime error is your server is saying it is sending text/html in the HTTP header. Most people think that if they use the xhtml doctype that they are sending xhtml. Not true. This is why many suggest just using html and forget about xhtml. xhtml doesn't work in IE anyway (it's treated as html).

EDIT: You especially should NOT use xhtml ver 1.1. It is to be served as XML only! Change it back to 1.0 or, better yet, go to html 4.01.

[TRScheel]

xhtml doesn't work in IE anyway (it's treated as html).

Which is sad... I think I should write my own version of IE and sell it to them. I could get it up to standards faster.

[drhowarddrfine]

Which is sad... I think I should write my own version of IE and sell it to them. I could get it up to standards faster.

Technically, xhtml will work in IE if you serve it as XML but that opens a whole other can of worms. MS could make their browser standards compliant but that would work against their dominance philosophy. That's why JScript is not compatible with standard javascript, and MSXML is not compatible with standard XML, and they fight OpenDoc which isn't compatible with Word.

Standards are bad for Microsoft, so they think. It means they can't sell you something, so they have to kill everything else. They killed Netscape in the 90s. This is why the Justice Department and EU are suing them.

[drhowarddrfine]

You especially should NOT use xhtml ver 1.1. It is to be served as XML only! Change it back to 1.0 or, better yet, go to html 4.01.

No, IE is not in quirks now.

[TRScheel]

Technically, xhtml will work in IE if you serve it as XML but that opens a whole other can of worms. MS could make their browser standards compliant but that would work against their dominance philosophy. That's why JScript is not compatible with standard javascript, and MSXML is not compatible with standard XML, and they fight OpenDoc which isn't compatible with Word.

Standards are bad for Microsoft, so they think. It means they can't sell you something, so they have to kill everything else. They killed Netscape in the 90s. This is why the Justice Department and EU are suing them.

The state of Iowa had a class action lawsuit against microsoft a few months back and everyone who owned a microsoft product was given a pretty decent portion. I think it was like $30 per windows licence, $15 per office. Something similiar. Considering I had like 10 windows licences and like 5 office licences, I was pretty excited.

Edit: ALSO, I bought like 5 of those windows keys from the U and 2 of the office keys from the U, all 7 at like $10 a piece.

[drhowarddrfine]

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.

That's OK. We just have to make sure no errors are fooling us.

min-width and max-width do not work in IE.
Neither does min-height or max-height.

[drhowarddrfine]

I'm wondering if min/max stuff is the problem. Search here for those properties. (Look there just to see how bad IE is, too)

Sorry, my help is on the fly. Getting geared up for a huge project next week.

[vecima]

as a cleanup measure, i've deleted all of the min and max height and width from my css.

you were absolutely right, it changed nothing.

as for the layout, i made a bit of progress, though i'm not sure why.

to bring the images closer together vertically, i simply inserted a <br /> after the first two images. that seems a little hacky to me, but it now looks exactly as i had wanted.

as for the images running into the gray bar: i took a look at my php code for this page:

<div id='innerpage'>
    <strong>Projects</strong>
 
    <div class='thickbar'>
        <strong>Games</strong>
    </div>
 
    <div class='colorbar'>
        <strong>Earth - Right</strong>
    </div>
 
    <?php include "projects_er/er.php"; ?>
 
    <div class='thickbar'>
        <strong>Mods</strong>
    </div>
 
    <div class='colorbar'>
        <strong>The Battle of Philadelphia</strong>
    </div>
 
    <?php include "projects_bop/bop.php"; ?>
 
    <div class='colorbar'>
        <strong>The Rebel</strong>
    </div>
 
    <?php include "projects_rebel/rebel.php"; ?>
 
    <div class='thickbar'>
        <strong>Maps</strong>
    </div>
 
</div>

and i realized that the transition where this was happening was a special case, and might not be caused by the images at all. it's the only spot on the page where the colorbar (for "The Rebel") comes after an element other than a "thickbar". I used the same thumbnail links to test this theory, and it turns out i was right. They work fine everywhere else. I was tricked into thinking the images were breaking it because that one spot was the only one where i implemented the images. I decided to try inserting a "thickbar" above the colorbar in question, like so:

<div id='innerpage'>
    <strong>Projects</strong>
 
    <div class='thickbar'>
        <strong>Games</strong>
    </div>
 
    <div class='colorbar'>
        <strong>Earth - Right</strong>
    </div>
 
    <?php include "projects_er/er.php"; ?>
 
    <div class='thickbar'>
        <strong>Mods</strong>
    </div>
 
    <div class='colorbar'>
        <strong>The Battle of Philadelphia</strong>
    </div>
 
    <?php include "projects_bop/bop.php"; ?>
 
    <div class='thickbar'>
        <strong>Mods (this is a div class='thickbar')</strong>
    </div>
 
    <div class='colorbar'>
        <strong>The Rebel</strong>
    </div>
 
    <?php include "projects_rebel/rebel.php"; ?>
 
    <div class='thickbar'>
        <strong>Maps</strong>
    </div>
 
</div>

and my result was that the page displayed exactly as i expected it to.

again, i'm not sure why this is happening this way, but maybe this will shine some light that one of you could help me see?

here is an example of the regular version: (notice how the images still slightly overlap the following gray bar, and how the gray bar is still bigger than the other ones)
http://www.type3studios.com/?projects

and here is an example with the extra .thickbar (it displays like it should, except i don't really want the extra .thickbar there)
http://type3studios.com/test/?projects

thanks yet again guys.

i'm almost afraid to start testing the page in safari ;-)

[drhowarddrfine]

Well, now you're back in quirks because of the comments on the first line. Also, you have defined id's more than once. An id is a unique name for one element on a page. If you need to apply the same style to multiple elements, use 'class'.

Safari will be fine. A lot better than IE will be.

[vecima]

Well, now you're back in quirks because of the comments on the first line...

i'm not sure what you mean... there are no comments on the first line. the code i posted is from the file projects.php which is included in my index.php. the index.php has the doctype as the very first thing.

as for the css id... i'll take a look again... i think i may have multi-used something i didn't originally intend to, thanks.