954,598 Members — Technology Publication meets Social Media

Have something to say? Contribute New Article Reply to this Article

0

Overfloat? IE6/win?

:(
Get w div, it should stretch full width of screen!
Now, set a img in that Div, and float it right.
now set a in the Div and set the width for say 300px.
Now shrink IE6 window....past 300 px.... and the floated img still moves!

Makes no difference if you set the width of the DV to 100%, if you wrap the img in a DIV, if you try relatively positioning it things get ugly !.....if you set the Div in another wrapper/container Div, and set the body/html width, container and original div to 100% ...still the same problem.
:?:
So, is there a correct name for this bug, a method around it etc.?

Or am I the only one?

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

Are you looking for the 'min-width' property, which is unsupported by IE but has numerous work arounds?
http://www.doxdesk.com/software/js/minmax.html

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

0

It would be cool if you posted your code. That way noone would have to guess if they didn't understand your description of the problem...

DanceInstructor

Posting Whiz

368 posts since Feb 2005

Reputation Points: 17

Solved Threads: 14

0

Sorry... will post example code shortly... can't beleive how busy I have gotten in 3 weeks... from nothing and playing at leisure to everybody wants something, at the same time!
arghhhh!
LOL
Still, post by this evening, promise!

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

1

Is this something like what you want?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
#tl {
  background: url(tl.gif) 0 0 no-repeat;
	border: 1px solid #000;
}
#tr {
  background: url(tr.gif) 100% 0 no-repeat;
}
#br {
  background: url(br.gif) 100% 100% no-repeat;
}
#bl {
  background: url(bl.gif) 0 100% no-repeat;	
	height: 300px;
}
-->
</style>

</head>
<body>
<div id="tl"><div id="tr"><div id="br"><div id="bl">
testing
<hr style="width: 300px;" />

</div></div></div></div>
</body>
</html>

I've used the css background property to create the corners. I'm not 100% sure what effect you're trying to create, so it may need some tweaking.

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

0

OK, is it possible to then make that a full box frame... such as having a top/right/bottom/left edge in between the corners?

Your codes sure alot simpler that the one I made to just creat the box! Hell, I had 3 horizontal dives in a container, and in the middle H div, I floated a div right and a div left! thats like = 6, where as yours is just = 4.

Can't beleive it's that simple!

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

lol
what exactly do you want it to look like?
Do you want to make a rectangle in that purply colour with rounded corners, on a white background?
Do you want a white rectangle with rounded corners on the purplish background?
Send me a drawing if you like.

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

0

Basically, I have to redisign a site that had a large box set 800x600 static using tables.
The top and bottom corners were all curved, and the top and bottom edges ran inline with the two corresponding corners, (thus it lkooked like to bars, 1 at the top, 1 at the bottom, with the edges chamfered!).

Crv....Bar....Crv
........Hdr........
...Menu Bar.....
....Content......
Crv...bar.....Crv

No I have been asked to do this, but better, (the original coding was awful!), so I though CSS, make it liquid/expandable, generate minwidth properties....

So, I create a box,
put in a div for the top - float the 2 Crvs - set BgImg,
beneath is another Div for the Hdr,
Beneath this is another div, which contains a dive full of little menu div's,
2 Divs - set widths - floated R and L for the edges + the content div in the middle,
div for the bottom - float the 2 Crvs - set BgImg.

I thought it would be simple... yet as soon as you try anything remotley clever with css, you hit god knows what problems, and thats not inc. browser bugs! Just the odd way that things work and the order things need to be placed in etc..... I'm thinking of using tables for this, because CSS is just to flaming fiddly..... I can do similar stuff in tables in less than 20 minutes.... yet in CSS, it's taking days to get it to look and bahave correctly!

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

So which way round should the colours be?
A purple rounded rectangle on white, or a white rounded rectangle on purple?

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

0

For the sake of example, I would like to have a white background, with a top and bottom bar and the four crv's all pink!

Does my previous explanation make sense?
For a live sample, look at.....

www.bokb.co.uk/test/m3/m3.html

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

I don't have the colors right here, but see the attached zip file for the way I think I'd do it.

For some reason I've been trying to get a min-width thing to work on it - did you want that or have I got mixed up with someone else?

If you take out the hr tags (for the min-width), then it works perfectly. Otherwise it needs some tweaking.

Attachments autocrat.zip (1.99KB)

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

0

The min-width is also me.... I actually have a way of making ie work just like NN and MFF..... stopping the float from carrying on across the page.... you ned a PX margin on the left, a % margin on the right, and tage at the top of the HTML doc before the Doc type!

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

Do you really need a min-width on it? small screen devices like pda's render without your stylesheets, so unless someone has their browser window squashed into a tiny box, you should be ok.

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

0

By th by... how comes 1) the lesser amount of div's? 2) background: #ff3366 url(br.gif) 100% 100% no-repeat; ??? what do the %'s refer to?

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

I've split it into a top bar and a bottom bar. Hence 2 divs each.

The %'s position the corner image - this one is in the bottom right, so it's 100% accross and 100% down. The color then fills in the rest.

I guess it would work equally well with my original code.
The key change is that the images are no longer transparent, so the white area around the pink masks the pink background...

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

0

ah..makes sense!¬ Not use to the short hand.... coul've sworn I read somehwhere that some browsers don't support some of the shorthand properties...(I think!).
As to the minwidth, I want things to pass as ok in 800x600 at least, if not as small as 640x480......that way it still looks good.......the amount of sites I've seen that when reduced on width look bad! things drop, overlap etc... just don't want that!

Posting Pro in Training

431 posts since Feb 2005

Reputation Points: 63

Solved Threads: 12

0

lol
I usually use @import to hide my code from version 4 browsers, and IE5 upwards supports shorthand, so I don't bother avoiding them.

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

This article has been dead for over three months

You

© 2012 DaniWeb® LLC

Home | About Us | Contact Us | Terms of Service | Advertising Opportunities