SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right Float problem in FF & IE

    Hi Peeps

    Having a problem with PC browsers. On the following site:

    www.moments.org.uk

    The header should look like this (seen on Apple Safari on the PC)

    http://koko.pelli.co.uk/downloads/moments.jpg

    But it appears the testimonial and nav element is sittin behind the image.
    Anyone help me out as to why?

    Code I'm Using:

    Code:
    <div id="header_strap">
    	<div id="header_elements">
    		<div id="header_container">
    			<a href="/"><img src="/images/logo.gif" alt="Moments Wedding Photography" /></a>
    			<div style="float: right;">
    				<p class="headmenu"><a href="/contact.php">contact</a> | <a href="sitemap.php">site map</a></p>
    			</div>
    			<div id="testimg"><img src="/images/testimonial.gif" alt="Moments Wedding Photography Testimonial" /></div>
    			
    		<!--Header Container Close--></div>
    	<!--Header Elements Close--></div>
    <!--Header Strap Close--></div>
    
    <div id="img_strap_bg">
    	<div id="img_strap_container">
    		<img src="/images/img_block_001.jpg" alt="" />
    	<!--Img Strap Container Close--></div>
    <!--Img Strap BG Close--></div>
    Code:
    #header_strap { height: 109px; background: url(/images/header_fade.gif); }
    #header_elements { width: 980px; text-align: center; margin: 0 auto; }
    #header_container { text-align: left;}
    
    #testimg { float: right; margin: 25px 0 0 0; }
    
    p.headmenu { margin: 10px 10px 0 0; }
    p.headmenu a:link, p.headmenu a:visited { color: #fff; }
    p.headmenu a:hover { color:  #595959; text-decoration: underline; } 
    
    #img_strap_bg { height: 185px; background: url(/images/img_block_bg.gif) repeat-x left top; }
    #img_strap_container { width: 980px; text-align: center; margin: 0 auto; }
    #img_strap_container img { display: block }
    
    #nav_bg { height: 41px; background: url(/images/nav_fade.gif) repeat-x left top; }
    #nav_strap { width: 980px; text-align: center; margin: 0 auto; }
    #nav_elements { text-align: center; padding-top: 17px; }
    #nav_elements a { text-align: center; border: none; }
    #nav_elements img { vertical-align: bottom; }
    Thanks in advance
    Si
    Last edited by Sikwondo; Jan 24, 2008 at 05:14.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if you first float the logo.gif to the left.
    Code HTML4Strict:
    <div id="header_strap">
    	<div id="header_elements">
    		<div id="header_container">
    			<a href="http://www.moments.org.uk/" style="float: left;"><img src="logo.gif" alt="Moments Wedding Photography"></a>
    			<div style="float: right;">
    				<p class="headmenu"><a href="http://www.moments.org.uk/contact.php">contact</a> | <a href="http://www.moments.org.uk/sitemap.php">site map</a></p>
    			</div>
    			<div id="testimg"><img src="testimonial.gif" alt="Moments Wedding Photography Testimonial"></div>
     
    		<!--Header Container Close--></div>
    	<!--Header Elements Close--></div>
    <!--Header Strap Close--></div>
    But don't use the inline styles: (Maybe also set the img_block_001.jpg image as a background if it is not content?)
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I have kind of fixed it, but now the image moves to the right.

    (See test site: http://moments.pelli.co.uk/

    I have tried to use <br class="clear" /> (clear: both and it moves the image to the correct place, but it leaves a large white gap.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    All you needed to do was to move the first image to the end of the html. Floats need to come before the static content if you want them to be level.

    Code:
    <div id="header_container"> 
                    <div style="float: right;">
                        <p class="headmenu"><a href="/contact.php">contact</a> | <a href="sitemap.php">site map</a></p>
                    </div>
                    <div id="testimg"><img src="http://www.moments.org.uk/images/testimonial.gif" alt="Moments Wedding Photography Testimonial" /></div>
                    <a href="/"><img src="http://www.moments.org.uk/images/logo.gif" alt="Moments Wedding Photography" /></a><!--Header Container Close-->
                </div>
    Floats should always come first although if a float follows inline content then the float should stay on the same line as the inline content but very few browsers do this/ Therefore for arguments sake always have the float before any content you want to wrap.

    Or as erik said float both elements.

    That head section is a little untidy and overcomplicated and you shouldn't use inlne styles or add extra divs when not needed

    e.g.
    Code:
    <div style="float: right;">
                        <p class="headmenu"><a href="/contact.php">contact</a> | <a href="sitemap.php">site map</a></p>
                    </div>
    You could have just added float-right to p.headmenu and not used a div at all.

  5. #5
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot Paul, haven't coded a site in a while now so making stupid mistakes.

    Thank you both for your help


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
  •