473,809 Members | 2,757 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

8 New Member
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.

Aug 10 '07
19 4114
drhowarddrfine
7,435 Recognized Expert Expert
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.
Aug 15 '07 #11
TRScheel
638 Recognized Expert Contributor
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.
Aug 15 '07 #12
drhowarddrfine
7,435 Recognized Expert Expert
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.
Aug 15 '07 #13
drhowarddrfine
7,435 Recognized Expert Expert
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.
Aug 15 '07 #14
TRScheel
638 Recognized Expert Contributor
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.
Aug 15 '07 #15
drhowarddrfine
7,435 Recognized Expert Expert
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.
Aug 15 '07 #16
drhowarddrfine
7,435 Recognized Expert Expert
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.
Aug 15 '07 #17
vecima
8 New Member
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:

Expand|Select|Wrap|Line Numbers
  1. <div id='innerpage'>
  2.     <strong>Projects</strong>
  3.  
  4.     <div class='thickbar'>
  5.         <strong>Games</strong>
  6.     </div>
  7.  
  8.     <div class='colorbar'>
  9.         <strong>Earth - Right</strong>
  10.     </div>
  11.  
  12.     <?php include "projects_er/er.php"; ?>
  13.  
  14.     <div class='thickbar'>
  15.         <strong>Mods</strong>
  16.     </div>
  17.  
  18.     <div class='colorbar'>
  19.         <strong>The Battle of Philadelphia</strong>
  20.     </div>
  21.  
  22.     <?php include "projects_bop/bop.php"; ?>
  23.  
  24.     <div class='colorbar'>
  25.         <strong>The Rebel</strong>
  26.     </div>
  27.  
  28.     <?php include "projects_rebel/rebel.php"; ?>
  29.  
  30.     <div class='thickbar'>
  31.         <strong>Maps</strong>
  32.     </div>
  33.  
  34. </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:


Expand|Select|Wrap|Line Numbers
  1. <div id='innerpage'>
  2.     <strong>Projects</strong>
  3.  
  4.     <div class='thickbar'>
  5.         <strong>Games</strong>
  6.     </div>
  7.  
  8.     <div class='colorbar'>
  9.         <strong>Earth - Right</strong>
  10.     </div>
  11.  
  12.     <?php include "projects_er/er.php"; ?>
  13.  
  14.     <div class='thickbar'>
  15.         <strong>Mods</strong>
  16.     </div>
  17.  
  18.     <div class='colorbar'>
  19.         <strong>The Battle of Philadelphia</strong>
  20.     </div>
  21.  
  22.     <?php include "projects_bop/bop.php"; ?>
  23.  
  24.     <div class='thickbar'>
  25.         <strong>Mods (this is a div class='thickbar')</strong>
  26.     </div>
  27.  
  28.     <div class='colorbar'>
  29.         <strong>The Rebel</strong>
  30.     </div>
  31.  
  32.     <?php include "projects_rebel/rebel.php"; ?>
  33.  
  34.     <div class='thickbar'>
  35.         <strong>Maps</strong>
  36.     </div>
  37.  
  38. </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 ;-)
Aug 15 '07 #18
drhowarddrfine
7,435 Recognized Expert Expert
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.
Aug 15 '07 #19
vecima
8 New Member
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.
Aug 15 '07 #20

Sign in to post your reply or Sign up for a free account.

Similar topics

9
4081
by: Dustin | last post by:
Here's what I am trying to do: (Names represent CSS classes.) I want to create a photo gallery. I want the entire gallery to be surrounded by a box named PhotoGallery. I want a fluid placement of the individual Items within PhotoGallery. An Item is a box that has two child boxes, PhotoBox and Caption. Photobox has an explicit width and height. PhotoBox contains an image whose dimensions may vary, but are constrained to be within...
2
1907
by: Trent | last post by:
Hey All, I am new to javascript and currently coding a site with scripts that are beyond my level of understanding. The problematic page has thumbnail images that can be clicked on to zoom in. When clicked, the preloaded larger image displays in a div layer that gets turned on. The problem is that ie sometimes does not display the image - the placeholder just stays blank. The script works fine in firefox and netscape (haven't tried...
5
5336
by: ~~~ .NET Ed ~~~ | last post by:
Hi, As you all know when an ASP.NET web form is created that will include web controls and such, it contains a FORM that that identifies the web form and its containing controls. Well, I have a web form who has several other (user & custom) controls, these are enclosed within the standard FORM tag. Additionally *some* of these user controls are actually forms as well. This results into nested Forms.
3
1419
by: Roy | last post by:
Here's my problem for the curious consumption of the group mind... I have an embedded datagrid which works fine. The child grid is nested within the parent using a templatecolumn tag. Using the TR html tag I can get the child rows to appear below the parent rows (i.e., "tree-view style"), BUT I can't get the parent rows to display in a grid layout. They appear as clumped-up text and all the data runs together in a line. In other words,...
11
12328
by: Ben Holness | last post by:
Hi all, I am having some trouble with some table code. It works fine in Internet Explorer, but the layout doesn't work correctly in Firefox 1.0.7 Is this a firefox bug, or am I missing something in the HTML? It is pretty simple code! (Plus it is valid according to the w3c validator) The layout problem is in the third row. I cannot get the embedded table (with the top and bottom cells) to be the full height of the cell (unless
61
4762
by: phil-news-nospam | last post by:
Why does SVG need a different tag than other images? IMHO, SVG should be implemented as an image type just like any other image type, allowing it to work with <img> tags, and ... here is the important part ... also work with backgrounds in other tags. I fail to see any wisdom in making SVG different than say PNG (of course the implementation of the rendering code would obvious be different). --
3
4882
by: blaq | last post by:
My latest project is almost done. It looks great in Firefox; I only have two IE bugs left to squash, yay! Please refer to http://www.blaqzone.com/Temp/Popfuel/ . Crib notes: - "reset.css" is a safety net that establishes some basic values. Coded by Matt Wilcox, found at meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/#comment-989 ..
3
9516
by: littleark | last post by:
Hi everybody, I have a typical javascript images preloader, it works fine both on Firefox and on IE in my intranet (local server). It works fine on the Internet (remote server) in IE. In Firefox it stops before loading every image. Does image.onload function have some problems with little images?
2
2659
Stentorian
by: Stentorian | last post by:
Hello, I am having trouble with skinny images in Safari on a Mac (This works fine in Safari beta for windows!) Basically I have set up a CSS class using 'max-width' to ensure that images do not expand beyond 100px. I have included the hack for IE. Works fine on a PC in IE, Firefox, Opera and Safari. But in Safari on a Mac the width is confined, but the image does not scale, the height remains the actually height of the image and so I...
0
9721
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9601
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10635
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10376
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10378
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
5550
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4332
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3861
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3013
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.