Work, damn you! (CSS issue)

[Patrick Shannon]

CSS....so powerful, yet always has to have some glitch to it.

Take a look at this (in any other browser than IE):

http://www.baitedblade.com/new_site/test.php (view the source if needed)
My stylesheet: http://www.baitedblade.com/new_site/stylesheet_mozilla.css

As you can see, I have "side DIVs" with images in them floated on the right, cleared on the right, and that way I accomplish that rounded corner where the text flows nicely around it (I've added red borders to help see the DIVs). But now, I've attempted to introduce an image (test image) into the actual body of the text (the "content" DIV).

Now, I need to add images that have the text flow around them. So I add that test image clear at the top (before the text begins) with a "float: right" property, expecting it to line up to the right of that same spot (about four or five "side DIVs" down).

But for some reason, it insists on bumping down to line up with the last floating side DIV! (the eleventh "side DIV" down).

After messing around an hour with it, I attempted to go "old school" and just used the traditional "align="right" in the image HTML, and IT STILL DOES THE SAME THING!

If you remove any floating or align properties, the image lines up where it's suppose to as normal with no text wrap, but that's no good if it doesn't wrap text.

I really don't get why that image insists on lining up with the very last side DIV, if you start taking those side DIVs away one by one, then the image continues to line up with the last DIV placed. Each of those DIV's have the same stylesheet properties (there's no "clear: both" on any of them), so why such love for that last DIV?

Does anyone have any ideas why this is happening?

[Ryan8720]

I don't see the reason for the content div (which has two z-index values BTW). You could just put the content in the container div. Or you could try moving the "curve" images into the content div. I would think one of those would fix the problem.

[Roo-1]

First off try validating both your code and your CSS:

Your code errors. (http://validator.w3.org/check?verbose=1&uri=http%3A//www.baitedblade.com/new_site/test.php)

Your one CSS error. (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.baitedblade.com/new_site/test.php)

The validator is your friend! :)

[Patrick Shannon]

Ryan:

The reason is because of the "header" DIV, it uses absolute positioning in order to "drop" behind the side curve. Therefor, the "content" would be positioned on top of it. Hence, by using a "content" DIV, I can use the margin to drop it below the absolutely positioned DIV. Now, if there's a way to get text and content to wrap around an absolutely positioned DIV, I'd like to know...

Roo: Forgot all about the validator, I'll have to check that out.

[Patrick Shannon]

I've tried to fix all the offending errors from the report, but it didn't correct the problem.

I also tried to eliminate my content DIV and even the container DIV (just to see what it'd do) and the problem still exists.

I also tried to move the curved images DIVs into the content DIV, and no luck.

If I could get text to wrap around an absolutely positioned item, I could possibly cheat it that way.

[Ulysses]

Did you try looking at this (http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm) or this (http://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html) or this (http://www.tizag.com/cssT/float.php) for guidance, Patrick.

I don't use wrapping myself ... it is just too clunkily implemented and blocky for my liking, so I cannot advise from personal experience. Sometimes - being the nature of the beast - it is good to start from scratch, especially where CSS is concerned.

Let us know how you get on.

[Patrick Shannon]

Ulysses: That first link is originally where I got the idea for my layout.

I've set up an incredibly crude example with minimalist CSS code at http://www.baitedblade.com/new_site/test_example.php and it's still doing the same thing. Wacky....wacky....

[Ulysses]

I'll have a try myself since I have 5 minutes to spare, and see if I have any luck.

[Ulysses]

This works a little better than what you've got so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Test</title>
<style>
div.container{
width: 600px;
border: solid 1px #666;
}

img.floatLeft{
float: left;
margin: 4px;
}

img.floatRight{
float: right;
margin: 4px;
}

div.float1{
float: right;
clear: right;
width: 200px;
height: 40px;
border: solid 1px #777;
}
div.float2{
float: right;
clear: right;
width: 150px;
height: 40px;
border: solid 1px #777;
}
div.float3{
float: right;
clear: right;
width: 100px;
height: 40px;
border: solid 1px #777;
}
</style>
</head>
<body>

<div class="container">
<img src="test.gif" class="floatLeft">
<div class="float1"></div>
<div class="float2"></div>
<div class="float3"></div>
<p>Ommy nonsequat wisl in ullandrer secte veraesting eumsandrem iurer si blam iuscinibh eum dolesed et inciliquam nullandre do odolesto euis dunt dolese doluptate dolorti smolor si tat in ut prat. An hent prat. Ud tet, consed min hent euisi. To odignibh exercip suscin exerosto etumsan dionums andiat, quat prat. Igna alis ex eui er adiate faccum alisisit am vel ipit laoreet am dolortie te facil ut am adipisim dolestrud min henibh eugue tie ming ex er suscip et alisi er auguerosto od dolenibh eugue tis ero odiam nullaorper sustionsed te eraessenis nim iriusci duisit iure delit dolortin utem dolorem zzril et, quam dolor sim zzrillumsan venis dionum veril do commy nonsequ iscipit, conulputem autate tet pratie endit vulla conulputat etue exeriusci bla alit ipis aciduis acipit in etueraesenim aut eugue magna faci tatet praestie molore magna augait iustrud dolortiniat. Ut ad tem duis alit lore dolummy nibh et delismo lobore exerat, volortis nibh eu facilis esed dit, vercincin velent nonsendip et diat, volorercilit veraesto dunt utet el irit, qui tie deliquatio od tie mod euip exerilit dolestio commod ea feum dolor sisi blaore digna feuip exerostis nulluptat estinim dolobor alit utpat ametumm odipis el dionulp utatisit lummodit il utat deliquatis dionsenis nullut lor alit, quamet ing esto duipsustrud dipit iureet ute tat nim iusto essi elesenisit ad eum zzrit ut num nismolor adignim in erostio commy nostrud et accum in ulluptat vel ex eriusci te te dolorti onullamconum velissecte faccum dunt loreet autpat nonullaor am iurem delent dunt digna feum venibh et aut vel utat. Er ad minis dolorero euipis nulput ilit am eugiatumsan eum eu facing esto commod ex ero odit ad tat. Iquam, sustrud eraese eu feum ea augiat. Ut doleniat. Ut la augiam, quam zzriure te min utem zzrit, conse diatio odo eros nim nostrud dolesto odolesequis nonulla autpat.</p>
</div>

</body>
</html>

[Ulysses]

Always be sure to specify a doc type too, otherwise browsers have a habit of rendering your layout differently.

[Patrick Shannon]

Hmm....not quite. The left float worked just fine at the top, but only because it went right before the side bars in the code. Float that graphic to the right, and it ends up moving on top of the side bars instead of right to the left of the first bar, and that ruins the layout. So like the text, the image has to go after the side DIVs. But do it that way, and take a look at it now, once again it continues to have a hard-on for that very last DIV (you'd think it would at least try to place AFTER it).

http://www.baitedblade.com/new_site/test_example2.php

What's funny is that I could swear that this layout worked just fine when I worked on it at work (I'm using a much older version of Mozilla).

[Ulysses]

This is as tight as I can get it so far, Patrick. I cannot fathom how to ensure the top line of text is truely at the top in mozilla browsers, but you do need to be more specific with the image margins generally (albeit, to meet the human eye, as opposed to actual mathematical logic, lol), to help make the wrapping tighter:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Test</title>
<style>
div.container{
width: 600px;
border: solid 1px #666;
}

img.floatLeft1{
float: left;
margin: 4px 4px -2px 4px;
}
img.floatRight1{
float: right;
margin: 4px 4px -2px 4px;
}

img.floatRight{
float: right;
margin: 4px;
}

div.float1{
float: right;
clear: right;
width: 200px;
height: 40px;
border: solid 1px #777;
}
div.float2{
float: right;
clear: right;
width: 150px;
height: 40px;
border: solid 1px #777;
}
div.float3{
float: right;
clear: right;
width: 100px;
height: 40px;
border: solid 1px #777;
}
</style>
</head>
<body>

<div class="container">
<img src="test.gif" class="floatLeft1">
<div class="float1"></div>
<div class="float2"></div>
<div class="float3"></div>
<p>Ommy nonsequat wisl in ullandrer secte veraesting eumsandrem iurer si blam iuscinibh eum dolesed et inciliquam nullandre do odolesto euis dunt dolese doluptate dolorti smolor si tat in ut prat. An hent prat. Ud tet, consed min hent euisi. To odignibh exercip suscin exerosto etumsan dionums andiat, quat prat. Igna alis ex eui er adiate faccum alisisit am vel ipit laoreet am dolortie te facil ut am adipisim dolestrud min henibh eugue tie ming ex er suscip et alisi er auguerosto od dolenibh eugue tis ero odiam nullaorper sustionsed te eraessenis nim iriusci duisit iure delit dolortin utem dolorem zzril et, quam dolor sim zzrillumsan venis dionum veril do commy nonsequ iscipit, conulputem autate tet pratie endit vulla conulputat etue exeriusci bla alit ipis aciduis acipit in etueraesenim aut eugue magna faci tatet praestie molore magna augait iustrud dolortiniat.
<img src="test.gif" class="floatRight1">
Ut ad tem duis alit lore dolummy nibh et delismo lobore exerat, volortis nibh eu facilis esed dit, vercincin velent nonsendip et diat, volorercilit veraesto dunt utet el irit, qui tie deliquatio od tie mod euip exerilit dolestio commod ea feum dolor sisi blaore digna feuip exerostis nulluptat estinim dolobor alit utpat ametumm odipis el dionulp utatisit lummodit il utat deliquatis dionsenis nullut lor alit, quamet ing esto duipsustrud dipit iureet ute tat nim iusto essi elesenisit ad eum zzrit ut num nismolor adignim in erostio commy nostrud et accum in ulluptat vel ex eriusci te te dolorti onullamconum velissecte faccum dunt loreet autpat nonullaor am iurem delent dunt digna feum venibh et aut vel utat. Er ad minis dolorero euipis nulput ilit am eugiatumsan eum eu facing esto commod ex ero odit ad tat. Iquam, sustrud eraese eu feum ea augiat. Ut doleniat. Ut la augiam, quam zzriure te min utem zzrit, conse diatio odo eros nim nostrud dolesto odolesequis nonulla autpat.</p>
</div>

</body>
</html>




Having played around with wrapping, it appears that you need to strategically place the images within the text, and make a balance between text/line height and image height/width/margins. Referring back to your original (http://www.baitedblade.com/new_site/test.php) design, the above code should help you to do it.

This construction doesn't help keep to the structure/design seperation rule exactly, but then again, you're trying to achieve a visual effect, so you need to put that engineering attitude aside, in favour of the plain old brick-a-brack approach.

[Patrick Shannon]

With the above though, that right aligned image (second one) is aligned after the third DIV. But with something more "larger," once again it hugs the final DIV....

http://www.baitedblade.com/new_site/test_example4.php (NOTE: As mentioned, what's really ridiculous is that it continues to do this even if you use the old school "align="right" HTML way!)

Where in contrast, the image obeys it's positioning if you don't use a CSS float or align="whatever", but that's no good.....

http://www.baitedblade.com/new_site/test_example3.php

I've noticed something interesting however, if you use an "align="right" on a DIV without any CSS, it obeys.....

http://www.baitedblade.com/new_site/test_example5.php

But no text wrap, of course.

Here's something else more interesting...if you use a "text-align: right" or whatever on text, it will obey it's positioning. (The "Back to Calendar" link has "text-align: right")

http://www.baitedblade.com/new_site/event.php?id=19

And yes, I've even tried that "text-align" on DIVs and images and no go.

I'm beginning to think this is a bug in CSS pertaining to images and I'm screwed if I'm wanting to use any text wrap. The only solution I can think of is either using images centered between paragraphs (too much dead space), or this....

http://www.baitedblade.com/new_site/test_example6.php

...and unless there's a way to dynamically link text boxes/DIVs (even with PHP), what a pain in the ass.

Anyway, I appreciate your assistance Ulysses...I am going to email the people behind the wrapping tutorial to see what they have to say, and if that doesn't work, I'll probably have to scrap this entire webpage....hours and hours down the tube...sigh.

[Patrick Shannon]

More observations...

I've just viewed this in Internet Explorer on the PC side (even though I haven't designed it's stylesheet yet, so it's using Mozilla's), and it actually gets the floating/aligning of that image correct.

Unfortunately, that doesn't make up for the 1001 other things wrong with it (IE CAN'T USE Z-INDEX?!?)

[JPnyc]

IE handles z-index just fine.

[Patrick Shannon]

View this in IE and a different browser:

http://www.baitedblade.com/new_site/introduction.php

That header that tucks behind the side graphics (lower Z-index) disappears in IE and so does the side menubar (higher Z-index).

[JPnyc]

I use z-index in IE all the time. If it's not working there, there's some other reason for it.

[Ulysses]

Z-index will only work with absolute positioned elements (at least in IE - not fully tested this myself).

[Patrick Shannon]

I've revisited this problem after taking some time off this, as far as the z-index problem, Ulysses is right, Internet Explorer is a wimp when it comes to z-index with anything other than absolutely positioned items. Because of this, I'm forced to go back to the drawing board with a few of my elements, man IE sucks hard.

As far as the original problem, I don't think there's a way to fix it. I'll just have to use center aligned images with no text flow and think of a way to make it look seamless.

[JPnyc]

Why would z-index be needed for elements not absolutely positioned? How else can you superimpose one element on top of another?

[Patrick Shannon]

Z-index is needed for me to drop a header banner behind the side layers (using transparancy) of side DIVs being relatively positioned. So why not absolutely position the side DIVs? Typically, I would. But in this case, they have to be relatively positioned in order to float to the right and allow text to wrap around them. If there was a way to make text wrap around an absolutely positioned item, then that'd solve a lot of problems but that's not the case.

But anyway, this particular layout works as expected in Mozilla and other browsers, but not IE.

Basically now I have to give up the z-index idea and use some PHP trickery to substitute different banners/headers (already integrated into the side bars) depending on which page is loaded, and then use image maps for the menu.