PDA

Click to See Complete Forum and Search --> : learning fluid layout--image disappears!

realmuffin
04-30-2010, 06:03 PM
Hi all,

I'm experimenting with a fluid layout design.. I just have two basic images, a header image, and then a small cross sectional slice that I'm repeating (I just copy pasted the code to repeat for testing).

My problem is that when I resize my browser in Chrome (FF/IE work ok) the repeated images disappear at a certain width... I'd like the site to run ok with Chrome--eventually this part of the page will hold a DIV with content generated from Wordpress...

Any suggestions?

here's the link: http://perfectmoments.ca/new/ (http://perfectmoments.ca/new/)

here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Perfect Moments Photography</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<img src="images/headerslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
<img src="images/bgslice.png" style="width:75%; max-width: 1200px"><br />
</body>

</html>
cfajohnson
04-30-2010, 06:19 PM
I'm experimenting with a fluid layout design.. I just have two basic images, a header image, and then a small cross sectional slice that I'm repeating (I just copy pasted the code to repeat for testing).

My problem is that when I resize my browser in Chrome (FF/IE work ok) the repeated images disappear at a certain width... I'd like the site to run ok with Chrome--eventually this part of the page will hold a DIV with content generated from Wordpress...


I don't see any repeated images in FF. (Actually, I don't see anything in bgslice.png when viewing it directly.)

Are you sure you don't want to use a background image?

I'd also recommend using HTML4.01 ; there's no point to using XHTML.
criterion9
04-30-2010, 11:11 PM
I don't see any repeated images in FF. (Actually, I don't see anything in bgslice.png when viewing it directly.)

Are you sure you don't want to use a background image?

I'd also recommend using HTML4.01 ; there's no point to using XHTML.


As an additional note, your img tags are invalid xhtml as they are missing the closing "/".
realmuffin
05-02-2010, 02:33 AM
I don't see any repeated images in FF. (Actually, I don't see anything in bgslice.png when viewing it directly.)

Are you sure you don't want to use a background image?

I'd also recommend using HTML4.01 ; there's no point to using XHTML.

Is it ok to use a background image? how would you make the background image fluid vertically (since each page will be different) and horizontally?
tirna
05-02-2010, 04:46 AM
.......I'd also recommend using HTML4.01 ; there's no point to using XHTML.


I'm the exact opposite.

I would always recommend using XHTML - at least for commercial work.
cfajohnson
05-02-2010, 12:55 PM
I would always recommend using XHTML - at least for commercial work.

Why would you do that? The most-used browser doesn't understand XHTML and treats it as HTML.
realmuffin
05-03-2010, 01:19 PM
is there a downside to using xhtml? cuz if the 'most used browser' treats it as html--what's the harm?
criterion9
05-03-2010, 01:26 PM
is there a downside to using xhtml? cuz if the 'most used browser' treats it as html--what's the harm?

I'd say the more strict coding standards of xhtml help to get the most consistent results across browsers whether or not they actually use an xml parser to render the content.

As for the "most used browser" check these stats (http://www.w3schools.com/browsers/browsers_stats.asp). IE may still be one of the most used browsers but they are no longer the leader across the board as all IE versions combined only add up to 33.4% of the market according to the provided link.