9 replies [Last post]
weborican
Offline
newbie
Last seen: 16 years 1 hour ago
Joined: 2003-10-24
Posts: 6
Points: 0

OK, can anyone tell me why this looks like dog-poopoo under IE6 for Windows, but seems to look fine on most other browsers?

I've included some extra classes to show how I'm doing the dual-column layout and make sure that isn't part of the problem. I've spend COUNTLESS hours on this problem and I'm rather frustrated at this point. Any help will be greatly appreciated. This being my first CSS project it has been extremely frustrating. Thanks!

Here is the link to the sample:

http://weborican.com/css_test/

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 12 years 33 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

Weird layout on IE6 for Windows and rounded corners

I would try setting the curve as a bg image, you've got a div closed outside of the body tags - that might be the problem with peggy.

weborican
Offline
newbie
Last seen: 16 years 1 hour ago
Joined: 2003-10-24
Posts: 6
Points: 0

Weird layout on IE6 for Windows and rounded corners

firstreflex wrote:
I would try setting the curve as a bg image, you've got a div closed outside of the body tags - that might be the problem with peggy.

You are right about the div closing outside the body tag, but that wasn't it.

The problem with making the curve image a bg is that I need to have that black border on the top, so I need a way to offset that image by -1px so that it overlaps and covers those lines on the top-right corner.

So why does IE6 screw things up so badly on this simple example?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 11 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Weird layout on IE6 for Windows and rounded corners

Hi weborican,
Here's another way to get the rounded corner to work.

img#curve-r { 
    position:relative; 
    float:right; 
    z-index:3; 
    margin-top:-4px; 
    margin-right:-1px;     
}

I have only tested it in IE6 and Netscape 7.

Hope that helps.

weborican
Offline
newbie
Last seen: 16 years 1 hour ago
Joined: 2003-10-24
Posts: 6
Points: 0

Weird layout on IE6 for Windows and rounded corners

Tony wrote:
Hi weborican,
Here's another way to get the rounded corner to work.
img#curve-r { 
    position:relative; 
    float:right; 
    z-index:3; 
    margin-top:-4px; 
    margin-right:-1px;     
}

I have only tested it in IE6 and Netscape 7.

Hope that helps.

Interesting. Thanks! That works just fine on IE6, and I can see why...but it also now breaks in the browsers were it used to be fine. Ugh!

So I guess the question is, why does IE6 sees the absolute right of podtitle be where the "right" edge is (the right edge of rightcol) is, and not where the margin is set at (50px in from the right and left)? Seems like in all other browsers an absolute right only goes as far as the margin edge.

weborican
Offline
newbie
Last seen: 16 years 1 hour ago
Joined: 2003-10-24
Posts: 6
Points: 0

Weird layout on IE6 for Windows and rounded corners

weborican wrote:
So I guess the question is, why does IE6 sees the absolute right of podtitle be where the "right" edge is (the right edge of rightcol) is, and not where the margin is set at (50px in from the right and left)? Seems like in all other browsers an absolute right only goes as far as the margin edge.

I created 2 alternate classes to show what I mean. One uses the suggestion above, the other (the one that shows by default) show it doing it the old way. Ugh, I hate having to try 50 different things just because not all browsers handle simple CSS1 the same way! Oups

weborican
Offline
newbie
Last seen: 16 years 1 hour ago
Joined: 2003-10-24
Posts: 6
Points: 0

Weird layout on IE6 for Windows and rounded corners

OK, I just can't believe this crap. I've created a second example so something that kinda works on most browsers, but now a width of 80% means two different things for IE6 and other browsers:

http://weborican.com/css_test/index2.htm

In IE6 80% width means 80% of the rightcol, but for others it seems to mean 80% of the body. What gives?

Oh yeah, and my DOCTYPE is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

htmlguy
Offline
newbie
Last seen: 14 years 32 weeks ago
Joined: 2005-03-12
Posts: 8
Points: 0

Since I like HTML why not tables?

The best thing you can do is create the same design but have the top row, where you want the image, to be a table like so. After you have created the table you could div-align it to the right. If you wanted you could create custom text with the corner in a graphics creator (fireworks, paintshop, etc.). Warning! --If you use div align it sometimes creates extra rows. So in your css, if div align didn't work, you could float the image in the table.

Here is the possible script for the table--

<table border="1" bordercolor="#000000">
<tr><td bgcolor="#ffffff">This should be an image
<div align="right"><img src="curve">
</td></tr></table>
<div id="tablecontent">Lorem Ipsum Whatever</div>

Another solution is floating the image to the right, but I know HTML, not css...well very well. Hope this helps you weborican.

Anonymous
Anonymous's picture
Guru

Weird layout on IE6 for Windows and rounded corners

I've used this technique and it seems to work in all browsers:

http://www.vertexwerks.com/tests/sidebox/

htmlguy
Offline
newbie
Last seen: 14 years 32 weeks ago
Joined: 2005-03-12
Posts: 8
Points: 0

Triumph has a very good idea

Triumph has a very good idea but if you don't want to style at all you could use my idea. (Triumph's is much better...but I'm not very good at css...that's why I am here). I did find a way that you way to make mine better.

You should make the content a col-span and have all of your images in seperate containers, meaning littler space in between your content and images. Also it makes it all inline and looks much better. Hopes this helps.