www.webdeveloper.com
Results 1 to 8 of 8
  1. 04-30-2010, 06:03 PM #1
    realmuffin
    realmuffin is offline Registered User
    Join Date
    Jul 2009
    Posts
    77

    Question learning fluid layout--image disappears!

    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/

    here's the code:

    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>
    Reply With Quote Reply With Quote
  2. 04-30-2010, 06:19 PM #2
    cfajohnson's Avatar
    cfajohnson
    cfajohnson is offline Registered User
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by realmuffin View Post
    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.
    Chris F.A. Johnson
    http://cfajohnson.com/
    Reply With Quote Reply With Quote
  3. 04-30-2010, 11:11 PM #3
    criterion9
    criterion9 is offline B.S. CIS
    Join Date
    Jan 2009
    Posts
    3,343
    Quote Originally Posted by cfajohnson View Post

    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 "/".
    Reply With Quote Reply With Quote
  4. 05-02-2010, 02:33 AM #4
    realmuffin
    realmuffin is offline Registered User
    Join Date
    Jul 2009
    Posts
    77
    Quote Originally Posted by cfajohnson View Post

    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?
    Reply With Quote Reply With Quote
  5. 05-02-2010, 04:46 AM #5
    tirna's Avatar
    tirna
    tirna is offline Registered User
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by cfajohnson View Post
    .......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.


    Reply With Quote Reply With Quote
  6. 05-02-2010, 12:55 PM #6
    cfajohnson's Avatar
    cfajohnson
    cfajohnson is offline Registered User
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Quote Originally Posted by tirna View Post
    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.
    Chris F.A. Johnson
    http://cfajohnson.com/
    Reply With Quote Reply With Quote
  7. 05-03-2010, 01:19 PM #7
    realmuffin
    realmuffin is offline Registered User
    Join Date
    Jul 2009
    Posts
    77
    is there a downside to using xhtml? cuz if the 'most used browser' treats it as html--what's the harm?
    Reply With Quote Reply With Quote
  8. 05-03-2010, 01:26 PM #8
    criterion9
    criterion9 is offline B.S. CIS
    Join Date
    Jan 2009
    Posts
    3,343
    Quote Originally Posted by realmuffin View Post
    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. 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&#37; of the market according to the provided link.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

 HTML5 Development Center



Recent Articles