Overfloat? IE6/win?

Question

autocrat 52 Posting Pro in Training

19 Years Ago

:(
Get w div, it should stretch full width of screen!
Now, set a img in that Div, and float it right.
now set a <hr> 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?

web-design

3 Contributors
17 Replies
431 Views
4 Days Discussion Span
Latest Post 19 Years Ago Latest Post by DaveSW

DaveSW 15 Master Poster

19 Years Ago

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

DanceInstructor 19 Posting Whiz

19 Years Ago

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...

DaveSW 15 Master Poster

19 Years Ago

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.

DaveSW 15 Master Poster

19 Years Ago

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.

DaveSW 15 Master Poster

19 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

autocrat 52 Posting Pro in Training · Answer 1 · 2005-04-03T21:10:18+00:00

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!

autocrat 52 Posting Pro in Training · Answer 2 · 2005-04-04T02:57:51+00:00

OK....some code.....

++++++++++++++++ HTML ++++++++++++++++


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN"
"http://www.w3.org/TR/html4/strict.dtd">


<html>


<head>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>


<body>



<div id="page">


<div id="container">


<div id="boxtop">
<div id="tr"></div>
<div id="tl"><img src="tl.gif"></div>
</div>
<div id="boxmiddle"></div>
<div id="boxbottom">
<img class="br" src="br.gif">
<img class="bl" src="bl.gif">
</div>
<hr class="minwidth" />
</div> <!--  container  -->


</div> <!--  page  -->



</body>


</html>



++++++++++++++++ CSS ++++++++++++++++


/*  -----------------------------------------------------------   */
/*  ------ CSS START for EXAMPLE ------   */
/*  -----------------------------------------------------------   */


/*  ------ GLOBAL section START ------   */
html,body
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 0px;
border-style: solid;
border-color: #000000;
height: 100%:
width: 100%;
background-color: #000000;
}


#page
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 0px;
border-style: solid;
border-color: #000000;
height: 100%:
width: 100%;
background-color: #f500f5;
}
/*  ------ GLOBAL section END ------   */
/*  ------ CONTAINER section START ------   */


#container
{
padding: 0px 0px 0px 0px;
margin: 0px 3% 0px 3px;
border-width: 1px;
border-style: solid;
border-color: #000000;
height: 100%:
width: 100%;
background-color: #f5f5f5;
min-width: 300px;
}
/*  ------ CONTAINER section END ------   */
/*  ------ BOX section START ------   */
#boxtop
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #f5f5f5;
height: 20px;
}
#tr
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #f5f5f5;
height: 20px;
width: 20px;
float: right;
background-image: url(tr.gif);


}
#tl
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #f5f5f5;
height: 20px;
width: 20px;
float: left;
}



#boxmiddle
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #f5f5f5;
height: 80px;
}
#boxbottom
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #f5f5f5;
height: 20px;
}
.br
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #f5f5f5;
height: 20px;
width: 20px;
float: right;
}
.bl
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #f5f5f5;
height: 20px;
width: 20px;
float: left;
}
/*  ------ BOX section END ------   */
/*  ------ MINWIDTH section START ------   */
.minwidth
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
background-color: #c3b2c5;
height: 2px;
width: 600px;
min-width: 600px;
visibility: hidden;
}


/*  ------ MINWIDTH section END ------   */
/*  -----------------------------------------------------------   */
/*  ------ CSS END for EXAMPLE ------   */
/*  -----------------------------------------------------------   */

For a live demo, and to grab the img's, go to....

http://www.bokb.co.uk/colin/example.htm

wORKS IN nn AND mOZ.... BUT ie IS SCREWED....
so, any one else know how to fix this?
(I say anyone else, as I think I have figured it... yet need to test it properly and figure out 1) why it works...2) the limitations!)

autocrat 52 Posting Pro in Training · Answer 3 · 2005-04-05T01:20:37+00:00

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!

autocrat 52 Posting Pro in Training · Answer 4 · 2005-04-05T17:43:24+00:00

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!

autocrat 52 Posting Pro in Training · Answer 5 · 2005-04-05T21:22:00+00:00

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

DaveSW 15 Master Poster · Answer 6 · 2005-04-05T21:43:57+00:00

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.

autocrat 52 Posting Pro in Training · Answer 7 · 2005-04-05T23:18:03+00:00

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!

DaveSW 15 Master Poster · Answer 8 · 2005-04-05T23:19:56+00:00

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.

autocrat 52 Posting Pro in Training · Answer 9 · 2005-04-05T23:21:06+00:00

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?

DaveSW 15 Master Poster · Answer 10 · 2005-04-06T03:02:59+00:00

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...

autocrat 52 Posting Pro in Training · Answer 11 · 2005-04-06T14:33:02+00:00

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!

DaveSW 15 Master Poster · Answer 12 · 2005-04-06T16:48:28+00:00

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.