HTML and CSS

Overfloat? IE6/win?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Overfloat? IE6/win?

Apr 2nd, 2005

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?

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Overfloat? IE6/win?

Apr 2nd, 2005

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

•

Join Date: Feb 2005

Posts: 355

Reputation: DanceInstructor is an unknown quantity at this point

Solved Threads: 14

DanceInstructor DanceInstructor is offline

Offline

Posting Whiz

Re: Overfloat? IE6/win?

Apr 2nd, 2005

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

Clear Mind Hosting and Web Design

If I've helped you please consider adding to my reputation.

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: Overfloat? IE6/win?

Apr 3rd, 2005

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!

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: Overfloat? IE6/win?

Apr 3rd, 2005

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> 

</div> 

</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!)

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Overfloat? IE6/win?

Apr 4th, 2005

Is this something like what you want?

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<!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.

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: Overfloat? IE6/win?

Apr 4th, 2005

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!

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Overfloat? IE6/win?

Apr 5th, 2005

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.

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: Overfloat? IE6/win?

Apr 5th, 2005

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!