•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 397,774 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,502 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 3764 | Replies: 17
 |
•
•
Join Date: Feb 2005
Posts: 427
Reputation: 
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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 <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
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
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
http://www.doxdesk.com/software/js/minmax.html
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
•
•
Join Date: Feb 2005
Posts: 354
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Whiz
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...
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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!
arghhhh!
LOL
Still, post by this evening, promise!
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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!)
++++++++++++++++ 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!)
•
•
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
Is this something like what you want?
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.
<!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> emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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!
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
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
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.
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.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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!
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!
•
•
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
So which way round should the colours be?
A purple rounded rectangle on white, or a white rounded rectangle on purple?
A purple rounded rectangle on white, or a white rounded rectangle on purple?
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- Previous Thread: designing with em / ex ?
- Next Thread: Padding and margins
