www.webdeveloper.com
Results 1 to 8 of 8

Thread: learning fluid layout--image disappears!

  1. #1
    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>

  2. #2
    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/

  3. #3
    Join Date
    Jan 2009
    Posts
    3,346
    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 "/".

  4. #4
    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?

  5. #5
    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.

  6. #6
    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/

  7. #7
    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?

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    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.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

Posting Permissions

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



Recent Articles