SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help determing IE alignment bug

    Hi all

    Problem 1 of 2:

    I have a page which looks (reasonably) fine and dandy when viewed in Mozilla and Netscape though obviously IE7 decides to do something else.

    I understand there is probably some easy remedy to this but I must admit I'm struggling to find it.

    The page in question can be viewed here:

    http://www.supervideoservices.co.uk/playertest.php

    (Try it in Mozilla, Netscape and IE and you'll be able to see what the issue is foa bit better than I could explain)

    For sake of completion I'll include the code involved below:

    Code:
    /* CSS Document */
    body {
    font-family: "Calibri";
    background-image: url(background-repeat-x.jpg);
    background-repeat: repeat-x;
    background-color: #ffccff;
    margin: 0;
    padding: 0;
    }
    
    #horizontalrule {
    border: none;
    background-color: #CC99FF;
    height: 2px;
    width: 100%;
    overflow: hidden;
    }
    
    .header2text { 
    text-align: center;
    padding: 13px;
    font-weight: bold;
    font-size: medium;
    }
    a.header2text:link, a.header2text:visited {
    text-decoration: none;
    color: #CC99FF;
    }
    a.header2text:hover {
    text-decoration: underline;
    color: #FFFFFF;
    }
    
    #title {
    font-family: "Tempus Sans ITC";
    font-size: 36px;
    text-align: right;
    }
    
    #title2 { 
    font-family: "Berlin Sans FB";
    font-size: 36px;
    }
    
    p {
    	margin-left: 20px;
    	font-size: medium;
    }
    
    h1 { margin-top: 0px; }
    
    #image1 {
    float: left;
    width: 50%;
    border: 2px solid #CC99FF;
    margin-right: 20px;
    margin-left: 20px;
    }
    
    #redtext { color: #FF0000;}
    
    #mediaplayer1 {
    float: left;
    border: 2px solid #cc99ff; 
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    }
    PHP Code:
    <? 
    # copyright www.supervideoservices.co.uk
    # created by Mark Hewitt
    # created January 2008
    ?>
    <!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=iso-8859-1" />
    <title>Wedding Video with Super Video Services</title>
    <meta name="keywords" content="wedding video, wedding videos, wedding DVD, video production, sales video, event recording, music video production, Weddings, Questions, FAQ, Digital, Digital Weddings, Wakefield, Pontefract, Castleford, Normanton, Leeds, West Yorkshire, South Yorkshire, Scotland, Wakefield  Weddings, Videography, Digital Wedding Videos,DVD, DVD Weddings, Wedd, Wed, Engagements, Marriage, Marriage video, Wedding Photography, Brides, Grooms, Digital Video Editing, Weddings Websites, Bridal Videos, Video Montages, Montages, Vids, Videograhpy, Wakefield Wedding Videos, Wakefield Wedding Photographers, Wedding, Wedding Planner" />
    <meta name="description" content="Wedding Videography services from Wakefield's premier company.  DVD now available in High Definition Blue Ray and widescreen" />
    <link href="svs.css" rel="stylesheet" type="text/css" />
    <link rel="Shortcut Icon" href="favicon.ico"/>
    </head>

    <body>
    <? require "header1.php"?>
    <? 
    require "header2.php"?>

    <img src="wedding3.jpg" alt="" id="image1" />

    <div id="mediaplayer1">
    <embed
    src="http://www.supervideoservices.co.uk/mediaplayer.swf"
    width="503"
    height="450"
    allowscriptaccess="always"
    allowfullscreen="true"
    flashvars="height=450&width=503&file=http://www.supervideoservices.co.uk/playlist.xml&displayheight=300&displaywidth=503&autoscroll=true&thumbsinplaylist=true" />
    </div>

    <h1>Welcome</h1>

    <p>Your wedding day is about you as a couple and we love to create unique and beautiful images for you both to remember this once in a lifetime experience.</p>
    <p>We are passionate about wedding videography and capturing the spirit and emotion which is unique to each wedding.</p>
    <p>Wedding videography is more than a documentary and a collection of clips, it's a story, it's your story of your special day that you will treasure for years to come.</p>
    <p>It's a story that we love to tell.</p>
    <p>A special event like a wedding can take weeks if not months of planning to make it perfect, and then it's over.....</p>
    <p>All that are left are memories and that's why it's vitally important not just to have a videographer but to have the right videographer to capture all those magical moments so you can live them over again.</p>
    <p>We have experience of Asian Wedding Videography (including Hindu, Sikh and Muslim ceremonies) Christian and Jewish ceremonies as well as civil ceremonies.</p>
    <p>We also love to film Civil Partnerships.</p>
    <p>Take a look at our wedding movies in the player  on the left and if you like our style  please get in touch to arrange a meeting to view one of our many wedding movie demos now in a range of formats including High Definition BlueRay.</p>
    <p>Or request our FREE WEDDING DVD Demo <a href="feedback.php">here</a> ......</p>

    <? 
    include "footer.php"
    include 
    "googleanalytics.php"?>

    </body>
    </html>
    Header1 code:
    Code:
    <div id="title">Super Video Services</div>
     <div id="horizontalrule"></div>
    Header2 code:
    Code:
    <div class="header2text">
      <a href="index.php"         class="header2text">Home</a>
      <a href="services.php"      class="header2text">Services</a>
      <a href="prices.php"        class="header2text">Prices</a>
      <a href="yourquestions.php" class="header2text">Your Questions</a>
      <a href="showcase.php"      class="header2text">Showcase</a>
      <a href="aboutus.php"       class="header2text">About Us</a>
      <a href="enquiries.php"     class="header2text">Enquiries</a>
      <a href="testimonials.php"  class="header2text">Testimonials</a>
      <a href="privacypolicy.php" class="header2text">Privacy Policy</a>
    </div>
    Problem 2 of 2

    The bottom border of the player extends several pixels below the bottom of the player.

    Any ideas how to resolve this also ?

    Any and all help would be much appreciated and/or a pointer in the direction of an appropriate learning resource would be great.

    Regards and many thanks in anticipation.
    Last edited by jominsons; Feb 4, 2008 at 18:05. Reason: Typos

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2006
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem 1: No idea what the problem is. Could you explain what looks different in IE7 compared to FF?

    Problem 2: embeds, objects, images, etc. are inline elements and make use of line-height. That's where your extra space is coming from, the line-height. To get rid of it, just make your embed a block element;

    #mediaplayer1 embed { display: block; }

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi wyrd33

    Thanks for the reply.

    Problem 1: In ie7 (on my machine) the text "Welcome" starts half way down the page next to the mediaplayer. where as in netscape and firefox it starts at the top of the page where it should.

    problem 2: Your suggestion works like a charm in IE though removes the border in Firefox !!!! (This cross browsers compatibility is a total **** ache)

    Not sure if I've got the syntax correct.

    Code:
    #mediaplayer1 embed {
       
    	float: left;
    	border: 2px solid #cc99ff;
    	margin-top: 20px;
    	margin-left: 20px;
    	margin-right: 20px;
    	margin-bottom: 10px;
    	display: block;
    }
    I've tried placing the display: block; command at the top and bottom with the same results...

    Any ideas ?

  4. #4
    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)
    There is nothing wrong with your syntax, but I think the display rule was supposed go to a new declaration, like this:
    Code CSS:
    #mediaplayer1 {
    float: left;
    border: 2px solid #cc99ff; 
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    }
    #mediaplayer1 embed {
    display:block
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The welcome text is half way down the page in IE because IE will only wrap the text with the float immediately above it. It won't wrap with the first floated image.

    To make IE behave you would need to wrap both those images in a float and that would allow IE to let the following text wrap all the way up.

    e.g.

    Code:
    <div style="float:left">
    <img src="wedding3.jpg" alt="" id="image1" />
        <div id="mediaplayer1">
            <embed
    src="http://www.supervideoservices.co.uk/mediaplayer.swf"
    width="503"
    height="450"
    allowscriptaccess="always"
    allowfullscreen="true"
    flashvars="height=450&width=503&file=http://www.supervideoservices.co.uk/playlist.xml&displayheight=300&displaywidth=503&autoscroll=true&thumbsinplaylist=true" />
        </div>
    </div>
    (inline styles for example only)

    Hope that explains it

  6. #6
    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)
    Is it possible he can clear:left the mediaplayer1-div, and so get the text go to the top?
    Happy ADD/ADHD with Asperger's

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is it possible he can clear:left the mediaplayer1-div, and so get the text go to the top?
    Yes I think that would work also (but it is relying on buggy IE behavior as it should make no difference whether clear is added or not). However it will save on extra html so it's probably a better solution in his case

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gentlemen...You Rock !!!

    I implemented the imbed div as described by wyrd33 and erik and that resolved problem 2.

    The clear: left worked like a charm and all is well with the world.

    Just need to go to work tomorrow and check it on IE6 and see how that works out.

    Many thanks guys. V Much appreciated


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
  •