Invision Power Services > Floating image and div problem

Phil Mossop

Jul 13 2005, 04:40 PM

Have a look at this page in Opera or Firefox and you'll see that the table overlaps the picture on the right hand side, plus the image is positioned lower down than the top table row. Does anyone know a fix for this? It works great in IE.

One solution is to set the content div attribute overflow: auto; but this makes the div jump about 100px to the right in Firebox and scrollbars appear in the div in IE < 6.

CSS file: Click

Thanks!

.Kris

Jul 13 2005, 05:24 PM

Actually for me the table's text overlaps not the table it self.

Meh i got to point these out

HTML

index.php?page=about&name=karl

and

HTML

index.php?page=about&equipment=karl

I know you know whats wrong with those.

And for your problem did you try setting padding to the image right side so it can like fit in?

_

Jul 13 2005, 06:15 PM

To make it not overflow the bottom of the table, you need to have an element after it that does 'clear: both'.

Phil Mossop

Jul 13 2005, 06:36 PM

QUOTE(Veracon @ Jul 13 2005, 07:15 PM)

To make it not overflow the bottom of the table, you need to have an element after it that does 'clear: both'.

Clear both makes the table jump under the image, like this:

Click to view attachment

This is how I would like it to look (it works OK in IE, without the clear both element):

Click to view attachment

Thanks for your help.

Joshua Jones

Jul 13 2005, 06:41 PM

-edited-

Sorry, just noticed you were using a table. Can you float the table right? Though that may make you lose your wrap.

Starnox

Jul 13 2005, 07:39 PM

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" lang="en" xml:lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="The Bluebirds are the ultimate, local blues band gigging regulary around the York area. The official Bluebirds band homepage contains gig information as well as pictures and band member profiles.">
<meta name="keywords" content="The Bluebirds, Bluebirds music, rock, blues, Karl Snowden, James Welburn, Kieran Ward, Tom Keeley, gigging, York">

<script type="text/javascript">
//<![CDATA[
    function NewWindow(mypage,myname,w,h,features)
    {
        var winl = (screen.width - w) / 2;
        var wint = (screen.height - h) / 2;

        if (winl < 0) winl = 0;
        if (wint < 0) wint = 0;

        var settings = 'height=' + h + ',';
        settings += 'width=' + w + ',';
        settings += 'top=' + wint + ',';
        settings += 'left=' + winl + ',';
        settings += features;

        win = window.open(mypage,myname,settings);
        win.window.focus();
    }
//]]>
</script>

<title>The Bluebirds - Karl's Profile</title>
<link href="global.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id='container'>

    <div id='nav'>
        

        <a href='index.php?page=home' title='Bluebirds homepage'>Home</a>  
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />  

        <a href='index.php?page=about' title='Bluebirds band profiles'>Band</a>  
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />  

        <a href='index.php?page=sound' title='Bluebirds discography'>Discography</a>  
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />  

        <a href='index.php?page=gigs' title='Bluebirds gig list and info'>Gigs</a>  
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />  

        <a href='index.php?page=pictures' title='Bluebirds pictures'>Pictures</a>  
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />  

        <a href='index.php?page=contact' title='Contact The Bluebirds'>Contact</a>  
        <img src='gfx/nav_sep.gif' width='1' height='36' alt='' />  

        <a href='index.php?page=forum' title='Bluebirds forum'>Forum</a>
    </div>

   <div class='sidebar'>
        <div class='sidebartitle'>Gig Guide (5/7)</div>
        <div class='starlinks'>
            <ul><li><a href='index.php?page=gigs'>20th July</a></li><li><a href='index.php?page=gigs'>23rd July</a></li><li><a href='index.php?page=gigs'>11th August</a></li><li><a href='index.php?page=gigs'>18th August</a></li><li><a href='index.php?page=gigs'>31st August</a></li><li><a href='index.php?page=gigs'><em>Full listing</em></a></li></ul>
        </div>
    </div>

   <div class='sidebar'>
        <div class='sidebartitle'>Bluebirds Extras</div>
        <div class='starlinks'>
            <ul>
                <li><a href='index.php?page=wallpaper' title='Get Bluebirds Wallpaper'>Wallpaper</a></li>
                 
            </ul>
        </div>
    </div>

   <div class='sidebar'>
        <div class='sidebartitle'>Random Lyric</div>
        <div class='sidebarbody'>
            <span class='bigquote'>"</span><em>Hey, my baby don’t love me no more</em><span class='bigquote'>"</span><br /><br />
            <p class='randomsong'>- Red House</p>
        </div>
    </div>

    <div id='breadcrumb'>
        <p><a href='index.php?page=home'>Home</a> / <a href='index.php?page=about'>About</a> / <a href='index.php?page=about&name=karl'>Karl</a></p>
    </div>

    <div id='content'>
    <h1>Karl's Profile</h1>
            <a href='index.php?page=about&equipment=karl'>View Karl's Equipment</a>
                <p>
                                <table cellpadding='0' cellspacing='0' border='0' class='generictable' align='center'>
                <tr>
                    <td><strong>Bluebird No.</strong></td>
                    <td>2</td>
                    <td rowspan="10" valign="top"><img src='gfx/profile/karl.jpg' width='150' height='421' alt='The Bluebirds - Karl Snowden' /></td>
                </tr>
                <tr>
                    <td><strong>Name</strong></td>
                    <td>Karl Snowden</td>
                </tr>
                <tr>
                    <td><strong>Age</strong></td>
                    <td>17</td>
                </tr>
                <tr>
                    <td><strong>Band Role</strong></td>
                    <td>Vocalist and Rhythm Guitarist</td>
                </tr>
                <tr>
                    <td><strong>Influences</strong></td>
                    <td>The Jimi Hendrix Experience, The Eagles, SRV and Double Trouble, David Bowie, Dire Straits, Lynyrd Skynyrd, Derek and the Dominoes, Ash, Stereophonics, The Hamsters, ZZ Top, The Beatles</td>
                </tr>
                <tr>
                    <td><strong>Started Playing Guitar</strong></td>
                    <td>Have been playing guitar and bass for about 2 ? years</td>
                </tr>
                <tr>
                    <td><strong>Instrument Specific Influences</strong></td>
                    <td>Jimi Hendrix, Robben Ford, SRV, Robert Johnson, Joe Walsh, Brian May, Eric Clapton, Slim</td>
                </tr>
                <tr>
                    <td><strong>Favourite Bluebirds Song</strong></td>
                    <td>Jimi</td>
                </tr>
                <tr>
                    <td><strong>Favourite Cover Song</strong></td>
                    <td>Red House, by Hendrix of course :)</td>
                </tr>
                <tr>
                    <td><strong>Favourite Gig</strong></td>
                    <td>The most recent one [22nd June 05] at the Basement Bar was pretty damn good</td>
                </tr>
            </table>

            <br />
            <strong>Other Comments</strong><br /><br />
            If you can find two photos where my hair is the same colour, I'll give you 50% off our next gig! <span style='font-size: 8pt;font-style: italic;'>(This comment is clearly only of comical value, and therefore no discounts will be made regarding entry to any Bluebirds gigs)</span>
        </p>
    </div>

    <p id='copyright'>All content and audio copyright © Bluebirds 2004 - 2005</p>

</div>

</body>
</html>

Is one way of doing it.

Joshua Jones

Jul 13 2005, 07:49 PM

Yeah I guess if you are going to have a table anyway might as well use it.

Good Idea.

Phil Mossop

Jul 13 2005, 08:12 PM

Thanks Starnox!!

Starnox

Jul 13 2005, 08:29 PM

QUOTE(Phil Mossop @ Jul 13 2005, 09:12 PM)

Thanks Starnox!!

Glad I could help