Image being cut off in IE6 - help/advice please

Dev Shed Forums Sponsor:

May 5th, 2008, 01:03 AM

sanchoNZ

Registered User

Join Date: May 2008

Posts: 2

Time spent in forums: 27 m 50 sec
Reputation Power: 0

Image being cut off in IE6 - help/advice please

Hi all, I have modified a wordpress theme for my website and its nearly perfect except for an issue where my photo is being cutoff and I have had a look but it appears to be beyond my skill level and is making me pull my hair out.

Would REALLY appreciate if anyone can solve this one for me!

hmmm I cannot post the url yet as i am new

dubdubdub.lightwork.co.nz/?p=1 is the url please replace dubdubdub with www

thanks

that is the url and its the second image down, the larger image. It works fine in firefox and ie7, but in ie6 (which it needs to work in it is being cutoff as you can see.

Any help would REALLY be appreciated. happy to do something in photoshop or whatever in return

Mark

May 5th, 2008, 06:22 AM

GameYin

Contributing User

Join Date: Jan 2008

Location: Whiteford, MD

Posts: 348

Time spent in forums: 3 Days 11 h 54 m
Warnings Level: 5
Reputation Power: 60

It's blocked for me at my school. Can you post the HTML and CSS for it? I like it side-by-side. Thanks

__________________
Adwords Professional
You can give me

May 5th, 2008, 10:26 AM

marlun78

Registered User

Join Date: Feb 2005

Location: Malmö, Sweden

Posts: 17

Time spent in forums: 6 h 22 m 42 sec
Reputation Power: 0

Hi,
The image is placed in the left column. In the CSS class "span-15" you have "with:590px;". So the column is actually only 590 pixels wide and thats why IE 6 does not display the right part of it.
I would instead of having:

<div>Left Column Content</div>
<div>Right Column Content</div>

...as you do, I would go:

<div style="float:left;">
<div style="float:right;">Right Column Content</div>
Left Column Content
</div>

That should work cross-browser.

Example:

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>
        <title>Test</title>
        <style type="text/css">
            body {
                text-align:center;
            }
            .container {
                margin:0 auto;
                width:950px;
                text-align:left;
            }
            .menu {
                background:#ccc none;
            }
            .content {
                background:#fcc none;
                float:left;
            }
            .right {
                background:#cfc none;
                float:right;
                width:200px;
            }
            .footer {
                background:#ccf none;
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="menu">Menu</div>
            <div class="content">
                <div class="right">
                    <p>Right Column</p>
                </div>
                <p>Left Column</p>
                <img src="http://stuff.visualtwist.com/photos/photo_of_day/ninja-see-no.jpg" alt="" />
            </div>
            <div class="footer">Footer</div>
        </div>
    </body>
</html>

Hope it helps.
/Martin

May 5th, 2008, 12:19 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 15,149

Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294

There seems to be an easier fix than what Martin suggested. Just give the <img> position:relative. For example, this rule would do it:

Code:

div.entry img {
  position: relative;
}

__________________
Spreading knowledge, one newbie at a time.

Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

IE7: the generation 7 browser new in a world of generation 8 browsers.
Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

May 5th, 2008, 07:10 PM

sanchoNZ

Registered User

Join Date: May 2008

Posts: 2

Time spent in forums: 27 m 50 sec
Reputation Power: 0

Quote:

Originally Posted by Kravvitz

There seems to be an easier fix than what Martin suggested. Just give the <img> position:relative. For example, this rule would do it:

Code:

div.entry img {
  position: relative;
}

Thanks for your replies guys, really appreciated as this is the last part that is holding me back before getting alot of my photography online!

I simply put that bit of code into my CSS sheet and it seems to work. You guys ROCK! Hehe, I spent 4 - 5 hours trying allsorts on that. Now I can concentrate on doing what I do best, taking photos, processing them in photoshop and putting them online to display correctly!

Once again, a big thankyou

Viewing: Dev Shed Forums > Web Design > CSS Help > Image being cut off in IE6 - help/advice please

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.

Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.

Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.

Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.

Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.

More Free IT White Papers!