Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    downward shifted image in top DIV float

    I'm new. My top full-width "logo" DIV is 100px height. i have 2 floating images of 100px height also. when floated on the right and on the left, they fit snugly inside for IE7...but Firefox has them shifting downward and out of the DIV by ~25px. i'm sure it's easy to fix...right?? There is a "main" DIV and a "wrapper" DIV 'behind' it(for lack of a more technical term). i've been playing around with the code so much that i hesitate to paste it here at first. any guidance is much appreciated. arto

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by budpiano View Post
    I'm new. My top full-width "logo" DIV is 100px height. i have 2 floating images of 100px height also. when floated on the right and on the left, they fit snugly inside for IE7...but Firefox has them shifting downward and out of the DIV by ~25px. i'm sure it's easy to fix...right?? There is a "main" DIV and a "wrapper" DIV 'behind' it(for lack of a more technical term). i've been playing around with the code so much that i hesitate to paste it here at first. any guidance is much appreciated. arto
    you can post a link to a test page?

    best regards

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's some of the code for that DIV(i'm a novice)

    <div id="wrapper">
    <!--*wrapper beg.-->
    <div id="header">
    <!--*header beg.-->
    <p><img class="floatleft" src = "photos\TrnsprtMrktRxs250x100.jpg" alt="Palawan-El-Nido"/>
    </p>
    <p><img class="floatright" src = "photos\FrmElNdRm250x100.jpg" alt="Palawan-El-Nido"/>
    </p>

    </div>
    <!--*header end-->

    And the CSS
    #header{
    height: 100px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 1px solid black;
    background-color: blue;
    }
    img.floatleft {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    float: left;
    }
    img.floatright {
    float: right;
    }

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    please put your codde between [ code] and [ /code] tags.
    was better to have a link then code inside your post,
    try to remove p tags and live img inside the div( in your code img float relative to p not to div).

    best regards

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Very kind

    i'll try. your kindness is appreciated. arto

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Got it! Much Thanx!!!

    I was copying what i saw in my book.

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by budpiano View Post
    I was copying what i saw in my book.
    you can use firebug extension for firefox to play and expreiment with css and javascript,

    best regards

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello budpiano,
    Like oesxyl has said, it'd be easier with a link since we don't have either your images or the complete code.

    I don't think there is any reason for putting those images in paragraph tags so I removed them.
    When you float things, they need to have a width. Since you will probably re-use your .floatright and .floatleft classes I added the width inline.
    Instead of using margin:0; and padding:0; on everything in your CSS, enter it once with the bit I added.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #header{
    	height: 100px;
    	border: 1px solid black;
    	background-color: blue;
    } 
    img.floatleft {float: left;}
    img.floatright {float: right;} 
    </style>
    </head>
    <body>
    	<div id="wrapper">
    		<div id="header">
    			<img class="floatleft" src="photos\TrnsprtMrktRxs250x100.jpg" width="250" height="100" alt="Palawan-El-Nido"/>
    			<img class="floatright" src="photos\FrmElNdRm250x100.jpg" width="250" height="100" alt="Palawan-El-Nido"/>
    		<!--header end--></div>
    	<!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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