3 replies [Last post]
carlitos
Offline
newbie
Montreal
Last seen: 12 years 1 week ago
Montreal
Joined: 2008-07-02
Posts: 4
Points: 0

Hi, this is my first post in this forum, since Ive been having this head aches trying to get this code working but nothing, so i decided to look for somehelp in the css community Tongue.

I am coding this website but is giving me such a problem with IE, i guess thats normal...Im having pixels gap in two part of my website, first, right after my header and second and most important is with my main content margin. I have a basic template with header sidebar, maincontent and footer, the sidebar is floated left and the main content just follows the flow of the document and stays away from the side bar with a margin big enough for this purpose. BUt "somehow" it works perfectly everywhere but in IE6, the main content is getting an extra space of 3px at the left and being pushed down of its position.

this is the link of the website

xmma.tv/sample.html

id like to know what am i missing here, cause ive tried so many things, even the zoom : 1px; but nothing.

thanks in advance :thumbsup:

google@ildw.com's picture
Offline
Enthusiast
Houston, Texas Jeahhhh!
Last seen: 3 years 39 weeks ago
Houston, Texas Jeahhhh!
Timezone: GMT-5
Joined: 2006-10-17
Posts: 117
Points: 25

floats

Hee, I think that your content and side bars widths added together are greater than the width of the mainwrapper. for this reason your content goes down, reduce the size until you get them in the right place.

carlitos
Offline
newbie
Montreal
Last seen: 12 years 1 week ago
Montreal
Joined: 2008-07-02
Posts: 4
Points: 0

That might of solve the

That might of solve the problem for IE6 but what about the rest of the browsers? I just want a code to let me put my template without this problem, and theres a swf embeded with a certain width so its not like a text that you can just move here and there and put the container divission smaller without problems, any other tips? please Sad

CitizenXC
Offline
newbie
Punta Gorda, FL
Last seen: 11 years 46 weeks ago
Punta Gorda, FL
Timezone: GMT-4
Joined: 2008-08-21
Posts: 1
Points: 0

My Solution

What solved the problem for me was putting all the code on one line for the offending image. For example, my original code looked like this:

<div style="position:relative;">
    <img src="/images/order_DP.jpg" 
        alt="some text here"/>
    <div class="whitetext" style="position:absolute;top:127px;left:187px;
        width:220px;text-align:center;">
        Some other text went here.
    </div>
</div>

When I put that all on a single line, the 3 pixels were gone.
<div style="position:relative;">
    <img src="/images/order_DP.jpg" alt="some text here"/><div class="whitetext" style="position:absolute;top:127px;left:187px; width:220px;text-align:center;">Some other text went here.</div>
</div>

I don't know the technical stuff behind it, but it works for me in all the cases where I had 3 pixel issues previously.

HTH