943,724 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Overfloat? IE6/win?
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Apr 2nd, 2005
0

Overfloat? IE6/win?

Expand Post »

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?
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 2nd, 2005
0

Re: Overfloat? IE6/win?

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
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004
Permalink
Apr 2nd, 2005
0

Re: Overfloat? IE6/win?

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...
Reputation Points: 17
Solved Threads: 14
Posting Whiz
DanceInstructor is offline Offline
355 posts
since Feb 2005
Permalink
Apr 3rd, 2005
0

Re: Overfloat? IE6/win?

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!
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 3rd, 2005
0

Re: Overfloat? IE6/win?

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!)
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 4th, 2005
1

Re: Overfloat? IE6/win?

Is this something like what you want?

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.  "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>Page title</title>
  6. <style type="text/css">
  7. <!--
  8. #tl {
  9.   background: url(tl.gif) 0 0 no-repeat;
  10. 	border: 1px solid #000;
  11. }
  12. #tr {
  13.   background: url(tr.gif) 100% 0 no-repeat;
  14. }
  15. #br {
  16.   background: url(br.gif) 100% 100% no-repeat;
  17. }
  18. #bl {
  19.   background: url(bl.gif) 0 100% no-repeat;	
  20. 	height: 300px;
  21. }
  22. -->
  23. </style>
  24.  
  25. </head>
  26. <body>
  27. <div id="tl"><div id="tr"><div id="br"><div id="bl">
  28. testing
  29. <hr style="width: 300px;" />
  30.  
  31. </div></div></div></div>
  32. </body>
  33. </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.
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004
Permalink
Apr 4th, 2005
0

Re: Overfloat? IE6/win?

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!
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 5th, 2005
0

Re: Overfloat? IE6/win?

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.
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004
Permalink
Apr 5th, 2005
0

Re: Overfloat? IE6/win?

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!
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Permalink
Apr 5th, 2005
0

Re: Overfloat? IE6/win?

So which way round should the colours be?
A purple rounded rectangle on white, or a white rounded rectangle on purple?
Reputation Points: 54
Solved Threads: 20
Master Poster
DaveSW is offline Offline
765 posts
since Jul 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: designing with em / ex ?
Next Thread in HTML and CSS Forum Timeline: Padding and margins





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC